Introducción a XHTML

15.13. Ejercicio 13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo de tabla compleja</title>
</head>

<body>

<h3>Comparativa de reproductores MP3</h3>

<table summary="Tabla comparativa de las características técnicas de los reproductores MP3">
  <caption>Tabla comparativa de las características técnicas de los reproductores MP3</caption>
  <tr>
    <th></th>
    <th abbr="Reproductor mini" scope="col" colspan="3">
      <img src="imagenes/mp3_pequeno_blanco.png" alt="Imagen del reproductor MP3 pequeño de color blanco" />
      <img src="imagenes/mp3_pequeno_negro.png" alt="Imagen del reproductor MP3 pequeño de color negro" />
      <br/><strong>MP3 mini</strong>
    </th>
    <th abbr="Reproductor estándar" scope="col" colspan="2">
      <img src="imagenes/mp3_grande_blanco.png" alt="Imagen del reproductor MP3 grande de color blanco" />
      <img src="imagenes/mp3_grande_negro.png" alt="Imagen del reproductor MP3 grande de color negro" />
      <br/><strong>MP3 grande</strong>
    </th>
  </tr>

  <tr>
    <th scope="row" abbr="Capacidad">Capacidad de almacenamiento</th>
      <td>4GB <br/> (1.000 canciones)</td>
      <td>8GB <br/> (2.000 canciones)</td>
      <td>16GB <br/> (4.000 canciones)</td>
      <td>30GB <br/> (7.500 canciones)</td>
      <td>80GB <br/> (20.000 canciones)</td>
    </tr>

  <tr>
    <th scope="row" abbr="Colores disponibles">Colores</th>
    <td>
      <img src="imagenes/color_blanco.png" alt="Color blanco" />
    </td>
    <td>
      <img src="imagenes/color_negro.png" alt="Color blanco" />
      <img src="imagenes/color_verde.png" alt="Color verde" />
      <img src="imagenes/color_azul.png" alt="Color azul" />
      <img src="imagenes/color_rosa.png" alt="Color rosa" />
    </td>
    <td>
      <img src="imagenes/color_negro.png" alt="Color negro" />
    </td>
    <td colspan="2">
      <img src="imagenes/color_blanco.png" alt="Color blanco" />
      <img src="imagenes/color_negro.png" alt="Color negro" />
    </td>
  </tr>

  <tr>
    <th scope="row" abbr="Tamaño de pantalla">Pantalla</th>
    <td colspan="3">LCD de 3 cm (diagonal) con retroiluminación</td>
    <td colspan="2">LCD de 6 cm (diagonal) con retroiluminación</td>
  </tr>

  <tr>
    <th rowspan="2" scope="row" abbr="Tiempo de carga">Tiempo de carga</th>
    <td rowspan="2" colspan="3">Unas 3 horas</td>
    <td colspan="2">Unas 4 horas</td>
  </tr>

  <tr>
    <td colspan="2">Unas 2 horas para alcanzar el 80% de la capacidad</td>
  </tr>
</table>

</body>

</html>

Descargar ZIP con la solución completa