Si quieres saber mas sobre tablas y sus atributos, propiedades y entre otros, diríjase a tablas en html.
La etiqueta <table> es el tag que representa a una tabla en HTML, este tag nos permite a tabular u organizar nuestra información o datos de una forma ordenada a través de celdas, con encabezados, columnas y filas.
Un etiqueta <table> es como un contenedor que contiene a otras etiquetas y elementos, donde otros etiquetas las cuales nos ayudan a mejorar nuestro tabla como darle el numero de filas, numero de columnas, bordes, cabeceras y entre otros mas. Las etiquetas son:
| Nombre | Función |
| <tbody> | Define el cuerpo de la tabla |
| <thead> | Define la sección de encabezado de la tabla |
| <tfoot> | Define la sección de la tabla. |
| <tr> | Define una fila, puede tener como hijo de <tbody>, <thead>, <tfoot> o <table>. |
| <td> | Define columna, solo puede tener como hijo a <tr>. |
| <th> | Define una celda de cabecera . |
| <caption> | Define el titulo para la tabla. |
Cuando las tablas se vuelven mas complejas con celdas combinas, ya sea que requiere tener un encabezado dos columnas o dos filas, es hora de utilizar colspan en el <th>, para mayor información ir a tablas en HTML.
En este ejemplo de la etiqueta table en HTML, crearemos una tabla en lo que utilizaremos los siguientes tag, <th> cabecera, <tr> filas, <td> columnas, <table> tabla, entre otros y ademas utilizaremos algunos atributos con los cuales le dare mas funcionalidades.
<!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;
}
</style>
<body>
<table style="width: 100%; background-color: aqua">
<tr>
<th scope="col" colspan="2">Tabajo en ofina</th>
<th scope="col">Trabajo en casa</th>
<th scope="col">Estudios</th>
</tr>
<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>
</table>
</body>
</html>
Es la combinación de celdas horizontales, el atributo colspan nos permite combinar uno a mas celdas, es decir nos permite combinar filas.
Es la combinación de celdas verticales, este atributo rowspan nos permite combinar uno a mas celdas, es decir nos permite combinar columnas.
En el siguiente ejemplo aremos una mejora a nuestra tabla, para ello aremos util a las etiquetas <tfoot>, <thead>, <tbody>, <tcaption>. y atributos colspan y rowspan.
<!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> ¿Qué es un online HTML compiler? En el desarrollo de software actual, el término online…
¿Qué es el Formato HTML? El formato HTML es un estándar digital de estructuración de…
En el ecosistema del desarrollo web y la ingeniería de software para internet, el lenguaje…
¿Qué es un HTML Editable? En el desarrollo web tradicional, la mayoría de los elementos…
En la jerga del desarrollo web y la búsqueda habitual de herramientas en internet, el…
En el desarrollo web moderno, comprender la teoría del lenguaje de marcado resulta mucho más…
