martes, 27 de noviembre de 2018

Las tablas en HTML


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.
<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>

<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