Existen muchos atributos que definen el aspecto visual de una tabla en HTML, pero la mayoría de ellos pueden ser logrados mediante hojas de estilo. Los beneficios de usar hojas de estilo son muchos y la mejor forma de usarlos es mediante archivos externos. De este modo puedes definir clases que pueden posteriormente ser usadas en el documento con el atributo "class". Cada tag que inserte elementos visuales posee este atributo "class". Para aprender más acerca de las hojas de estilo, refiérete al tutorial "Hojas de estilo en cascada (CSS)". También recomendamos fuertemente utilizar hojas de estilo para reemplazar a los tags y atributos desaprobados en HTML.
Primero que nada mostraremos un ejemplo donde algunos atributos son definidos para establecer algunas de las características visuales de la tabla. Estos atributos son: cellpadding, cellspacing, frame, rules y border. Para aprender más acerca de estos atributos ver tag HTML table (y las páginas de todos los otros tags usados en tablas). Esto te ayudará a aprender la funcionalidad de los tags.
| Código | Visualización | |||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="1" frame="void" rules="groups" cellpadding="5" summary="Ejemplo para algunas características visuales en una tabla con agrupaciones."> <colgroup style="width: 5.32em" /> <colgroup align="right" span="3" style="width: 3.04em" /> <colgroup style="width: 6.84em" /> <thead> <tr> <td></td> <th>VIT A</th> <th>VIT B</th> <th>VIT C</th> <th>Balance</th> </tr> </thead> <tbody> <tr> <th>Enero</th> <td>12.8</td> <td>42.6</td> <td>5.2</td> <td>Incompleto</td> </tr> <tr> <th>Febrero</th> <td>10.5</td> <td>30.1</td> <td>10.4</td> <td>Incompleto</td> </tr> <tr> <th>Marzo</th> <td>9.5</td> <td>31.5</td> <td>5.4</td> <td>Completo</td> </tr> </tbody> <tbody> <tr> <th>Abril</th> <td>10.5</td> <td>40.6</td> <td>7.4</td> <td>Completo</td> </tr> <tr> <th>Mayo</th> <td>15.6</td> <td>25.2</td> <td>15.1</td> <td>Completo</td> </tr> <tr> <th>Junio</th> <td>10.1</td> <td>36.6</td> <td>4.8</td> <td>Completo</td> </tr> </tbody> </table> |
|
Como este sitio está dirigido a enseñar todo acerca de HTML solamente, definiremos un ejemplo simple acerca de cómo los atributos de presentación de una tabla son definidos usando hojas de estilo en cascada. Para aprender más acerca de las hojas de estilo refiérete a nuestro tutorial "Hojas de estilo en cascada (CSS)". En este ejemplo usaremos el tag HTML style, que debe ser definido en algún lugar del encabezado del documento (ver tag HTML head), para establecer las clases CSS. Las clases de estilo para este ejemplo se definirán así:
Y la aplicación de estas clases a una tabla se debe hacerse así:
| Código | Visualización | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table class="exampletable" cellpadding="5" summary="Ejemplo para algunas características visuales en una tabla usando hojas de estilo en cascada."> <colgroup style="width: 5.32em" class="exampleheadercell" /> <colgroup align="right" span="3" style="width: 3.04em" class="examplelightcell" /> <colgroup style="width: 6.84em" class="exampledarkcell" /> <thead> <tr class="exampleheadercell"> <td></td> <th>VIT A</th> <th>VIT B</th> <th>VIT C</th> <th>Balance</th> </tr> </thead> <tbody> <tr> <th>Enero</th> <td>12.8</td> <td class="exampleredcell">42.6</td> <td>5.2</td> <td>Incompleto</td> </tr> <tr> <th>Febrero</th> <td>10.5</td> <td>30.1</td> <td>10.4</td> <td>Incompleto</td> </tr> <tr> <th>Marzo</th> <td>9.5</td> <td>31.5</td> <td>5.4</td> <td>Completo</td> </tr> </tbody> </table> |
|
Nota como algunas celdas reciben varias definiciones de clases (de celdas, filas y columnas). Para resolver estas ambigüedades, las hojas de estilo en cascada usan una jerarquía que para este caso es "celda > fila > columna" y va a través de la misma buscando atributos de presentación (la primera definición suprime al resto).
Existen más tags y atributos, algunos de ellos visuales, que ofrecen más información a los navegadores o arañas acerca de la tabla. Como tal vez ya has leído en este sitio, muchos de los tags y atributos producen un efecto visual que puede ser logrado por otros medios, pero por alguna razón siguen vigentes y no han sido desaprobados. La principal razón para la mayoría de ellos es que proveen información no visual que está disponible para muchos otros programas que pueden surfear tu sitio (por ejemplo, navegadores hablados, navegadores braille, arañas de los motores de búsqueda, navegadores de teléfonos móviles, etc.).
Uno de ellos, tal vez el más importante, es el título de una tabla. Definido mediante el tag HTML caption, el título debe describir brevemente la naturaleza de la tabla y es usualmente mostrado en algún lugar cercano a la tabla (la posición puede ser ajustada usando hojas de estilo). Recuerda que el tag del título de la tabla solo está permitido justo después del tag de apertura de la tabla.
| Código | Visualización | ||||||
|---|---|---|---|---|---|---|---|
| <table border="1"> <caption>Título de la tabla</caption> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table> |
|
También se puede agregar información acerca de la naturaleza de la tabla usando el atributo "summary". El valor de este atributo debería describir la naturaleza de una tabla en una forma más detallada que el título, ayudando a comprender de una mejor manera el contenido de la misma (ver tag HTML table).
Cada celda posee asimismo el atributo "abbr", el cual provee una versión abreviada del contenido de la misma. La aplicación de este atributo está sujeta a decisiones del navegador, y será probablemente utilizada en lugar del contenido de la celda cuando el espacio disponible sea reducido (ver tag HTML td y tag HTML th).