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>
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 |
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Te ayudo?
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios