Lección 6: Tablas
En algunas secciones necesitaremos mostrar información estructurada y ordenada: una tabla. Poden incluir a cada una su propio título, un título por columna y, claro, su información. La única limitación que nos encontraremos es que todas las filas deben estar formadas del mismo número de columnas.
Entre las etiquetas que haremos uso:
| Etiqueta | <table> |
| Descripción | Contenedor de la tabla. |
| Atributos | Globales |
| Tipo | Bloque |
| Etiqueta | <caption> |
| Descripción | Título de la tabla. |
| Atributos | Globales |
| Etiqueta | <tr> |
| Descripción | Definición de filas. |
| Atributos | Globales |
| Etiqueta | <td> |
| Descripción | Celda. |
| Atributos | Globales |
| Etiqueta | <th> |
| Descripción | Título de celda o columna. |
| Atributos | scope: Indica la dirección de la información row (fila) o col (columna). |
| Etiqueta | <thead> |
| Descripción | Contenedor de cabecera. |
| Atributos | Globales |
| Etiqueta | <tbody> |
| Descripción | Contenedor de datos. |
| Atributos | Globales |
| Etiqueta | <tfoot> |
| Descripción | Contenedor de pie. |
| Atributos | Globales |
Simple
<table>
<thead>
<tr>
<th scope="col">Título columna izquierda</th>
<th scope="col">Título columna derecha</th>
</tr>
</thead>
<tbody>
<tr>
<td>Contenido izquierdo</td>
<td>Contenido derecho</td>
</tr>
</tbody>
</table>
| Título columna izquierda | Título columna derecha |
|---|---|
| Contenido izquierdo | Contenido derecho |
Por razones de accesibilidad, y el correcto funcionamiento de los lectores de pantalla, las tablas deben llevar siempre celdas de encabezado indicando la dirección (scope="row" y scope="col").
Añadir título
Usa la etiqueta caption dentro de table.
<table>
<caption>Mi tabla</caption>
<thead>
<tr>
<th scope="col">Título columna izquierda</th>
<th scope="col">Título columna derecha</th>
</tr>
</thead>
<tbody>
<tr>
<td>Contenido izquierdo</td>
<td>Contenido derecho</td>
</tr>
</tbody>
</table>
| Título columna izquierda | Título columna derecha |
|---|---|
| Contenido izquierdo | Contenido derecho |
Pie
Usa la etiqueta tfoot al final de table.
<table>
<thead>
<tr>
<th scope="col">Título columna izquierda</th>
<th scope="col">Título columna derecha</th>
</tr>
</thead>
<tbody>
<tr>
<td>Contenido izquierdo</td>
<td>Contenido derecho</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col">Título columna izquierda</th>
<th scope="col">Título columna derecha</th>
</tr>
</tfoot>
</table>
| Título columna izquierda | Título columna derecha |
|---|---|
| Contenido izquierdo | Contenido derecho |
| Título columna izquierda | Título columna derecha |
Actividad 1
Realiza la siguiente página web.
Actividad 2
Crea una tabla con la información de tus peores enemigos o personas que no te gusten.
Contará con un título, caption, y las siguientes columnas.
- Nombre
- Apellidos
- Edad
- Género
- ¿Por qué es mi enemigo?
Actividad 3
Con todo lo aprendido hasta ahora, crea tu Curriculum Vitae. Como mínimo debe de mostrar.
- Imagen.
- Datos básicos.
- Experiencia.
- Habilidades.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.
- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios