HTML-тег <table>
HTML-тег
<table>
используется для создания таблиц на веб-странице. Таблицы используются для организации данных в строки и столбцы, обеспечивая структурированную структуру отображения информации. Элемент
<table>
содержит дочерние элементы, такие как
<tr>
(строки таблицы),
<th>
(заголовки таблицы) и
<td>
(ячейки данных таблицы).
Базовый синтаксис HTML-тега <table>
Базовая структура HTML-таблицы:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Элемент
<tr>
определяет строку таблицы,
<th>
определяет заголовок таблицы, а
<td>
определяет ячейку данных таблицы.
Пример простой HTML-таблицы
Вот пример простой таблицы, отображающей баллы учащихся:
<!DOCTYPE html>
<html>
<body>
<h2>Student Scores</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Score</th>
</tr>
<tr>
<td>Alice</td>
<td>Math</td>
<td>85</td>
</tr>
<tr>
<td>Bob</td>
<td>Science</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Объяснение:
Атрибут
border="1"
добавляет простую границу вокруг таблицы для лучшей видимости.
Добавление заголовков таблиц
Элемент
<caption>
обеспечивает заголовок таблицы:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<caption>Monthly Sales Report</caption>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Laptops</td>
<td>50</td>
<td>$500</td>
</tr>
</table>
</body>
</html>
Пояснение:
Тег
<caption>
предоставляет заголовок или резюме для таблицы, что улучшает доступность и удобство использования.
Объединение ячеек в таблице с помощью colspan и rowspan
Вы можете объединить ячейки по горизонтали, используя
colspan
и по вертикали, используя
rowspan
:
<!DOCTYPE html>
<html>
<body>
<h2>Class Schedule</h2>
<table border="1">
<tr>
<th colspan="2">Monday</th>
</tr>
<tr>
<td>Math</td>
<td>9:00 - 10:00 AM</td>
</tr>
<tr>
<th rowspan="2">Tuesday</th>
<td>Science</td>
<td>10:00 - 11:00 AM</td>
</tr>
<tr>
<td>History</td>
<td>11:00 - 12:00 PM</td>
</tr>
</table>
</body>
</html>
Объяснение:
Атрибут
colspan
объединяет столбцы, а атрибут
rowspan
объединяет строки для создания более сложных макетов таблиц.
Стилизация таблиц с помощью CSS
Таблицы можно стилизовать для улучшения их внешнего вида с помощью CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f4f4f4;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Styled Table</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
</table>
</body>
</html>
Пояснение: стили CSS улучшают внешний вид таблицы, стирая границы, добавляя отступы и по-разному оформляя заголовки.
Практическое применение тега <table>
- Представление данных: отображение структурированных данных, таких как отчеты, расписания или оценки.
- Финансовые таблицы: создание таблиц для бюджетов, счетов-фактур или отслеживания расходов.
- Сравнительные таблицы: отображайте сравнительные характеристики продуктов или услуг.
- Календари: создавайте простые макеты календарей или расписания на конкретные даты.