Las Tablas
en HTML (<table><tr><td>)
Clase anterior
Objetivo de la clase: Elaboran tablas dentro de una página web utilizando las etiquetas de HTML
El
objetivo fundamental de las tablas es mostrar una serie de datos en forma
ordenada, organizado en filas y columnas.
Para la creación de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre.
<tr> viene de table row que significa fila de la tabla. Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table.
Para la creación de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre.
<tr> viene de table row que significa fila de la tabla. Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table.
<td>
viene de table data que significa dato de la tabla. Es la marca de
comienzo de una celda. Esta marca debe estar dentro del elemento tr.
Tabla con encabezado (<th>) (clase Nueva)
La primera fila de una tabla puede representar los títulos para cada columna. Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td>
Tabla con encabezado (<th>) (clase Nueva)
La primera fila de una tabla puede representar los títulos para cada columna. Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td>
<tr>
<th>Cursos</th><th>Cantidad de estudiantes</th>
</tr>
Combinar celdas en las tablas
Cuando desee que dos o más celdas ocupen una celda en forma horizontal o vertical, para estos casos el elemento td o th dispone de dos propiedades llamadas rowspan y colspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad colspan con el valor 3:
<td colspan="3">Asistencias de los estudiantes de los últimos tres meses</td>
Si por el contrario queremos que una celda se extienda a nivel de filas
luego hacemos: <td rowspan="3">Secciones</td>
Veamos un ejemplo empleando el concepto de combinación de celdas:
Se verá así
No hay comentarios:
Publicar un comentario