HTML 5 y CSS 3

Tablas HTML

Las tablas en HTML se emplean para presentar información susceptible de ser organizada en filas y columnas.

El elemento principal es el elemento table que tiene etiqueta de apertura y de cierre.

En él se anidan las tr, las filas, (del ingés table row). Con etiqueta de apertura y cierre.

Y dentro de cada tr se colocan las celdas, las td (del inglés table data, los datos de la tabla, la información de la tabla). También esta etiqueta tiene apertura y cierre.

Veamos como ejemplo esta tabla de dos filas y cuatro columnas:

Este es el código que he necesitado:

<table>
	<tr>
		<td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td>
	</tr>
	<tr>
		<td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td>
	</tr>
</table>
 

Además de este CSS:

<style>
table, th, td {
  border: 1px solid;
}
table{
	width:100%;
}
</style>
 

Vamos a crear una tabla un poco más compleja:

Este es el código necesario:

<table>
	<tr>
		<td>&nbsp;</td><td>L</td><td>M</td><td>X</td><td>J</td><td>V</td>
	</tr>
	<tr>
		<td>08:00-08:55</td><td>Mat</td><td>Len</td><td>Mat</td><td>Len</td><td>EdAr</td>
	</tr>
	<tr>
		<td>09:00-09:55</td><td>Len</td><td>Mat</td><td>Len</td><td>Mat</td><td>EdAr</td>
	</tr>
	<tr>
		<td>10:00-10:25</td><td>Rec.</td><td>Rec.</td><td>Rec.</td><td>Rec.</td><td>Rec.</td>
	</tr>
	<tr>
		<td>10:30-11:25</td><td>CN</td><td>CS</td><td>CN</td><td>CS</td><td>Mus</td>
	</tr>
	<tr>
		<td>11:30-12:25</td><td>EF</td><td>EF</td><td>Tut</td><td>EF</td><td>Mus</td>
	</tr>
</table>
 	

La primera columna nos ha cogido más espacio del deseado.

Para arreglarlo, a las celdas de la primera fila les vamos a poner un estilo de 20% de ancho a la primera celda y un 16% al resto. 16% x 5 = 80%. 80% + 20% = 100%.

El resto de las celdas se adaptarán al espacio que la primera fila ha reservado para cada celda.

Ver el código:

<table>
	<tr>
		<td style="width:20%">&nbsp;</td><td style="width:16%">L</td><td style="width:16%">M</td><td style="width:16%">X</td><td style="width:16%">J</td><td style="width:16%">V</td>
	</tr>
	<tr>
		<td>08:00-08:55</td><td>Mat</td><td>Len</td><td>Mat</td><td>Len</td><td>EdAr</td>
	</tr>
	...
</table>
 	

El elemento th

Convendrás conmigo que tanto la primera fila como la primera columna tienen un carácter especial. Son las celdas directoras. Las que marcan la información de cada una de las celdas. En HTML a estas celdas se las llama th (del inglés table head, cabeceras de tabla). Las celdas de la primera fila y las de la primera columna que son cabeceras de tabla, se escriben con la etiqueta <th> de apertura y cierre en lugar de las etiquetas <td> de apertura y cierre. Hacemos, por tanto, este cambio:

Observa que al hacer este cambio han pasado dos cosas: El texto de la primera fila y el de la primera columna aparece en negrita y centrado. Es lo que por defecto, hace el elemento th. Esto se podría cambiar si quisiéramos con los estilos CSS.

Colspan y Rowspan

Podemos agrupar varias celdas si así nos interesa.

Por ejemplo, vamos a agrupar todas las celdas del lunes al viernes a la tercera hora porque todas tienen el mismo contenido.

¿Cómo se hace esto? Cuando lleguemos a la primera celda que queremos extender, le decimos colspan="5". En este caso es 5 porque esa celda se va a extender ocupando cinco columnas. Y eliminamos de esa fila las otras cuatro <td>

Este sería el fragmento de código en el que se queda la cuarta fila de la tabla:

...
<tr>
		<th>10:00-10:25</th><td colspan="5">Recreo</td>
</tr>
...

Del mismo modo podemos agrupar dos celdas, o más, en vertical. Esto se hace con el atributo colspan. Por ejemplo, vamos a agrupar las celdas de los dos primeros tramos horarios del viernes y de los dos últimos de este mismo día puesto que se imparte la misma materia. De nuevo, el colspan se coloca en la primera celda y luego habrá que eliminar las otras celdas (de la fila o filas inferiores) que se vean afectadas por el agrupamiento.

Este es el código que afecta a la primera celda extendida verticalmente:

...
<tr>
   <th>08:00-08:55</th><td>Mat</td><td>Len</td><td>Mat</td><td>Len</td><td rowspan="2">EdAr</td>
</tr>
<tr>
   <th>09:00-09:55</th><td>Len</td><td>Mat</td><td>Len</td><td>Mat</td>
</tr>
...
	

Separar el texto del borde y simplicar los bordes de la tabla

Como puedes observar, el texto está demasiado pegado al borde izquierdo en la celda.
Esto se arregla poniendo un padding. Vamos a poner un padding horizontal de 8 píxeles y otro vertical de 2 píxeles.

Por otro lado, también quiero simplificar los bordes de la tabla para que aparezca una única línea, no dos. Esto se consigue con la propiedad de CSS border-collapse que se pone a collapse. El código para ambas modificaciones es:

table{
  border-collapse:collapse;
}
td{
  padding:2px 8px;
}
	

Este es el nuevo resultado:

Título de la tabla

Se puede incorporar un título a la tabla con el elemento <caption> que se declara antes de comenzar con la primera fila y justo después de la etiqueta table. Con este código:

 <caption>Horario de clase. Curso 2022/23. Grupo 4B</caption>
	

Y este es el resultado:

Rayas de cebra

Se pueden mostrar las filas alternativamente una de cada color

Para ello aplicamos a las tr la pseudo clase nth-child(even) asignando el color de fondo que deseemos. Con esta sintaxis se mostrarán coloreadas las filas pares (even). Si hubiéramos querido colorear las filas impares, la pseudo clase hubiera sido nth-child(odd). Ver código:

 tr:nth-child(even) {
  background-color: #D6EEEE;
}
	

Y ver el resultado:

Nota: Antes de aplicar este efecto, hemos deshecho las acciones de colspan para que se muestren las filas perfectas...

Efecto hover en filas

Observa qué ocurre al pasar el cursor sobre las filas:

Este efecto tan bonito, sobre todo cuando la tabla es muy grande y tiene muchas filas y muchas columnas, se consigue con la pseudo clase hover. Con esta sintaxis:

 tr:hover {
	background-color: #D6EEEE;
}