Las tablas HTML están diseñadas para contener datos tabulados, como estos:

El código fuente de esta tabla se ve así:

<table>
  <tr><th colspan="2">Resumen de crecimiento web (*)</th></tr>
  <tr><th>Mes</th><th>Número de sitios web</th></tr>
  <tr><td>6/93</td><td>130</td></tr>
  <tr><td>12/93</td><td>623</td></tr>
  <tr><td>6/94</td><td>2,738</td></tr>
  <tr><td>12/94</td><td>10,022</td></tr>
  <tr><td>6/95</td><td>23,500</td></tr>
  <tr><td>1/96</td><td>100,000</td></tr>
  <tr><td>6/96</td><td>230,000 (est)</td></tr>
  <tr><td>1/97</td><td>650,000 (est)</td></tr>
</table>

Aquí están los elementos utilizados con las tablas:

Las tablas deben tener el mismo número de columnas en cada fila. Las columnas están implícitamente determinadas por el número de celdas de datos de tabla (o de cabeceras de datos de tabla) que haya en cada fila. Esto significa que necesita asegurarse de que en cada fila de su tabla haya el mismo número de elementos td o th.

Usando el atributo colspan="x" (donde x es el número de columnas abarcadas) dentro de td o th hace que ocupe el espacio de x columnas en la tabla. En el ejemplo de arriba 'Resumen de crecimiento web', la primera fila tenía un elemento simple de cabecera de tabla que abarcaba ambas columnas de la tabla.

Ejercicios:

1. Una vez más, copie minimal_page.html a un nuevo fichero llamado decbinocthex.html y establezca el título y una cabecera de primer nivel a Tabla I. Utilice lo que ha aprendido en esta lección para producir la siguiente tabla(**) dentro del nuevo documento:

   

   Ponga una cabecera de nivel 2 encima de la tabla etiquetada con Valores decimales, binarios, octales, y hexadecimales El código completo de decbinocthex.html debería verse como esto.

2. En un fichero llamado mitabla.html, cree otra tabla con sus propios datos. Si a usted le gustan los deportes, tal vez una tabla con una columna para nombres de equipos y columnas para victorias, derrotas y empates.

   Como es habitual, establezca un título y una cabecera de primer nivel con lo mismo. Esta vez llámela Tabla II. Ponga una cabecera de segundo nivel encima de su tabla con una descripción apropiada dentro de ella.