Conceptos básicos de tablas
Parte de la sección Fundamentals del Journey de HTML de Coddy — lección 48 de 60.
En HTML, una tabla es una forma de organizar datos en filas y columnas. Las tablas se utilizan comúnmente para mostrar datos en un formato estructurado, como horarios, estadísticas o cualquier otro tipo de información que pueda presentarse en una cuadrícula. Para crear una tabla, se utiliza la etiqueta <table> junto con otras etiquetas como <tr> para las filas de la tabla, <td> para los datos de la tabla (celdas) y <th> para los encabezados de la tabla.
Aquí está la estructura básica de una tabla HTML:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table><table>: La etiqueta que define la tabla.
<tr>: La etiqueta que define una fila de tabla.
<th>: La etiqueta que define una celda de encabezado. Las celdas de encabezado se utilizan normalmente para los títulos de columnas o filas y se muestran en negrita de forma predeterminada.
<td>: La etiqueta que define una celda estándar en la tabla.
Así es como se vería esta tabla en un navegador:
| Encabezado 1 | Encabezado 2 |
|---|---|
| Fila 1, Celda 1 | Fila 1, Celda 2 |
| Fila 2, Celda 1 | Fila 2, Celda 2 |
En este ejemplo, tenemos una tabla con dos filas y dos columnas. La primera fila contiene celdas de encabezado y las filas siguientes contienen celdas de datos normales. Esta estructura crea un diseño de cuadrícula simple que es fácil de leer y entender.
Desafío
FácilCrea un documento HTML que incluya una tabla con la siguiente estructura:
- Una etiqueta
<table>para definir la tabla. - Una fila de tabla (
<tr>) para el encabezado con dos celdas de encabezado (<th>). La primera celda de encabezado debe decir "Name" y la segunda debe decir "Age". - Una fila de tabla (
<tr>) con dos celdas de datos (<td>). La primera celda debe decir "John" y la segunda debe decir "30". - Otra fila de tabla (
<tr>) con dos celdas de datos (<td>). La primera celda debe decir "Jane" y la segunda debe decir "25".
Hoja de referencia
Las tablas HTML organizan los datos en filas y columnas utilizando la etiqueta <table>:
<table>: Define la tabla<tr>: Define una fila de la tabla<th>: Define una celda de encabezado (se muestra en negrita por defecto)<td>: Define una celda de datos estándar
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>Pruébalo tú mismo
<!DOCTYPE html>
<html>
<body>
<!-- Escribe el código aquí -->
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentals
1Fundamentos de HTML
¿Qué es HTML?Estructura básica de HTMLEtiquetas y elementosAnidamiento y cierre de etiquetasComentarios en HTML4Tarjeta de receta
Descripción general del proyectoTítulo y descripción de la receta
IngredientesPasos2Texto y formato
EncabezadosPárrafosSaltos de líneaTexto en negrita y cursivaNegrita y cursiva de nuevoResumen - Formato9Formularios e Inputs Parte 2
Radio buttonsCheckboxesDropdownsBotonesBotones en formulariosRepaso - Formularios #1Repaso - Formularios #2