El tamaño de una tabla en HTML (lenguaje de marcas hipertextual) puede establecerse usando los atributos "width" y "height". Estos atributos pueden ser definidos en varias partes de la tabla: celdas (tag HTML th y tag HTML td), columnas (tag HTML col), grupos de columnas (tag HTML colgroup), filas (tag HTML tr) y la tabla misma (tag HTML table). Es recomendable definir estos atributos solo en columnas y filas (cuando sea posible) para evitar interpretaciones ambiguas. De todos modos, el tamaño de una tabla es usualmente no solo decidido por los valores de dichos atributos sino también basados en el espacio disponible para dibujarla. En algunos casos, los navegadores pueden suprimir los atributos dimensionales para hacer que una tabla quepa en la pantalla.
Estos dos atributos aceptan valores de tipo multi-lenght. En el próximo ejemplo definimos una tabla donde las dos primeras columnas reciben el 30% del ancho de la tabla (conjuntamente) y el resto tiene un ancho de 50 píxeles cada una (usando el tag HTML col visto más adelante en este tutorial).
| Código | Visualización | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="1" summary="Ejemplo de dimensionamiento en una tabla HTML."> <col width="15%" /> <col width="15%" /> <col width="35%" /> <col width="35%" /> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> </table> |
|
Recomendamos fuertemente que las dimensiones sean definidas mediante hojas de estilo (ver tutorial "Hojas de estilo en cascada (CSS)"). Esto ayudaría a hacer un documento compatible con el estándar de código XHTML (lenguaje de marcas hipertextual extensible).
Una tabla HTML puede agruparse horizontalmente en tres grupos: el encabezado (tag HTML thead), el cuerpo o cuerpos (tag HTML tbody) y el pie (tag HTML tfoot). Cada uno de estos tags encierra un grupo de filas. Estas divisiones pueden ayudar a hacer las tablas más fáciles de comprender, especialmente cuando deben ser mostradas en más de una página (por ejemplo, cuando una tabla larga se imprime). En dicho caso, los encabezados y pies pueden ser mostrados en cada página.
También es posible hacer dichas agrupaciones visibles con los atributos de la tabla. Estos atributos serán estudiados posteriormente en este mismo tutorial al definir el aspecto visual de una tabla.
| Código | Visualización | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="1" summary="Ejemplo de agrupación horizontal en una tabla HTML."> <thead> <tr> <td></td> <th>Vitamina A</th> <th>Vitamina B</th> <th>Vitamina C</th> </tr> </thead> <tfoot> <tr> <th>Totales</th> <td>32.8</td> <td>104.2</td> <td>21.0</td> </tr> </tfoot> <tbody> <tr> <th>Enero</th> <td>12.8</td> <td>42.6</td> <td>5.2</td> </tr> <tr> <th>Febrero</th> <td>10.5</td> <td>30.1</td> <td>10.4</td> </tr> <tr> <th>Marzo</th> <td>9.5</td> <td>31.5</td> <td>5.4</td> </tr> </tbody> </table> |
|
Nota que en el código, el pie es colocado preferentemente justo debajo del encabezado al comienzo de la tabla. Esto se debe a que tablas realmente grandes pueden tardar un tiempo en descargarse completamente (hasta algunos minutos), y los navegadores pueden optar por mostrar el pie aún antes de que todas las celdas del cuerpo hayan sido recibidas.
Una sola tabla puede tener más de un cuerpo. Esto proporciona a los autores una forma de agrupar o separar filas. Por ejemplo, en la tabla anterior los meses pueden ser agrupados por trimestres, generando de este modo 4 cuerpos en la tabla.
La otra forma de agrupar celdas en una tabla es agrupando verticalmente. Esto no solo permite agrupar columnas temáticamente, sino que además permite asignar atributos a columnas enteras de la tabla. La agrupación puede llevarse a cabo usando dos tags: el tag HTML colgroup y el tag HTML col. Estos dos tags pueden ser usados independientemente o de manera conjunta.
En el ejemplo siguiente insertaremos una tabla muy simple que definirá atributos para las columnas usando el tag HTML col:
| Código | Visualización | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="1" summary="Ejemplo de agrupación de características de columnas en una tabla HTML con el tag HTML col."> <col style="width: 7.6em" /> <col style="width: 2.28em" span="3" align="right" /> <tr> <th>Enero</th> <td>12.8</td> <td>42.6</td> <td>5.2</td> </tr> <tr> <th>Febrero</th> <td>10.5</td> <td>30.1</td> <td>10.4</td> </tr> <tr> <th>Marzo</th> <td>9.5</td> <td>31.5</td> <td>5.4</td> </tr> </table> |
|
Nota el tag de cierre utilizado (" />") que sirve para adaptar el documento al estandard de código XHTML. Para aprender más acerca de los atributos usados en este ejemplo, refiérete la descripción del tag HTML col.
Este ejemplo ha colaborado a definir atributos comunes para celdas de las columnas afectadas, pero no se pueden definir grupos de columnas sin usar el tag HTML colgroup:
| Código | Visualización | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="1" summary="Ejemplo de agrupación vertical en una tabla HTML con el tag HTML colgroup."> <colgroup style="width: 6.08em" /> <colgroup style="width: 2.28em" span="3" align="right" /> <colgroup style="width: 7.6em" /> <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> </table> |
|
Ahora en este ejemplo tenemos tres grupos de columnas. Para aprender más acerca de esto lee la descripción del tag HTML colgroup. De todos modos todas las columnas afectadas por un grupo de columnas deben compartir los mismos atributos. Esto puede ser un inconveniente para los casos en que las columnas en un grupo de columnas necesitan tener distintas características. Para resolver este problema los autores pueden utilizar ambos tags a la vez:
| Código | Visualización | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="1" summary="Ejemplo de agrupación vertical en una tabla HTML con el tag HTML colgroup y el tag HTML col."> <colgroup style="width: 6.08em" /> <colgroup align="right"> <col style="width: 2.28em" span="2" /> <col style="width: 3.04em" /> </colgroup> <colgroup style="width: 7.6em" /> <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> </table> |
|
De este modo aún estamos definiendo tres grupos de columnas, pero dando a las columnas características específicas sin importar si pertenecen al mismo grupo de columnas o no.