Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Завдання: Створення Функціональної HTML-Таблиці | Робота з Медіа та Таблицями
Ultimate HTML

book
Завдання: Створення Функціональної HTML-Таблиці

Мета

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

Завдання

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

  1. Ім'я: Emma Johnson | Посада: Sales Associate | Заробітна плата: $15.50 за годину.

  2. Ім'я: Liam Thompson | Посада: Customer Service Representative | Заробітна плата: $14.75 за годину.

  3. Ім'я: Olivia Rodriguez | Посада: Marketing Coordinator | Заробітна плата: $18.25 за годину.

  4. Ім'я: Noah Smith | Посада: IT Support Specialist | Заробітна плата: $20.00 за годину.

  5. Ім'я: Ava Davis | Посада: Administrative Assistant | Заробітна плата: $16.80 за годину.

index.html

index.html

index.css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<table>
<!-- Table header: Defines the column headings -->
<thead>
<tr>
<th>___</th>
<th>Position</th>
<___>Wage</___>
</tr>
</thead>

<!-- Table body: Contains data for each employee -->
<tbody>
<!-- Row 1 -->
<tr>
<td>Emma Johnson</td>
<td>___</td>
<td>$15.50 per hour</td>
</tr>
<!-- Row 2 -->
<tr>
<___>Liam Thompson</___>
<td>Customer Service Representative</td>
<td>$14.75 per hour</td>
</tr>
<!-- Row 3 -->
<___>
<td>Olivia Rodriguez</td>
<td>Marketing Coordinator</td>
<td>$18.25 per hour</td>
</___>
  1. Використовуйте тег table для визначення основного контейнера таблиці.

  2. Використовуйте тег thead для групування заголовків таблиці, таких як назви стовпців.

  3. Використовуйте тег tr для визначення нового рядка у таблиці.

  4. Використовуйте тег th для визначення тексту заголовка кожного стовпця.

  5. Використовуйте тег tbody для групування основного вмісту таблиці, який включає рядки та комірки з даними.

  6. Використовуйте тег td для визначення фактичних даних або вмісту кожної комірки таблиці.

index.html

index.html

index.css

index.css

copy
<!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>
Все було зрозуміло?

Як ми можемо покращити це?

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

We use cookies to make your experience better!
some-alt