Las tablas HTML nos permiten organizar información como texto, imágenes, enlaces u otras tablas usando los mismos conceptos de columnas, celdas, cabeceras y titulares que se ven en otros entornos de publicación de documentos.
Para crear tablas ocupamos las etiquetas <table>...</table> para delimitar el contenido de la tabla, <tr>...</tr> para crear filas y <td>...</td> para definir el contenido de la celda.
Ejemplo de tabla básica:
<table>
<tbody>
<tr>
<td>Celda 1.1</td>
<td>Celda 1.2</td>
<td>Celda 1.3</td>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
</tr>
</tbody>
</table>| Celda 1.1 | Celda 1.2 | Celda 1.3 |
| Celda 2.1 | Celda 2.2 | Celda 2.3 |
| Celda 3.1 | Celda 3.2 | Celda 3.3 |
Titulares y leyendas de tablas
Los titulares dentro de las tablas se crean usando la etiqueta <th>…</th> en lugar de la etiqueta de celda <td>, y le da la apariencia de letra en negrita al texto que esta contiene.
Para establecer una leyenda o título de tabla se emplea la etiqueta <caption>…</caption>, este elemento se coloca justo después de la etiqueta de apertura de la tabla y cada tabla puede solo contener un caption.
Ejemplo de tabla con titulares y leyendas:
<table>
<tbody>
<caption>Tabla de demostración</caption>
<tr>
<td>Celda 1.1</td>
<td>Celda 1.2</td>
<td>Celda 1.3</td>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
</tr>
</tbody>
</table>| Celda 1.1 | Celda 1.2 | Celda 1.3 |
| Celda 2.1 | Celda 2.2 | Celda 2.3 |
| Celda 3.1 | Celda 3.2 | Celda 3.3 |
Atributos colspan y rowspan
Estos atributos se emplean para crear celdas que abarquen múltiples filas o columnas.
Atributo colspan para abarcar 2 columnas:
<td colspan="2">Contenido de la celda</h2>Atributo rowspan para abarcar 2 filas:
<td rowspan="2">Contenido de la celda</h2>Ejemplo de tabla con rowspan y colspan:
<table>
<tbody>
<tr>
<td rowspan="2">Celda 1.1 - 2.1 Ocupando el doble de alto</td>
<td>Celda 1.2</td>
<td>Celda 1.3</td>
</tr>
<tr>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
</tr>
<tr>
<td colspan="2">Celda 3.1-3.2Esta celda ocupa el doble de ancho</td>
<td>Celda 3.3</td>
</tr>
</tbody>
</table>| Celda 1.1 - 2.1 Ocupando el doble de alto | Celda 1.2 | Celda 1.3 |
| Celda 2.2 | Celda 2.2 | |
| Celda 3.1-3.2Esta celda ocupa el doble de ancho | Celda 3.3 | |
Ulises Rendón
