1.11_Tablas.md

⏴ Volver al índice

Tablas

Ver la clase en vídeo

---

El elemento <table>

Con la etiqueta <table> podemos definir una tabla. Cada fila se define con <tr>. El encabezado de la tabla se define con <th>. Y las celdas se definen con <td>. Dentro de un <td> puede haber cualquier tipo de elemento HTML, textos, imágenes, listas, etc.

<table>
<tr>
    <th>Nombre</th>
    <th>Apellidos</th>
    <th>País</th>
</tr>
<tr>
    <td>Kiko</td>
    <td>Palomares</td>
    <td>España</td>
</tr>
<tr>
    <td>Juan</td>
    <td>Hernández</td>
    <td>México</td>
</tr>
    <tr>
    <td>Sofía</td>
    <td>Martínez</td>
    <td>Argentina</td>
</tr>
</table>

Archivo del ejemplo

Añadir borde

Si no se especifica un borde para la tabla saldrá sin bordes por defecto. Tenemos que usar la propiedad de CSS border.

table, th, td {
    border: 1px solid black;
}

Uniendo los bordes

Si queremos que unir los bordes de cada elemento para que solo haya un borde y no se vea doble, podemos usar la propiedad border-collapse.

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Añadir padding a las celdas

Si queremos dejar espacio entre el contenido de las celdas y el borde podemos usar la propiedad padding de CSS.

Alinear a la izquierda los encabezados

Por defecto los <th> se muestran en negrita y centrados. Si queremos alinearlos a la izquierda podemos usar la propiedad de CSS text-align con el valor left.

table{
    width: 100%;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
}

th{
    text-align: left;
}

Añadir espacio entre los bordes

Podemos añadir espacio entre las celdas usando la propiedad de CSS border-spacing.

table{
    width: 100%;
    border-spacing: 10px;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 10px;
}

Celdas que ocupan varias columnas

Tenemos el atributo colspan en el que podemos indicar el número de columnas que ocupa esa celda.

<table>
    <tr>
        <th>Nombre</th>
        <th colspan="2">Apellidos</th>
    </tr>
    <tr>
        <td>Kiko</td>
        <td>Palomares</td>
        <td>España</td>
    </tr>
    <tr>
        <td>Juan</td>
        <td>Hernández</td>
        <td>México</td>
    </tr>
        <tr>
        <td>Sofía</td>
        <td>Martínez</td>
        <td>Argentina</td>
    </tr>
</table>

Archivo del ejemplo

Celdas que ocupan varias filas

Tenemos el atributo rowspan en el que podemos indicar el número de filas que ocupa esa celda.

<table>
    <tr>
        <th>Nombre</th>
        <th>Apellidos</th>
        <th>País</th>
    </tr>
    <tr>
        <td>Kiko</td>
        <td rowspan="2">Palomares</td>
        <td>España</td>
    </tr>
    <tr>
        <td>Juan</td>
        <td>México</td>
    </tr>
        <tr>
        <td>Sofía</td>
        <td>Martínez</td>
        <td>Argentina</td>
    </tr>
</table>

Archivo del ejemplo

Añadir un título a la tabla

Podemos usar la etiqueta <caption> para añadir un título a la tabla.

<table>
    <caption>Usuarios</caption>
    <tr>
        <th>Nombre</th>
        <th>Apellidos</th>
        <th>País</th>
    </tr>
    <tr>
        <td>Kiko</td>
        <td>Palomares</td>
        <td>España</td>
    </tr>
    <tr>
        <td>Juan</td>
        <td>Hernández</td>
        <td>México</td>
    </tr>
        <tr>
        <td>Sofía</td>
        <td>Martínez</td>
        <td>Argentina</td>
    </tr>
</table>

Resumen

• Usamos <table> para definir una tabla.
• Usamos <tr> para definir una fila en una tabla.
• Usamos <td> para definir una celda de la tabla.
• Usamos <th> para los encabezados de la tabla.
• Usamos <caption> para ponerle un título.
• Con la propiedad de CSS border podemos ponerle un borde.
• Con la propiedad de CSS border-collapse podemos juntar los bordes.
• Con el padding de CSS podemos darle relleno a las celdas.
• Con el text-align de CSS podemos alinear el texto de las celdas.
• Con el border-spacing podemos setear espacio entre celdas.
• El atributo colspan hace que una celda ocupe varias columnas.
• El atributo rowspan hace que una celda ocupe varias filas.

---