Tablas HTML

Las tablas HTML permiten a los autores web organizar los datos en filas y columnas.

Tablas HTML

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