Malditas tablas (Parte 3)

Las tablas están compuesta por filas y columnas, la intersección de una fila y una columna determinan una celda, un lugar donde pude colocarse un dato. En HTML, una fila se crea mediante el tag TR y una celda mediante el tag TD ¿Y las columnas?

Generalmente, decimos que un código como este, creará dos filas con tres columnas:

<tr>
  <td> 11 </td> <td> 12 </td> <td> 13 </td>
</tr>
<tr>
  <td> 21 </td> <td> 22 </td> <td> 23 </td>
</tr>

es cierto, y podemos controlar las propiedades de cada fila en forma individual mediante CSS pero, no podemos controlar las columnas ya que TD sólo es una celda. Para controlar las columnas como grupo, necesitamos utilizar el tag COL:

<col atributos /> <col atributos /> <col atributos />
<tr>
 <td> 11 </td> <td> 12 </td> <td> 13 </td>
</tr>
<tr>
 <td> 21 </td> <td> 22 </td> <td> 23 </td>
</tr>

11	12	13	14
21	22	23	24
31	CELDA	33	34
41	42	43	44
51	52	53	54
61	62	63	64

De esta manera, con <COL style="... propiedades..." /> establecemos las propiedades de toda la columna y con <TR style="... propiedades..." />; las de toda la fila.

Es probable que también hayan visto que, al crear una tabla, la mayoría de los editores agrega el tag <TBODY>; inmediatamente después de <TABLE> y un tag de cierre </TBODY> antes de </TABLE>. Parece algo caprichoso, una obligación sintáctica sin uso práctico. Cuando la tabla es simple, esto es bastante cierto pero el tag TBODY no permite agrupar filas y establecer sus propiedades una sola vez. De forma similar, el tag COLGROUP nos permite agrupar columnas:

11	12	13	14
21	22	23	24
31	CELDA	CELDA	34
41	CELDA	CELDA	44
51	52	53	54
61	62	63	64
71	72	73	74

Este sería el esquema básico del código:

<table ... >
<col ... />
<colgroup ... >
 <col ... /> <col ... /> <col ... />
</colgroup>
<tr>
 <td>... 11 ...</td> <td>... 12 ...</td> <td>... 13 ...</td> <td>... 14 ...</td>
</tr>
<tbody ... >
 <tr>
  <td>... 21 ...</td> <td>... 22 ...</td> <td>... 23 ...</td> <td>... 24 ...</td>
 </tr>
 <tr>
  <td>... 31 ...</td> <td>... 32 ...</td> <td>... 33 ...</td> <td>... 34 ...</td>
 </tr>
</tbody>
<tr>
 <td>... 41 ...</td> <td>... 42 ...</td> <td>... 43 ...</td> <td>... 44 ...</td>
</tr>
</table>

Las celdas de una tabla pueden ser tratadas en forma individual, como un grupo incluido en una fila o como un grupo contenido en una columna pero, además, hay dos atributos que nos permiten combinar celdas adyacentes, estos son:

<td rowspan = cantidad de filas>
<td colspan = cantidad de columnas>

11	12	13	14 + 24 + 34
21 + 22		23
31	32	33
41	42	43	44
51 + 52 61 + 62 71 + 72		53	54
		63	64
		73 + 74

<td colsapan = 2>... 21 + 22 ...</td> <td>... 23 ...</td>
    nos salteamos la celda 22

<tr>
 <td rowspan = 2>... 31 + 41 ...</td> <td>... 32 ...</td> <td>... 33 ...</td>
</tr>
<tr>
 <td>... 42 ...</td> <td>... 43 ...</td>
</tr>
    nos salteamos la celda 41