Tablas
Desde el Sisdai enfatizamos el uso del HTML semántico para tablas, lo cual mejora su usabilidad y accesibilidad. Se proporciona estilo a las etiquetas nativas de tablas para que puedan utilizarse sin la necesidad de clases adicionales.
Tabla Base
Esta configuración es la predeterminada, ideal para mostrar datos de manera clara y estructurada. Se debe proporcionar un título conciso con información acerca de la tabla para contextualizar los datos presentados.
| Encabezado A | Encabezado B | Encabezado C |
|---|---|---|
| Celda 1 | Celda 2 | Celda 3 |
| Celda 4 | Celda 5 | Celda 6 |
| Celda 7 | Celda 8 | Celda 9 |
| pie 1 | pie 2 | pie 3 |
HTML
<table>
<caption>Título de la tabla de ejemplo</caption>
<thead>
<tr>
<th>Encabezado A</th>
<th>Encabezado B</th>
<th>Encabezado C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>pie 1</td>
<td>pie 2</td>
<td>pie 3</td>
</tr>
</tfoot>
</table>
Variaciones de tamaño
Tabla Condensada
Este estilo se recomienda para mostrar una gran cantidad de datos en un espacio reducido. Puedes optar por la tabla condensada cuando la eficiencia espacial es prioritaria y cada celda contiene información breve.
| Encabezado A | Encabezado B | Encabezado C |
|---|---|---|
| Celda 1 | Celda 2 | Celda 3 |
| Celda 4 | Celda 5 | Celda 6 |
| Celda 7 | Celda 8 | Celda 9 |
HTML
<table class="tabla-condensada">
<caption>Tabla condensada</caption>
<thead>
<tr>
<th>Encabezado A</th>
<th>Encabezado B</th>
<th>Encabezado C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</tbody>
</table>
Tabla Expandida
Utiliza este estilo cuando los datos en las celdas requieren más de dos líneas de contenido. La tabla expandida ofrece más espacio por celda, lo cual es ideal para datos detallados o explicaciones extensas.
| Encabezado A | Encabezado B | Encabezado C |
|---|---|---|
|
Celda 1 Segunda línea |
Celda 2 Segunda línea |
Celda 3 Segunda línea |
|
Celda 4 Segunda línea |
Celda 5 Segunda línea |
Celda 6 Segunda línea |
|
Celda 7 Segunda línea |
Celda 8 Segunda línea |
Celda 9 Segunda línea |
HTML
<table class="tabla-expandida">
<caption>Tabla expandida</caption>
<thead>
<tr>
<th>Encabezado A</th>
<th>Encabezado B</th>
<th>Encabezado C</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Celda 1<br />
Segunda línea
</td>
<td>
Celda 2<br />
Segunda línea
</td>
<td>
Celda 3<br />
Segunda línea
</td>
</tr>
<tr>
<td>
Celda 4<br />
Segunda línea
</td>
<td>
Celda 5<br />
Segunda línea
</td>
<td>
Celda 6<br />
Segunda línea
</td>
</tr>
<tr>
<td>
Celda 7<br />
Segunda línea
</td>
<td>
Celda 8<br />
Segunda línea
</td>
<td>
Celda 9<br />
Segunda línea
</td>
</tr>
</tbody>
</table>
Complementos
Titulo para tablas
La etiqueta caption que se utiliza para agregar títulos a las tablas, basa su estilo en a la declaracion del h6. Además se agregó la clase .titulo-tabla por si se necesitara utilizar el estilo fuera de la etiqueta.
Clase titulo-tabla
| Encabezado A | Encabezado B | Encabezado C |
|---|---|---|
| Celda 1 | Celda 2 | Celda 3 |
| Celda 4 | Celda 5 | Celda 6 |
HTML
<p class="titulo-tabla">Clase titulo-tabla</p>
<table>
<caption>Etiqueta nativa para títulos de tablas</caption>
<thead>
<tr>
<th>Encabezado A</th>
<th>Encabezado B</th>
<th>Encabezado C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</tbody>
</table>
Contenedor de tablas
La clase .contenedor-tabla se utiliza cuando el contenido de una tabla se sabe muy extenso en cuanto a cantidad de columnas, para agregar un scroll horizontal cuando la pantalla no es suficiente para mostrar toda la información.
| Encabezado A | Encabezado B | Encabezado C | Encabezado D | Encabezado E | Encabezado F | Encabezado G | Encabezado H | Encabezado I | Encabezado J | Encabezado K | Encabezado L |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Celda 1 | Celda 2 | Celda 3 | Celda 4 | Celda 5 | Celda 6 | Celda 7 | Celda 8 | Celda 9 | Celda 10 | Celda 11 | Celda 12 |
HTML
<div class="contenedor-tabla">
<table>
<caption>Tabla con contenedor horizontal</caption>
<thead>
<tr>
<th>Encabezado A</th>
<th>Encabezado B</th>
<th>Encabezado C</th>
<th>Encabezado D</th>
<th>Encabezado E</th>
<th>Encabezado F</th>
<th>Encabezado G</th>
<th>Encabezado H</th>
<th>Encabezado I</th>
<th>Encabezado J</th>
<th>Encabezado K</th>
<th>Encabezado L</th>
</tr>
</thead>
<tbody>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
<td>Celda 10</td>
<td>Celda 11</td>
<td>Celda 12</td>
</tr>
</tbody>
</table>
</div>