Las tablas en HTML son una herramienta fundamental para organizar datos en filas y columnas, facilitando la presentación clara y estructurada de información. Para crear una tabla, comenzamos con la etiqueta table, que delimita el inicio y el final de la tabla. Dentro de esta, cada fila se define con la etiqueta tr, y dentro de cada fila, las celdas se crean con la etiqueta td. Por ejemplo, si queremos una fila con tres columnas, escribiríamos tres etiquetas td dentro de un tr.
<table>
<tr>
<td>Primero</td>
<td>Segundo</td>
<td>Tercero</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Para destacar encabezados de columna, utilizamos la etiqueta th en lugar de td. Los elementos dentro de th se muestran en negrita y centrados, lo que ayuda a identificar claramente las categorías o títulos de cada columna.
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
Además, podemos añadir un título a la tabla con la etiqueta caption, que se muestra centrado justo encima de la tabla, sin formar parte de las filas ni columnas.
<table>
<caption>Números</caption>
<!-- filas y celdas aquí -->
</table>
Aunque es recomendable separar el contenido HTML de la presentación visual usando CSS, existen algunos atributos en las etiquetas de tabla que permiten modificar su apariencia directamente. Por ejemplo, el atributo border en la etiqueta table define el grosor del borde de cada celda.
<table border="1">
<!-- contenido -->
</table>
Para controlar el espacio entre los bordes de las celdas, usamos cellspacing, y para el espacio entre el borde y el contenido de la celda, cellpadding. Ajustar estos valores puede hacer que la tabla se vea más compacta o más espaciosa.
<table border="1" cellspacing="0" cellpadding="5">
<!-- contenido -->
</table>
El ancho total de la tabla se puede definir con el atributo width. Si no se especifica, la tabla ocupará solo el espacio necesario para su contenido.
<table border="1" width="300">
<!-- contenido -->
</table>
En cuanto a la alineación, podemos modificar cómo se posiciona el contenido dentro de las filas o celdas. El atributo align en la etiqueta tr permite alinear horizontalmente el contenido de todas las celdas de esa fila a la izquierda, centro o derecha.
<tr align="center">
<td>Texto centrado</td>
<td>Otro texto</td>
</tr>
Para la alineación vertical, el atributo valign (o vertical-align) permite posicionar el contenido arriba (top), en el centro (middle) o abajo (bottom) dentro de la celda. Esto es especialmente útil cuando el contenido tiene varias líneas.
<td valign="top">Texto arriba</td>
<td valign="middle">Texto centrado</td>
<td valign="bottom">Texto abajo</td>
También podemos aplicar estos atributos a celdas individuales para un control más preciso. Por ejemplo, para alinear solo una celda a la derecha y darle un ancho específico:
<td align="right" width="200">Contenido alineado a la derecha</td>
Un aspecto importante de las tablas es la posibilidad de combinar celdas para que ocupen más de una columna o fila. Esto se logra con los atributos colspan y rowspan. colspan indica cuántas columnas debe abarcar una celda, mientras que rowspan indica cuántas filas.
<table border="1">
<tr>
<td>Primero</td>
<td colspan="2">Segundo y tercero combinados</td>
</tr>
<tr>
<td rowspan="2">Celda que ocupa dos filas</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
</tr>
</table>
Hay que tener cuidado al usar rowspan y colspan para evitar que la tabla quede desalineada o con espacios vacíos inesperados, ya que al combinar celdas se desplazan otras hacia la derecha o hacia abajo.
Por último, es importante recordar que aunque antiguamente se usaban tablas para maquetar páginas web completas, hoy en día esta práctica está obsoleta y no es recomendable. Las tablas deben reservarse exclusivamente para mostrar datos tabulares, manteniendo así una estructura semántica clara y facilitando el mantenimiento y la accesibilidad del código.