La etiqueta <td>: 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, la etiqueta <td> se encuentra dentro de la etiqueta de fila <tr>.
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
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 <th> , pie la tabla <tfoot>, sección de la cabecera <thead> y <tbody> cuerpo de la tabla.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Tabla</title> </head> <style type="text/css"> table,tr,th ,td { border: 1px solid black; border-collapse: collapse; } table { color: black; } th{ text-align: left; } td{ text-align: center; } </style> <body> <table style="width: 100%; background-color: aqua"> <thead style="background-color: blue;"> <tr> <th scope="col" colspan="2">Tabajo en ofina</th> <th scope="col">Trabajo en casa</th> <th scope="col">Estudios</th> </tr> </thead> <tbody> <tr> <td>lunes</td> <td>martes</td> <td>miercoles</td> <td>jueves</td> </tr> <tr> <td>4 horas</td> <td>5 horas</td> <td>3 horas</td> <td>2 horas</td> </tr> <tr> <td colspan="4">leer</td> </tr> </tbody> <tfoot></tfoot> <tfoot style="background-color: blue"> <tr> <th scope="col" colspan="2">Tabajo en ofina</th> <th scope="col">Trabajo en casa</th> <th scope="col">Estudios</th> </tr> </tfoot> </table> </body> </html>
En este ejemplo haremos una tabla con celdas combinadas verticalmente, haremos uso del atributo rowspan, para todos aquellos que desean combinar celdas.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Tabla</title> </head> <style type="text/css"> table,tr,th ,td { border: 1px solid black; border-collapse: collapse; } table { color: black; } th{ text-align: left; } td{ text-align: center; } </style> <body> <table style="width: 100%; background-color: aqua"> <thead style="background-color: blue;"> <tr> <th scope="col" colspan="2">Tabajo en ofina</th> <th scope="col">Trabajo en casa</th> <th scope="col">Estudios</th> <th scope="col">bagar</th> </tr> </thead> <tbody> <tr> <td>lunes</td> <td>martes</td> <td>miercoles</td> <td>jueves</td> <td rowspan="3">6 horas</td> </tr> <tr> <td>4 horas</td> <td>5 horas</td> <td>3 horas</td> <td>2 horas</td> </tr> <tr> <td colspan="4">leer</td> </tr> </tbody> <tfoot></tfoot> <tfoot style="background-color: blue"> <tr> <th scope="col" colspan="2">Tabajo en ofina</th> <th scope="col">Trabajo en casa</th> <th scope="col">Estudios</th> <th scope="col">bagar</th> </tr> </tfoot> </table> </body> </html>
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;
para mayor información sobre tablas en html.
En el siguiente artículo les vamos a enseñar a descargar el driver brother hl 4150cdn de…
En el siguiente artículo les vamos a enseñar a descargar el driver brother dcp j125 de…
En el siguiente artículo les vamos a enseñar a descargar el driver brother hl 1210w de…
En el siguiente artículo les vamos a enseñar a descargar el driver brother mfc j480dw de…
En el siguiente artículo les vamos a enseñar a descargar el driver brother dcp j4120dw de…
En el siguiente artículo les vamos a enseñar a descargar el driver brother hl 5340d de…