Creación y Estructuración de Tablas en HTML
Las tablas ayudan a presentar datos estructurados como horarios, calendarios, registros financieros, menús y listas de precios. HTML proporciona varios elementos para construir tablas.
Elementos principales de una tabla:
<table>: el contenedor de la tabla;<tr>: una fila;<th>: una celda de encabezado (negrita, centrada);<td>: una celda de datos regular.
A continuación, se construirá paso a paso una tabla de menú simple.
Paso 1: Configurar la estructura HTML
Comience creando la estructura básica de HTML para su página:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Paso 2: Definir la tabla
Dentro del elemento <body>, agregar la etiqueta <table> para definir la tabla:
<table>
<!-- Table content will go here -->
</table>
Paso 3: Agregar un título a la tabla (Opcional)
Para proporcionar un título a la tabla, se puede utilizar la etiqueta <caption>:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Paso 4: Crear encabezados de tabla
A continuación, agregar los encabezados de la tabla dentro del elemento <thead>. Cada encabezado se define utilizando la etiqueta <th>:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
Paso 5: Rellenar la tabla con datos
Utilice el elemento <tbody> para encerrar las filas de la tabla y las etiquetas <td> para definir las celdas que contienen los datos:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Appetizer</td>
<td>Garlic Shrimps</td>
<td>8$</td>
</tr>
<tr>
<td>Pasta</td>
<td>Lobster Linguine Noodles</td>
<td>16$</td>
</tr>
<tr>
<td>Sandwich</td>
<td>Lobster Tail Sandwich</td>
<td>11$</td>
</tr>
</tbody>
</table>
Código completo
Dedique un momento a examinar todos los elementos detenidamente para asegurar que su relación sea evidente.
index.html
index.css
Por defecto, las tablas HTML no tienen un estilo visual específico. Para personalizar la apariencia de la tabla, agregue estilos CSS en un archivo CSS separado o dentro de una etiqueta <style> en la sección <head> del archivo HTML.
Sin embargo, no es necesario profundizar en CSS en esta etapa, ya que el enfoque actual es únicamente en HTML.
Si desea ver cómo se ve la tabla sin ningún estilo CSS, puede eliminar la línea 4: <link rel="stylesheet" href="index.css" />, que importa los estilos CSS.
Si desea aprender más sobre CSS, considere tomar el curso Fundamentos de CSS.
1. ¿Qué elemento HTML se utiliza para definir una tabla en una página web?
2. ¿Qué elemento HTML se utiliza para definir una fila dentro de una tabla?
3. ¿Cuál es el propósito del elemento <th> en una tabla HTML?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Genial!
Completion tasa mejorada a 2.38Creación y Estructuración de Tablas en HTML
Desliza para mostrar el menú
Las tablas ayudan a presentar datos estructurados como horarios, calendarios, registros financieros, menús y listas de precios. HTML proporciona varios elementos para construir tablas.
Elementos principales de una tabla:
<table>: el contenedor de la tabla;<tr>: una fila;<th>: una celda de encabezado (negrita, centrada);<td>: una celda de datos regular.
A continuación, se construirá paso a paso una tabla de menú simple.
Paso 1: Configurar la estructura HTML
Comience creando la estructura básica de HTML para su página:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Paso 2: Definir la tabla
Dentro del elemento <body>, agregar la etiqueta <table> para definir la tabla:
<table>
<!-- Table content will go here -->
</table>
Paso 3: Agregar un título a la tabla (Opcional)
Para proporcionar un título a la tabla, se puede utilizar la etiqueta <caption>:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Paso 4: Crear encabezados de tabla
A continuación, agregar los encabezados de la tabla dentro del elemento <thead>. Cada encabezado se define utilizando la etiqueta <th>:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
Paso 5: Rellenar la tabla con datos
Utilice el elemento <tbody> para encerrar las filas de la tabla y las etiquetas <td> para definir las celdas que contienen los datos:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Appetizer</td>
<td>Garlic Shrimps</td>
<td>8$</td>
</tr>
<tr>
<td>Pasta</td>
<td>Lobster Linguine Noodles</td>
<td>16$</td>
</tr>
<tr>
<td>Sandwich</td>
<td>Lobster Tail Sandwich</td>
<td>11$</td>
</tr>
</tbody>
</table>
Código completo
Dedique un momento a examinar todos los elementos detenidamente para asegurar que su relación sea evidente.
index.html
index.css
Por defecto, las tablas HTML no tienen un estilo visual específico. Para personalizar la apariencia de la tabla, agregue estilos CSS en un archivo CSS separado o dentro de una etiqueta <style> en la sección <head> del archivo HTML.
Sin embargo, no es necesario profundizar en CSS en esta etapa, ya que el enfoque actual es únicamente en HTML.
Si desea ver cómo se ve la tabla sin ningún estilo CSS, puede eliminar la línea 4: <link rel="stylesheet" href="index.css" />, que importa los estilos CSS.
Si desea aprender más sobre CSS, considere tomar el curso Fundamentos de CSS.
1. ¿Qué elemento HTML se utiliza para definir una tabla en una página web?
2. ¿Qué elemento HTML se utiliza para definir una fila dentro de una tabla?
3. ¿Cuál es el propósito del elemento <th> en una tabla HTML?
¡Gracias por tus comentarios!
