August 22, 2024
Crear una Tabla en HTML
- HTML/CSS
Elementos
// Abierto desde el padre
321b7f4a836344e18d0e0d3736388348?p=9d08c56e36124d8bab8ef8c42afcda9f&pm=c
// Original
9d08c56e36124d8bab8ef8c42afcda9fElementos de una Tabla en HTML
<table>: Es el contenedor principal de la tabla. Todo el contenido de la tabla debe estar dentro de este elemento.
<thead>(Table Head): Agrupa el conjunto de filas del encabezado de la tabla.
<tbody>(Table Body): Agrupa el conjunto de filas del cuerpo de la tabla.
<tfoot>(Table Foot): Agrupa el conjunto de filas del pie de la tabla, que suele contener resúmenes o totales.
<tr>(Table Row): Define una fila en la tabla. Cada fila de la tabla se crea con un elemento<tr>.
<th>(Table Header): Define una celda de cabecera en una fila. Estas celdas suelen contener encabezados para las columnas y, por defecto, su texto aparece en negrita y centrado.
<td>(Table Data): Define una celda de datos en una fila. Estas celdas contienen los datos de la tabla.
Estructura Completa de una Tabla
Vamos a ver cómo se combinan estos elementos para crear una tabla completa.
Paso 1: Crear la Estructura de la Tabla
Primero, definimos la estructura básica de la tabla con el elemento <table>:
htmlCopiar código
<table>
</table>Paso 2: Agregar Secciones de la Tabla
Dentro de la tabla, agregamos las secciones usando <thead>, <tbody> y <tfoot>:
htmlCopiar código
<table>
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>Paso 3: Agregar Filas de Cabecera
Dentro de <thead>, agregamos filas de cabecera con el elemento <tr> y celdas de cabecera con <th>:
htmlCopiar código
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>Paso 4: Agregar Filas de Datos
Dentro de <tbody>, agregamos filas de datos con el elemento <tr> y celdas de datos con <td>:
htmlCopiar código
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>Paso 5: Agregar Filas de Pie de Tabla
Dentro de <tfoot>, agregamos filas de pie de tabla con el elemento <tr> y celdas de datos o cabecera con <td> o <th> según corresponda:
htmlCopiar código
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
</table>Ejemplo Completo
Aquí tienes un ejemplo completo de una tabla simple en HTML con todas las secciones:
htmlCopiar código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tfoot td {
font-weight: bold;
}
</style>
</head>
<body>
<h2>Example of an HTML Table</h2>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
</table>
</body>
</html>Explicación del Ejemplo
- Cabecera de la Tabla:
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>Esta sección contiene una fila con tres celdas de cabecera (<th>), que actúan como encabezados de las columnas.
- Cuerpo de la Tabla:
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>Esta sección contiene dos filas de datos, cada una con tres celdas de datos (<td>).
- Pie de la Tabla:
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>Esta sección contiene una fila con tres celdas, que pueden usarse para totales o resúmenes.
- Estilos CSS:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tfoot td {
font-weight: bold;
}
</style>Estos estilos hacen que la tabla ocupe el 100% del ancho disponible, colapsan los bordes, agregan padding y borde a las celdas, establecen un color de fondo para las celdas de cabecera y hacen que el texto en el pie de la tabla sea en negrita.
Written by Pol Valle
I'm particularly drawn to building apps that are not only functional but also visually appealing and easy to use. I do it by applying SOLID principles, clean architecture and testing to ensure quality.