Las tablas están incluidas en HTML desde sus primeras versiones y son una forma fantástica de mostrar datos claramente. Además, si las construimos de forma semántica y correctamente, es muy sencillo darle estilos desde CSS y cambiar su diseño con unas cuantas propiedades CSS, puesto que mediante las etiquetas que la componen se puede hacer referencia a cada parte de la misma.
Sin embargo, debemos tener claro que las tablas son un mecanismo para mostrar datos tabulares, es decir, para mostrar cierta información de forma más cómoda, pero no es un mecanismo de maquetación para colocar elementos.
La etiqueta <table>
Una tabla puede ser sencilla o compleja, dependiendo de nuestro objetivo y la cantidad de etiquetas o atributos a utilizar. Así pues, veamos primero las etiquetas básicas para crear una tabla de la forma más sencilla posible:
| Etiqueta | Descripción |
|---|---|
<table> | Etiqueta contenedora que tendrá en su interior toda la tabla. |
<tr> | Table Row. Etiqueta contenedora de cada fila de la tabla. |
<td> | Table Data. Cada una de las celdas de la tabla. |
<th> | Table Header. Cada una de las celdas de cabecera de la tabla. |
Estas son las etiquetas básicas principales de una tabla. La etiqueta <table> sería el elemento que contendría todos los elementos de la tabla, mientras que <th> y <td> se utilizarían para cada uno de los campos de la tabla (celdas de cabecera y celda de datos respectivamente). Cada vez que se quisiera añadir una nueva fila, habría que incluirlo todo dentro de una etiqueta <tr>.
Estas cuatro etiquetas serían las etiquetas mínimas necesarias para crear una tabla. Un ejemplo muy sencillo de una tabla de 3x2 celdas (exceptuando las cabeceras), sería la siguiente:
<table>
<!-- Fila de la cabecera -->
<tr>
<th>Título columna 1</th> <!-- Celda cabecera de la columna 1 -->
<th>Título columna 2</th> <!-- Celda cabecera de la columna 2 -->
<th>Título columna 3</th> <!-- Celda cabecera de la columna 3 -->
</tr>
<!-- Primera fila -->
<tr>
<td>Celda 1x1</td> <!-- Primera celda de la primera fila -->
<td>Celda 2x1</td> <!-- Segunda celda de la primera fila -->
<td>Celda 3x1</td> <!-- Tercera celda de la primera fila -->
</tr>
<!-- Segunda fila -->
<tr>
<td>Celda 1x2</td> <!-- Primera celda de la segunda fila -->
<td>Celda 2x2</td> <!-- Segunda celda de la segunda fila -->
<td>Celda 3x2</td> <!-- Tercera celda de la segunda fila -->
</tr>
</table>
En este caso de ejemplo tendríamos una sencilla tabla de 3x2 celdas. Por defecto, en la tabla se crea de forma que se adapta al número de celdas que tiene la primera fila. Es decir, si en el primer elemento <tr> se indican 3 elementos <th>, la tabla esperará siempre 3 elementos en cada fila. Si indicaramos menos, las celdas correspondientes donde deberían estar aparecerían vacías (sin celda). Si añadieramos una de más, se saldría de la tabla.
Estilo para una tabla
Además, si al código HTML anterior le aplicamos unos apropiados estilos CSS de tablas, junto a cambios de colores, fuentes, márgenes, rellenos y otros aspectos visuales, podremos cambiar el diseño de la tabla en poco más que un par de líneas.
El siguiente código CSS puede ser utilizado para mostrar esos cambios sobre la tabla anterior:
<table>
<!-- Fila de la cabecera -->
<tr>
<th>Título columna 1</th> <!-- Celda cabecera de la columna 1 -->
<th>Título columna 2</th> <!-- Celda cabecera de la columna 2 -->
<th>Título columna 3</th> <!-- Celda cabecera de la columna 3 -->
</tr>
<!-- Primera fila -->
<tr>
<td>Celda 1x1</td> <!-- Primera celda de la primera fila -->
<td>Celda 2x1</td> <!-- Segunda celda de la primera fila -->
<td>Celda 3x1</td> <!-- Tercera celda de la primera fila -->
</tr>
<!-- Segunda fila -->
<tr>
<td>Celda 1x2</td> <!-- Primera celda de la segunda fila -->
<td>Celda 2x2</td> <!-- Segunda celda de la segunda fila -->
<td>Celda 3x2</td> <!-- Tercera celda de la segunda fila -->
</tr>
</table>
table {
border-collapse: collapse;
border: 2px solid #000;
}
td,
th {
border: 1px solid #000;
padding: 10px;
}
th {
background: #000;
color: #fff;
text-transform: uppercase;
}
td {
text-align: center;
border-bottom: 2px solid #111;
color: #333;
font-size: 18px;
}
Existen una serie de atributos de etiquetas relacionadas con las tablas que están obsoletos y ya no se deben utilizar, como por ejemplo align, bgcolor o valign. Tienes más información en etiquetas HTML obsoletas.
