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
Globales
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> Título columna izquierda</th>
<th> 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
Añadir título
Usa la etiqueta caption
dentro de table
.
<table>
<caption> Mi tabla</caption>
<thead>
<tr>
<th> Título columna izquierda</th>
<th> Título columna derecha</th>
</tr>
</thead>
<tbody>
<tr>
<td> Contenido izquierdo</td>
<td> Contenido derecho</td>
</tr>
</tbody>
</table>
Mi tabla
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> Título columna izquierda</th>
<th> Título columna derecha</th>
</tr>
</thead>
<tbody>
<tr>
<td> Contenido izquierdo</td>
<td> Contenido derecho</td>
</tr>
</tbody>
<tfoot>
<tr>
<th> Título columna izquierda</th>
<th> 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
6-1
6-2
6-3
¿Te ha gustado?
{{ comments.length }} comentarios