Tablas
Nombre | Apellidos | País |
|---|---|---|
Kiko | Palomares | España |
Juan | Hernández | México |
Sofía | Martínez | Argentina |
<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>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.
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.
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.
th, td {
padding: 10px;
}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.
Añadir espacio entre los bordes
Podemos añadir espacio entre las celdas usando la propiedad de CSS border-spacing.
Celdas que ocupan varias columnas
Tenemos el atributo colspan en el que podemos indicar el número de columnas que ocupa esa celda.
Celdas que ocupan varias filas
Tenemos el atributo rowspan en el que podemos indicar el número de filas que ocupa esa celda.
Añadir un título a la tabla
Podemos usar la etiqueta <caption> para añadir un título a la tabla.
Resumen
Usamos
<table>para definir una tablaUsamos
<tr>para definir una fila en una tablaUsamos
<td>para definir una celda de la tablaUsamos
<th>para los encabezados de la tablaUsamos
<caption>para ponerle un títuloCon la propiedad de CSS
borderpodemos ponerle un bordeCon la propiedad de CSS
border-collapsepodemos juntar los bordesCon el
paddingde CSS podemos darle relleno a las celdasCon el
text-alignde CSS podemos alinear el texto de las celdasCon el
border-spacingpodemos setear espacio entre celdasEl atributo
colspanhace que una celda ocupe varias columnasEl atributo
rowspanhace que una celda ocupe varias filas
