HTML
Tutorial HTML: Tablas (table, tr, td, th)
HTML tablas: creación y uso. Aprende a crear y usar tablas en HTML con ejemplos prácticos y detallados.
Aprende HTML GRATIS y certifícateDentro de las múltiples etiquetas que componen HTML, existen algunas que son específicas para la creación de tablas. Estas incluyen principalmente: <table>
, <tr>
, <td>
, y <th>
. A continuación, se explica cada una de estas etiquetas en detalle:
<table>
: Esta es la etiqueta que se utiliza para crear una tabla en HTML. Todo el contenido de la tabla se encuentra entre las etiquetas de apertura<table>
y cierre</table>
.<tr>
: Esta etiqueta se usa para definir una fila en la tabla. Cada fila de la tabla se marca con la etiqueta de apertura<tr>
y la etiqueta de cierre</tr>
.<td>
: Dentro de cada fila, se pueden definir las celdas de la tabla utilizando la etiqueta<td>
.td
viene de "table data". Cada celda se encierra entre la etiqueta de apertura<td>
y la etiqueta de cierre</td>
.<th>
: Esta etiqueta es similar a<td>
, pero se utiliza para definir las celdas de encabezado en la tabla.th
viene de "table header". Las celdas de encabezado a menudo se utilizan para describir la naturaleza del contenido en las columnas debajo de ellas.
Aquí hay un ejemplo básico de una tabla en HTML:
<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>Juan</td>
<td>Pérez</td>
</tr>
<tr>
<td>Maria</td>
<td>González</td>
</tr>
</table>
En este ejemplo, hay una tabla con dos columnas: "Nombre" y "Apellido". La primera fila usa la etiqueta <th>
para marcar los encabezados de las columnas. Luego, hay dos filas adicionales que utilizan la etiqueta <td>
para indicar los datos en cada columna. La primera fila de datos es "Juan" y "Pérez", y la segunda fila de datos es "Maria" y "González".
Cabe mencionar que las tablas en HTML también pueden tener varias secciones como <thead>
, <tbody>
, y <tfoot>
que representan el encabezado de la tabla, el cuerpo de la tabla y el pie de la tabla respectivamente. Sin embargo, estas secciones no son obligatorias y dependen de las necesidades específicas de la tabla. Por ejemplo, si se desea una tabla con encabezado y pie de tabla, se podría hacer de la siguiente manera:
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Pérez</td>
</tr>
<tr>
<td>Maria</td>
<td>González</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total de personas: 2</td>
</tr>
</tfoot>
</table>
En este ejemplo, la tabla está dividida en tres partes: <thead>
, <tbody>
, y <tfoot>
. <thead>
contiene los encabezados de las columnas, <tbody>
contiene las filas de datos y <tfoot>
contiene el pie de la tabla, en este caso, un conteo de las personas en la tabla. La propiedad colspan
que se usa en el <td>
dentro de <tfoot>
indica que esa celda debe abarcar dos columnas.
Recuerde siempre que las tablas en HTML deben usarse para datos tabulares, y no para estructurar el diseño de la página. Para ello, es preferible usar CSS.
Ejercicios de esta lección Tablas (table, tr, td, th)
Evalúa tus conocimientos de esta lección Tablas (table, tr, td, th) con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de HTML
Accede a todas las lecciones de HTML y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Html
Introducción Y Entorno
Doctype
Sintaxis Y Estructura
Elementos Y Etiquetas
Sintaxis Y Estructura
Atributos
Sintaxis Y Estructura
Anidación De Etiquetas
Sintaxis Y Estructura
Comentarios
Sintaxis Y Estructura
Encabezados (H1-h6)
Textos Y Enlaces
Enlace (A)
Textos Y Enlaces
Párrafo (P)
Textos Y Enlaces
Listas (Ul, Ol, Li)
Textos Y Enlaces
Imagen (Img)
Textos Y Enlaces
División (Div)
Estructura De Página
Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)
Estructura De Página
Tablas (Table, Tr, Td, Th)
Estructura De Página
Formularios (Form, Input, Select, Textarea, Button)
Estructura De Página
Imágenes Vectoriales (Svg)
Elementos Multimedia
Incrustación De Contenido (Iframe)
Elementos Multimedia
Audio (Audio)
Elementos Multimedia
Video (Video)
Elementos Multimedia
Estilo Incorporado (Style)
Metadatos Y Estilización Incorporada
Metadatos (Meta, Title, Link)
Metadatos Y Estilización Incorporada
Atributos De Aria
Metadatos Y Estilización Incorporada
Navegación Por Teclado
Metadatos Y Estilización Incorporada
Contraste Y Legibilidad
Características Avanzadas Y Optimización
Validación De Html
Características Avanzadas Y Optimización
Compatibilidad Con Navegadores
Características Avanzadas Y Optimización
Optimización De La Carga De La Página (Lazy Loading)
Características Avanzadas Y Optimización
Certificados de superación de HTML
Supera todos los ejercicios de programación del curso de HTML y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Aprender a crear tablas en HTML utilizando las etiquetas
<table>
,<tr>
,<td>
, y<th>
. - Comprender la diferencia entre las celdas de encabezado y las celdas de datos en una tabla.
- Conocer cómo estructurar una tabla con secciones opcionales como
<thead>
,<tbody>
, y<tfoot>
. - Aprender a utilizar la propiedad
colspan
para fusionar celdas en una tabla. - Familiarizarse con las buenas prácticas de uso de tablas en HTML y su propósito principal para presentar datos tabulares.