Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Diseñar una Tabla HTML Funcional | Formularios HTML y Entrada de Usuario
HTML Definitivo

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:

  1. Nombre: Emma Johnson | Puesto: Sales Associate | Salario: $15.50 per hour.
  2. Nombre: Liam Thompson | Puesto: Customer Service Representative | Salario: $14.75 per hour.
  3. Nombre: Olivia Rodriguez | Puesto: Marketing Coordinator | Salario: $18.25 per hour.
  4. Nombre: Noah Smith | Puesto: IT Support Specialist | Salario: $20.00 per hour.
  5. Nombre: Ava Davis | Puesto: Administrative Assistant | Salario: $16.80 per hour.
index.html

index.html

index.css

index.css

Pista
expand arrow
  1. Utilizar la etiqueta <table> para definir el contenedor principal de la tabla;
  2. Utilizar la etiqueta <thead> para agrupar el contenido del encabezado de la tabla, como los títulos de las columnas;
  3. Utilizar la etiqueta <tr> para definir una nueva fila dentro de la tabla;
  4. Utilizar la etiqueta <th> para definir el texto del encabezado de cada columna;
  5. Utilizar la etiqueta <tbody> para agrupar el contenido principal de la tabla, incluyendo filas y celdas de datos;
  6. Utilizar la etiqueta <td> para definir los datos o el contenido dentro de cada celda de la tabla.
Solución
expand arrow
<!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?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 21

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Sección 1. Capítulo 21
some-alt