Listado completo de tutoriales

Temario del Tutorial->20 - Tabla con encabezado (<th>)


La primer característica que le vamos a agregar a una tabla son las celdas de encabezado. Normalmente la primer fila de una tabla puede representar los títulos para cada columna.

Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td>

El navegador representa distinto las celdas de datos y las celdas de encabezamiento.

Confeccionemos el mismo problema del concepto anterior pero agregando un título a cada columna de la tabla mediante celdas de encabezamiento:

<!DOCTYPE html>
<html>
<head>
  <title>Título de la página</title>
  <meta charset="UTF-8">
</head>
<body>
<table border="1">
  <tr>
    <th>Paises</th><th>Cantidad de habitantes</th>
  </tr>
  <tr>
    <td>China</td><td>1300 millones</td>
  </tr>
  <tr>
    <td>India</td><td>1080 millones</td>
  </tr>
  <tr>
    <td>Estados Unidos</td><td>295 millones</td>
  </tr>
</table>
</body>
</html>

El resultado en el navegador es:

tablas con encabezado th

Si observamos el código de la página para indicar que se trata de una celda de tipo encabezado utilizamos el elemento th:

<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>

El elemento th debe estar contenido entre las marcas <tr> y </tr>, es decir pertenecen a una fila.

Para recordar el nombre de este nuevo elemento HTML:

<th> viene de table header cell que significa celda de encabezado de tabla.

Retornar