: es la etiqueta qué representa a un grupo de celdas de una tabla. Es decir, las tablas en html están compuestas por un conjunto de filas, dónde: Cada fila contiene a un número de celdas. En pocas palabras, laetiqueta
se encuentra dentro de la etiqueta de fila
.
Para las celdas combinadas horizontalmente, tenemos el atributo colspan, este atributo nos permite combinar de uno a más celdas. Y para las celdas combinadas verticalmente, tenemos el atributo rowspan, este atributo nos permite combinar de uno o más celdas.
indice del tema
Ejemplos:
En este presente ejemplo tenemos una tabla con sus respectivos filas y columnas, en el cual haremos una visión una celda combinada horizontalmente, con las celdas de encabezado
, pie la tabla , sección de la cabecera y cuerpo de la tabla.
Tabla
Tabajo en ofina
Trabajo en casa
Estudios
lunes
martes
miercoles
jueves
4 horas
5 horas
3 horas
2 horas
leer
Tabajo en ofina
Trabajo en casa
Estudios
En este ejemplo haremos una tabla con celdas combinadas verticalmente, haremos uso del atributo rowspan, para todos aquellos que desean combinar celdas.
Tabla
Tabajo en ofina
Trabajo en casa
Estudios
bagar
lunes
martes
miercoles
jueves
6 horas
4 horas
5 horas
3 horas
2 horas
leer
Tabajo en ofina
Trabajo en casa
Estudios
bagar
EXPLICACIÓN DEL EJEMPLO:
En la sección de la cabecera , contiene una fila
el cual tiene la etiqueta de encabezado
, en lo cual aplicamos los atributos scope="col" colspan="2".
En el cuerpo de la tabla tenemos tres grupos de fila
:
En el cual el primer
contiene 3 celdas, el último
quién el atributo rowspan qué es igual a 3, el cual combina las tres celdas verticales.
La segunda fila de
4 celdas
.
El tercer fila
contiene una sola celda, qué tiene la etiqueta
el atributo colspan que es igual a 4, esto quiere decir, combina cuatro celdas horizontales.
En la sección de pie de la tabla , contiene filas al igual ala sección de cabecera.
NOTA: Para alinear textos o datos en una celda, ya sea a la izquierda, derecha o centrado daremos estilo a la etiqueta que lo contiene, el estilo es el siguiente: text-align: Center;
Deja una respuesta