Tablas
Componentes
Tablas
Al utilizar el componente tabla:
- Permitirá que la información sea más fácil de comparar y escanear para los usuarios.
- Los usuarios podrán comparar información entre filas y columnas.
Buenas prácticas
- Encabezados de tabla
Utilice los encabezados de tabla para indicar a los usuarios qué representan las filas y columnas. - Números en una tabla
Al comparar columnas de números, alinee los números a la derecha en las celdas de la tabla. - Tablas con exceso de datos
Si es posible, intente tener menos datos en sus tablas. De lo contrario, se sugiere organizarlos en varias tablas o páginas.
Tabla simple
uft-table
<table class="uft-table" style="max-width: 720px; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th colspan="3">Diplomado programación</th>
</tr>
<tr>
<td>N° de curso</td>
<td>Nombre del curso</td>
<td>Horas totales</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Docente Finis Terrae</td>
<td>40</td>
</tr>
<tr>
<td>2</td>
<td>Diseño y planificación de cursos</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>Evaluación y retroalimentación de aprendizajes</td>
<td>49</td>
</tr>
<tr>
<td>4</td>
<td>Metodologías de enseñanza – aprendizaje</td>
<td>63</td>
</tr>
</tbody>
</table>
<table class="uft-table" style="max-width: 720px; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th colspan="2">Durante el año se realizan tres convocatorias</th>
</tr>
</thead>
<tbody>
<tr>
<th class="w-30 text-center">Convocatoria 1</th>
<td>Invita a postular para la implementación de proyectos durante el semestre enero - julio.</td>
</tr>
<tr>
<th class="w-30 text-center">Convocatoria 2</th>
<td>Invita a postular para la implementación de proyectos durante el semestre agosto-diciembre.</td>
</tr>
<tr>
<th class="w-30 text-center">Convocatoria 3</th>
<td>Invita a postular para la implementación de proyectos en los meses de junio y julio, para los cursos de verano e invierno de los hemisferios norte y sur respectivamente.</td>
</tr>
</tbody>
</table> Tabla con paginación
uft-table uft-table-pagination
<table class="uft-table uft-table-pagination" id="table-pagination-1" data-lang="es">
<thead>
<tr>
<th>Carrera</th>
<th>Universidad</th>
<th>País</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Actuación</td>
<td>Universidad de Palermo</td>
<td>Argentina</td>
<td>Buenos Aires</td>
</tr>
<tr>
<td>Actuación</td>
<td>Pontifícia Universidade Católica do Paraná</td>
<td>Brasil</td>
<td>Curitiba</td>
</tr>
<tr>
<td>Actuación</td>
<td>Universidade do Sagrado Coraçao</td>
<td>Brasil</td>
<td>Bauru</td>
</tr>
<tr>
<td>Actuación</td>
<td>Universidade Estadual de Campinas</td>
<td>Brasil</td>
<td>Campinas</td>
</tr>
<tr>
<td>Actuación</td>
<td>Universidade Federal de Minas Gerais</td>
<td>Brasil</td>
<td>Belo Horizonte</td>
</tr>
<tr>
<td>Actuación</td>
<td>South-West University "Neofit Rilski"</td>
<td>Bulgaria</td>
<td>Blagoevgrad</td>
</tr>
<tr>
<td>Actuación</td>
<td>Universidad del Atlantico</td>
<td>Colombia</td>
<td>Barranquilla</td>
</tr>
<tr>
<td>Actuación</td>
<td>Universidad del Valle</td>
<td>Colombia</td>
<td>Cali</td>
</tr>
<tr>
<td>Actuación</td>
<td>Universidad El Bosque</td>
<td>Colombia</td>
<td>Bogotá</td>
</tr>
<tr>
<td>Actuación</td>
<td>Chung-Ang University</td>
<td>Corea</td>
<td>Seul</td>
</tr>
<tr>
<td>Actuación</td>
<td>Dankook University</td>
<td>Corea</td>
<td>Jukjeon</td>
</tr>
<tr>
<td>Actuación</td>
<td>Kookmin University</td>
<td>Corea</td>
<td>Seul</td>
</tr>
<tr>
<td>Actuación</td>
<td>Escuela Universitaria de Artes y Espectáculos</td>
<td>España</td>
<td>Madrid</td>
</tr>
<tr>
<td>Actuación</td>
<td>Universidad Antonio de Nebrija</td>
<td>España</td>
<td>Madrid</td>
</tr>
<tr>
<td>Actuación</td>
<td>Millikin University</td>
<td>Estados Unidos</td>
<td>Decatur</td>
</tr>
<tr>
<td>Actuación</td>
<td>University of New México</td>
<td>Estados Unidos</td>
<td>Albuquerque</td>
</tr>
<tr>
<td>Actuación</td>
<td>Sharda University</td>
<td>India</td>
<td>Delhi</td>
</tr>
<tr>
<td>Actuación</td>
<td>Università IUAV di Venezia</td>
<td>Italia</td>
<td>Venezia</td>
</tr>
<tr>
<td>Actuación</td>
<td>Universidad Anáhuac México</td>
<td>México</td>
<td>Ciudad de México</td>
</tr>
<tr>
<td>Actuación</td>
<td>Universidad Nacional Autónoma de México</td>
<td>México</td>
<td>Ciudad de México</td>
</tr>
</tbody>
</table>