Tablas HTML
En HTML, puedes crear tablas para tu sitio web utilizando la etiqueta <table> junto con las etiquetas <tr>, <td> y <th>.
Las tablas HTML permiten mostrar datos (por ejemplo, imágenes, texto, enlaces) en columnas y filas de celdas. Las filas de la tabla se pueden agrupar en secciones de encabezado, pie y cuerpo mediante los elementos <thead>, <tfoot> y <tbody>, respectivamente.
En HTML5, podemos colocar <tfoot> antes o después de la etiqueta <tbody>. Deben ir después de cualquier elemento <caption>, <colgroup> y <thead>.
La mayoría de los atributos del elemento <table> no se utilizan en HTML5. Si deseas dar estilo a la apariencia de la tabla, puedes usar CSS en su lugar.
Extensión a Múltiples Filas y Columnas
Es posible extender las filas y columnas de una tabla a través de varias filas y columnas.
Por lo general, una celda de tabla no puede ocupar el espacio que está debajo o encima de otra celda. Sin embargo, si deseas abarcar varias filas o columnas en una tabla, puedes utilizar los atributos colspan o rowspan.
Agregar Leyendas a las Tablas
Puedes utilizar el elemento <caption> para especificar una leyenda para las tablas. Debe colocarse inmediatamente después de la etiqueta de apertura <table>. Por defecto, la leyenda se mostrará en la parte superior de la tabla, pero su posición se puede cambiar con la propiedad CSS caption-side.
Sintaxis
La etiqueta <table> se utiliza en pares. El contenido se escribe entre la etiqueta de apertura <table> y la etiqueta de cierre </table>.
Ejemplo de la etiqueta HTML <table>:
Ejemplo de una tabla HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Resultado
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February | 10.01.2014 |
En el ejemplo anterior, utilizamos la etiqueta <table> para crear una tabla. Luego, usamos la etiqueta <tr> para dividir la tabla en filas. La etiqueta <th> se utiliza para las celdas del encabezado de la tabla, donde se escribe el título. En otras palabras, la fila de la tabla se divide en encabezados. La etiqueta <td> se utiliza para las celdas de la tabla donde se escribe la información.
Si deseas mostrar el encabezado en una sola celda, puedes utilizar el atributo colspan.
Ejemplo de la etiqueta HTML <table> con el atributo colspan:
Ejemplo de una tabla HTML con un atributo colspan|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>February</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Resultado
| Month and Date |
|---|
| January |
| February |
Lo mismo se puede hacer con las filas, pero utilizando el atributo rowspan.
Ejemplo de la etiqueta HTML <table> con el atributo rowspan:
Ejemplo de una tabla HTML con un atributo rowspan|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td {
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%;">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">10.01.2014</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
</body>
</html>Resultado
| Month | Date |
|---|---|
| January | 10.01.2014 |
| February |
Práctica
¿Cuáles son las funciones y características de una tabla HTML?