Вивчайте Challenge: Design a Functional HTML Table | HTML-Форми та Введення Користувача

Свайпніть щоб показати меню

Мета

Подання інформації про співробітників у структурованому табличному форматі з використанням відповідних HTML-тегів для створення рядків і стовпців.

Завдання

Створити таблицю з трьома стовпцями: Name, Position та Wage. Зосередитися на використанні відповідних HTML-тегів для заповнення таблиці правильними рядками та стовпцями. Ось дані, які потрібно включити:

Name: Emma Johnson | Position: Sales Associate | Wage: $15.50 per hour.
Name: Liam Thompson | Position: Customer Service Representative | Wage: $14.75 per hour.
Name: Olivia Rodriguez | Position: Marketing Coordinator | Wage: $18.25 per hour.
Name: Noah Smith | Position: IT Support Specialist | Wage: $20.00 per hour.
Name: Ava Davis | Position: Administrative Assistant | Wage: $16.80 per hour.

index.html

index.css

Підказка

Використання тегу <table> для визначення основного контейнера таблиці;
Використання тегу <thead> для групування заголовків таблиці, таких як назви стовпців;
Використання тегу <tr> для визначення нового рядка в таблиці;
Використання тегу <th> для визначення тексту заголовка кожного стовпця;
Використання тегу <tbody> для групування основного вмісту таблиці, включаючи рядки та комірки з даними;
Використання тегу <td> для визначення фактичних даних або вмісту кожної комірки таблиці.

Розв'язок

<!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>

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 21

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Секція 1. Розділ 21