Tablas HTML
Las tablas HTML permiten a los autores web organizar los datos en filas y columnas.
Definir una tabla HTML
Una tabla HTML está definida mediante la etiqueta <table>. Cada fila de la tabla se define con la etiqueta <tr>. Un encabezado de tabla se define con la etiqueta <th>. Por defecto, los encabezados de las tablas están en negrita y centrados. Una tabla de datos / celda se define con la etiqueta <td>.
Ejm
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
Nota: Los elementos <td> son los contenedores de datos de la tabla. Pueden contener todo tipo de elementos HTML; texto, imágenes, listas, otras tablas, etc.
Añadiendo borde a la tabla
Si no especifica un borde para la tabla, se mostrará sin bordes. Se establece un borde utilizando la propiedad CSS border.
Ejm
table, th, td {
border: 1px solid black;
}
Recuerda definir bordes para la tabla y las celdas de la tabla.
Bordes colapsados
Si deseas que los bordes colapsen en un borde, agrega la propiedad CSS border-collapse.
Ejm
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Tabla HTML – Agregar relleno de celda
El relleno de celda especifica el espacio entre el contenido de la celda y sus bordes. Si no especificas un relleno, las celdas de la tabla se mostrarán sin relleno. Para establecer el relleno, usa la propiedad CSS padding.
Ejm
th, td {
padding: 15px;
}
Tabla HTML – Encabezados alineados a la izquierda
Por defecto, los encabezados de las tablas están en negrita y centrados. Para alinear los encabezados de la tabla a la izquierda utiliza la propiedad CSS text-align.
Ejm
th {
text-align: left;
}
Tabla HTML – Agregar espacio de borde
El espacio de borde especifica el espacio entre las celdas. Para establecer el espaciado de borde para una tabla, usa la propiedad CSS border-spacing.
Ejm
table {
border-spacing: 5px;
}
Nota: Si la tabla tiene bordes colapsados, el espacio entre bordes no tiene efecto.
Tabla HTML: celdas que abarcan muchas columnas
Para hacer que una celda abarque más de una columna, usa el atributo colspan.
Ejm
<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table>
Tabla HTML: celdas que abarcan muchas filas
Para hacer que una celda abarque más de una fila, usa el atributo rowspan.
Ejm
<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>
Tabla HTML – Agregar un título
Para agregar un título a una tabla, usa la etiqueta <caption>.
Ejm
<table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>
Nota: La etiqueta <caption> debe insertarse inmediatamente después de la etiqueta <table>.
Un estilo especial para una tabla
Para definir un estilo especial para una tabla especial, agrega un atributo id a la tabla.
Ejm
<table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
Ahora debes definir un estilo especial para la tabla.
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Y añadir más estilos
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Resumen
- Utilizamos la etiqueta <table> para definir una tabla.
- Utilizamos la etiqueta <tr> para definir una fila.
- Utilizamos la etiqueta <td> para definir una celda.
- Utilizamos la etiqueta <th> para definir una celda de encabezado.
- Utilizamos la etiqueta <caption> para definir un título en la tabla.
- Utilizamos la propiedad CSS border para definir un borde.
- Utilizamos la propiedad CSS border-collapse para colapsar los bordes de las celdas.
- Utilizamos la propiedad CSS padding para añadir relleno entre los elementos de la celda y los bordes de la misma.
- Utilizamos la propiedad CSS text-align para alinear el texto de la celda.
- Utilizamos la propiedad CSS border-spacing para poner espacio entre las celdas.
- Utilizamos el atributo colspan para hacer que una celda abarque muchas columnas.
- Utilizamos el atributo rowspan para hacer que una celda abarque muchas filas.
- Utilizamos el atributo id para definir unicamente una tabla.
Etiquetas para <table>
Etiqueta | Descripción |
---|---|
<table> | Define una tabla |
<th> | Define una celda de encabezado |
<tr> | Define una fila |
<td> | Define una celda |
<caption> | Define un título |
<colgroup> | Especifica un grupo de una o más columnas en una tabla para formatear |
<col> | Especifica las propiedades de columna para cada columna dentro de un elemento <colgroup> |
<thead> | Agrupa el contenido del encabezado en una tabla |
<tbody> | Agrupa el contenido del cuerpo en una tabla |
<tfoot> | Agrupa el contenido del pie en una tabla |