HTML table
La etiqueta <table> de HTML se utiliza para crear tablas en un documento HTML. Dentro de una tabla, se pueden incluir filas y celdas para organizar y presentar información de manera estructurada.
La estructura básica de una tabla consta de una etiqueta <table> que envuelve a otras etiquetas como <thead>, <tbody>, <tfoot>, <tr>, <th> y <td>.
La etiqueta <thead> se usa para crear un encabezado de tabla que se mostrará al principio de la tabla y se utiliza para describir las columnas.
La etiqueta <tbody> se utiliza para crear el cuerpo de la tabla, donde se incluyen las filas y celdas con los datos.
La etiqueta <tfoot> se utiliza para crear un pie de tabla que se mostrará al final de la tabla y se utiliza para mostrar información resumen.
La etiqueta <tr> se utiliza para crear una fila en la tabla.
La etiqueta <th> se utiliza para crear una celda de encabezado en una fila.
La etiqueta <td> se utiliza para crear una celda de datos en una fila.
Además de estas etiquetas, también se pueden utilizar atributos para personalizar la apariencia y el comportamiento de la tabla, como el ancho, el borde, el alineamiento, etc.
Ejemplo de uso
Aquí tienes un ejemplo básico de cómo utilizar la etiqueta <table> en HTML para crear una tabla sencilla con un encabezado y varias filas de datos:
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Pérez</td>
<td>32</td>
</tr>
<tr>
<td>Maria</td>
<td>García</td>
<td>27</td>
</tr>
<tr>
<td>Pedro</td>
<td>Sánchez</td>
<td>45</td>
</tr>
</tbody>
</table>
Lenguaje del código: HTML, XML (xml)Este código crea una tabla con un encabezado que tiene tres columnas: “Nombre”, “Apellido” y “Edad”, y tres filas con datos en cada una de ellas.
La tabla se vería así:
| Nombre | Apellido | Edad |
|---|---|---|
| Juan | Pérez | 32 |
| Maria | García | 27 |
| Pedro | Sánchez | 45 |
Nota que en este ejemplo, es importante tener en cuenta que la tabla aparecería sin bordes, ya que no se especificó ningún estilo para ella.
Atributos
Hay varios atributos que se pueden utilizar en la etiqueta <table> para personalizar la tabla. Aquí te muestro algunos de los más comunes:
- border: Especifica el tamaño del borde de la tabla en pixels. Por ejemplo, border=»1″ mostraría un borde de 1 pixel de ancho alrededor de la tabla.
- width: Especifica el ancho de la tabla en pixels o porcentaje. Por ejemplo, width=»100%» haría que la tabla ocupe el ancho completo de la pantalla.
- align: Especifica la alineación de la tabla en relación con el contenido que la rodea. Puede ser “left”, “center” o “right”.
- cellpadding: Especifica el espacio en pixels entre el contenido de las celdas y los bordes de las celdas.
- cellspacing: Especifica el espacio en pixels entre las celdas de la tabla.
- summary: Proporciona una descripción breve de la tabla para los usuarios de lectores de pantalla.
- bgcolor: Especifica el color de fondo de la tabla. Puede ser un valor hexadecimal o un nombre de color.
- frame: Especifica qué partes de los bordes de la tabla deben ser dibujadas. Puede ser “void”, “above”, “below”, “hsides”, “vsides” o “lhs”.
- rules: Especifica qué líneas de la tabla deben ser dibujadas. Puede ser “none”, “groups” o “rows”.
- cellborder: Especifica el tamaño del borde de las celdas en pixels.
Sin embargo, se recomienda utilizar estilos CSS en lugar de estos atributos para mejorar la accesibilidad y facilidad de mantenimiento del código.
Ejemplo
Un ejemplo de cómo se vería una tabla con estos atributos:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Tabla</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" width="50%" bgcolor="#F1F1F1" cellspacing="5" cellpadding="10">
<caption align="top">Tabla de ejemplo</caption>
<colgroup span="2" width="50%"></colgroup>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Fila 1, Celda 1</td>
<td>Fila 1, Celda 2</td>
</tr>
<tr>
<td>Fila 2, Celda 1</td>
<td>Fila 2, Celda 2</td>
</tr>
</table>
</body>
</html>
Lenguaje del código: HTML, XML (xml)Este ejemplo crea una tabla con un borde de 1px, una separación de 5px entre las celdas y un relleno de 10px alrededor del contenido de cada celda. La tabla tiene un ancho del 50% y se alinea en el centro de la página. Utiliza un fondo gris claro (#F1F1F1) y tiene un encabezado con dos columnas.
Utiliza el atributo colgroup para especificar el ancho de las dos columnas y el span para especificar el número de columnas que se van a aplicar estos atributos.
También tiene un título para la tabla con la etiqueta <caption> y dos encabezados de columna con la etiqueta <th>. Hay dos filas con dos celdas cada una, utilizando las etiquetas <tr> y <td> respectivamente.
La tabla de ejemplo se vería así:
| Encabezado 1 | Encabezado 2 |
|---|---|
| Fila 1, Celda 1 | Fila 1, Celda 2 |
| Fila 2, Celda 1 | Fila 2, Celda 2 |
Ten en cuenta que este es solo un ejemplo básico y existen muchos otros atributos y etiquetas que puedes utilizar para crear tablas más complejas y personalizadas.