Desafío: Diseñar una Tabla HTML Funcional
Desliza para mostrar el menú
Objetivo
Presentación de información de empleados en un formato de tabla estructurada utilizando las etiquetas HTML adecuadas para crear filas y columnas.
Tarea
Crear una tabla con tres columnas: Nombre, Puesto y Salario. Enfoque en el uso de las etiquetas HTML adecuadas para completar la tabla con las filas y columnas correctas. Aquí están los datos a incluir:
- Nombre: Emma Johnson | Puesto: Sales Associate | Salario: $15.50 per hour.
- Nombre: Liam Thompson | Puesto: Customer Service Representative | Salario: $14.75 per hour.
- Nombre: Olivia Rodriguez | Puesto: Marketing Coordinator | Salario: $18.25 per hour.
- Nombre: Noah Smith | Puesto: IT Support Specialist | Salario: $20.00 per hour.
- Nombre: Ava Davis | Puesto: Administrative Assistant | Salario: $16.80 per hour.
index.html
index.css
Pista
- Utilizar la etiqueta
<table>para definir el contenedor principal de la tabla; - Utilizar la etiqueta
<thead>para agrupar el contenido del encabezado de la tabla, como los títulos de las columnas; - Utilizar la etiqueta
<tr>para definir una nueva fila dentro de la tabla; - Utilizar la etiqueta
<th>para definir el texto del encabezado de cada columna; - Utilizar la etiqueta
<tbody>para agrupar el contenido principal de la tabla, incluyendo filas y celdas de datos; - Utilizar la etiqueta
<td>para definir los datos o el contenido dentro de cada celda de la tabla.
Solución
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<table>
<!-- Table header: Defines the column headings -->
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Wage</th>
</tr>
</thead>
<!-- Table body: Contains data for each employee -->
<tbody>
<!-- Row 1 -->
<tr>
<td>Emma Johnson</td>
<td>Sales Associate</td>
<td>$15.50 per hour</td>
</tr>
<!-- Row 2 -->
<tr>
<td>Liam Thompson</td>
<td>Customer Service Representative</td>
<td>$14.75 per hour</td>
</tr>
<!-- Row 3 -->
<tr>
<td>Olivia Rodriguez</td>
<td>Marketing Coordinator</td>
<td>$18.25 per hour</td>
</tr>
<!-- Row 4 -->
<tr>
<td>Noah Smith</td>
<td>IT Support Specialist</td>
<td>$20.00 per hour</td>
</tr>
<!-- Row 5 -->
<tr>
<td>Ava Davis</td>
<td>Administrative Assistant</td>
<td>$16.80 per hour</td>
</tr>
</tbody>
</table>
</body>
</html>
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 1. Capítulo 21
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Sección 1. Capítulo 21