Вивчайте Challenge: Design a Functional HTML Table | Робота з Медіа та Таблицями

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

Мета

Подання інформації про співробітників у структурованому табличному форматі з використанням відповідних 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>

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

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

Секція 4. Розділ 9

Запитати АІ

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

Секція 4. Розділ 9