ETIQUETAS PARA TABLAS

 Etiqueta <th>

Dado que es muy común que las tablas tengan una primera fila de cabecera se creó la etiqueta <th>. Esta etiqueta se aplica a las celdas de cabecera en lugar de la etiqueta td y el efecto fundamental es que tiene un formato diferente, normalmente letra negrita y alineación centrada. Como ya sabemos, este formato se puede cambiar con las hojas de estilo. La etiqueta <th> se puede colocar tanto en las filas como en las columnas, por ejemplo:

<table>
 <tr>
  <th>Marcas</th>
  <th>Seat</th>
  <th>Ford</th>
  <th>BMW</th>
 </tr>
 <tr>
 <th>2016</th>
  <td>23900</td>
  <td>21500</td>
  <td>11500</td>
 </tr>
 <tr>
  <th>2017</th>
  <td>24600</td>
  <td>23500</td>
  <td>13400</td>
 </tr>
</table>

Produce este resultado:

Marcas	Seat	Ford	BMW
2016	23900	21500	11500
2017	24600	23500	13400

También se pueden utilizar las propiedades de formato en la propia tabla para colocar bordes, por ejemplo, para poner borde y color de fondo rojo, podemos escribir el siguiente código <table border="1" bgcolor="red">

Unir celdas con colspan y rowspan

Con los atributos colspan y rowspan podemos unir o fusionar celdas adyacentes, así obtendremos celdas de mayor tamaño, el resultado siempre será un rectángulo. 

 El atributo colspan extiende la celda tantas celdas a la derecha como le indiquemos, contando la celda actual. Por ejemplo colspan="2" ocupa su celda y una más a la derecha. Veamos este código aplicado a una tabla:

<table border="1">
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="2">Celda cs2</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="3">Celda cs3</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="4">Celda cs4</td>
 </tr>
</table>

Produce este resultado:

Celda	Celda	Celda	Celda
Celda cs2		Celda	Celda
Celda cs3			Celda
Celda cs4

Observa que al expandir la celda, en la fila ponemos menos etiquetas <td>.

 El atributo rowspan expande la celda tantas celdas hacia abajo como le indiquemos, contando la celda actual.

<table border="1">
 <tr>
  <td>Celda</td>
  <td rowspan="2">Celda rs2</td>
  <td rowspan="3">Celda rs3</td>
  <td rowspan="4">Celda rs3</td>
 </tr>
 <tr>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
</table>

Celda	Celda rs2	Celda rs3	Celda rs3
Celda
Celda	Celda
Celda	Celda	Celda

Observa que al aplicar rowspan a una celda, "cogemos" una celda de la siguiente fila, por lo que la siguiente celda tendrá una celda menos.

Y en cualquier caso podemos combinar estos dos atributos en la misma celda:

<table border="1">
 <tr>
  <td colspan="2" rowspan="2">Celda cs2 rs2</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
</table>

Produce este resultado

Celda cs2 rs2		Celda
		Celda
Celda	Celda	Celda

ACTIVIDADES

1. Realiza los ejercicios planteados en esta entrada de blog.

2. Elabora una página web cuyo título sea , CUADRO DE HONOR y que contenga una tabla con bordes con la siguiente información, utiliza las etiquetas colspan y rowspan, envía el desarrollo de tu trabajo al correo habitual hasta el día 8 de Octubre de 2021.