Tablas

En HTML cada tabla está asociado a un elemento table, dentro de este elemento se indican las filas mediante el elemento tr y dentro de cada fila se indican las celdas mediante elementos td.

En HTML 5 las etiquetas table y tr no tienen atributos, aunque hay atributos, como por ejemplo el atributo border, que reconocen los navegadores por estar presentes en versiones anteriores de HTML. Es, como siempre, el lenguaje CSS el que determina la apariencia y formato de la tabla.

Ejemplo:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Imágenes</title>
  </head>
  <body>
    <table>
        <tr>
            <td></td>
            <td>Lunes</td>
            <td>Martes</td>
            <td>Miércoles</td>
            <td>Jueves</td>
            <td>Viernes</td>
        </tr>
        <tr>
            <td>10:30</td>
            <td>Matemáticas</td>
            <td>Geografía</td>
            <td>Física</td>
            <td>Dibujo</td>
            <td>Matemáticas</td>
        </tr>

        <tr>
            <td>11:30</td>
            <td>Inglés</td>
            <td>Lenguaje</td>
            <td>Geografía</td>
            <td>Química</td>
            <td>Física</td>
        </tr>
    </table>
  </body>
</html>

Y quedaría:

html5

Etiquetas semánticas de tablas

Para que los motores de búsqueda entiendan mejor el contenido dentro de una tabla disponemos de las etiquetas

Ejercicio 1

Dado el siguiente documento html se desea conseguir el resultado de la imagen adjunta.

<!DOCTYPE html>
<html>
<head>
	<title>Ejercicio tablas html</title>
	<meta charset="utf-8"/>
	<meta name="author" content="francesc ricart"/>
	<style>
		table{
			border-collapse:collapse;
			caption-side: bottom;
		}
		caption{
			font-weight:bold;
			margin-top:16px;
		}
		th,td{padding:5px 10px;}
		td,th{border:1px solid #1c1c1c;text-align:center;}

	</style>
</head>
<body>

<!-- puedes copiar y pegar todo el código en sublime o brackets para resolver el ejercicio -->

</body>
</html>

html5

Fijaros que el enunciado adjunto un poco de código css para que el resultado sea el de la imagen.

Compruebe la solución