CÁPSULA – TALLER TIC NIVEL 3
EL rol del profesor en una plataforma Moodle
El lenguaje HTML
16 de 18
0%

El lenguaje HTML

Creación de una tabla

Tabla <table> filas y columnas </table>

Fila de una tabla <tr> celdas </tr>

Celda de una tabla <td> texto </td>

Crear tablas es muy simple cuando se realiza utilizando el editor, pero muchas veces no logramos alinear algún elemento como lo queremos, combinar dos celdas o cambiar el tipo de línea del borde. Para estas acciones, es muy útil conocer los códigos para la creación de tablas en HTML.

Los elementos básicos que conforman una tabla son:

  • Table para marcar el comienzo y final de la tabla:

<table> encabezados y cuerpo de tabla </table>

  • Tbody para marcar el comienzo y final del cuerpo (el contenido) de la tabla:

<tbody> filas y columnas </tbody>

  • Tr para marcar el comienzo y final de cada una de las filas:

<tr> celdas </tr>

  • Td para marcar el comienzo y final de cada una de las celdas:

<td> texto </td>

Copia el siguiente código para crear una tabla simple en el editor de páginas web de Moodle:

<table>

<tbody>

<tr>

<td>Cuadriláteros</td>

<td>triángulos</td>

</tr>

<tr>

<td>Rectángulo</td>
<td>Rectángulo</td>

</tr>

<tr>

<td>Rombo</td>
<td>Isósceles</td>

</tr>

<tr>

<td>Romboide</td>

<td>Equilátero</td>

</tr>

</tbody>

</table>

Comienzo de tabla

Comienzo del cuerpo de tabla

Comienzo de fila

Celda
Celda

Fin de fila

Comienzo de fila

Celda
Celda

Fin de fila

Comienzo de fila

Celda
Celda

Fin de fila

Comienzo de fila

Celda
Celda

Fin de fila

Fin de cuerpo de tabla
Fin de tabla

Vista de edición

Así se verá la página en el editor, una vez que desactivemos la vista Tabulación HTML

Podemos añadir un borde visible ( border ) y especificar la anchura de la tabla ( width ) mediante algunos parámetros en la etiqueta Table:

< table border="1" width="50%">

La tabla anterior se verá de esta manera:

Vista de la tabla

Por otra parte, muchas veces es necesario indicar que una celda tendrá la anchura de dos columnas:

<td colspan="2">

O que una celda tendrá la altura de dos filas:

<td rowspan="2">

<table border="1">

<tbody>

<tr>

<td rowspan="3">Figuras </td>

<td colspan="2">Cuadriláteros </td>

</tr>

<tr>

<td>Rectángulos </td>

<td>Paralelogramos </td>

</tr>

<tr>

<td>Dos pares de lados opuestos congruentes </td>

<td>Rectos </td>

</tr>

</tbody>

</table>

Comienzo de tabla

Contenido principal de la tabla

Comienzo de fila

Celda de 3 filas de altura

Celda de 2 columnas de anchura

Fin de fila

Comienzo de fila

Celda

Celda

Fin de fila

Comienzo de fila

Celda


Celda

Fin de fila

Fin contenido principal de la tabla

Fin de la tabla

Visualización de la página

Así se verá la página al guardar y visualizar.

Al realizar una tabla es conveniente marcar a través del código algunos elementos de apoyo:

  • Resumen de la tabla: se trata de una descripción que leerán los programas utilizados por personas invidentes, para decidir si se accederá o no al resto de la tabla.

<table summary=”Esta tabla muestra la clasificación de las figuras”>

  • Caption: Encabezado visible de la tabla. Se escribe fuera del cuerpo principal de la tabla.

<caption>Figuras</caption>

  • Encabezados de tabla (table heading): colaboran con la organización visual de la información y jerarquizan los contenidos de acuerdo al diseño de la plataforma, utilizando sus colores y tipos de letra. Se escriben dentro del cuerpo de la tabla.

<th>Figuras</th>

<table border="1" summary="Esta tabla contiene datos sobre la clasificación de algunas figuras geométricas">

<caption><em>Figuras geométricas</em></caption>

<tbody>

<tr>

<th rowspan="2">Figuras </th>

<th colspan="2">Cuadriláteros </th>

</tr>

<tr>

<th>Lados </th>

<th>Ángulos </th>

</tr>

<tr>

<th>Rectángulos </th>

<td>Dos pares de lados opuestos congruentes </td>

<td>Rectos </td>

</tr>

<tr>

<th>Paralelogramos </th>

<td>Dos pares de lados opuestos paralelos </td>

<td>Dos pares de ángulos opuestos congruentes</td>

</tr>

</tbody>

</table>

Comienzo de tabla con resumen para lectores de pantalla.


Título visible de la tabla

Comienzo del cuerpo de tabla

Comienzo de línea

Encabezado de tabla

Encabezado de tabla

Fin de línea

Comienzo de línea

Encabezado de tabla

Encabezado de tabla

Fin de línea

Comienzo de línea

Encabezado de tabla

Celda

Celda

Fin de línea

Comienzo de línea

Encabezado de tabla

Celda

Celda

Fin de línea

Fin de cuerpo de tabla

Fin de tabla

Visualización de la página

Así se verá la página, una vez que guardemos los cambios y visualicemos.

Ayuda

ayuda
  1. Menú izquierdo (en orden de arriba a abajo): icono página principal del curso (home), icono tamaño de la fuente, icono impresión del módulo, icono acceso a la ayuda e icono índice del contenido.
  2. Barra nombre del material y título de la sección actual.
  3. Flechas de navegación (página siguiente o anterior).
  4. Espacio para el contenido.

Autor:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paradigma

Conjunto cuyos elementos pueden aparecer alternativamente en algún contexto especificado.
Inicio
Disminuir tamaño de letra
Aumentar tamaño de letra
Ayuda
Anterior
Siguiente
Apartados
Debes visitar los apartados anteriores antes de visitar éste