Заголовки
Заголовки
В HTML таблицы предоставляют не только удобный способ организации данных, но и возможность добавления заголовков для лучшего понимания содержимого. В этом уроке мы рассмотрим, как создавать и стилизовать заголовки в таблицах.
Заголовок Таблицы: <caption>
Заголовок таблицы помогает предоставить общее описание для всей таблицы. Это делается с использованием тега <caption>, который размещается непосредственно после открывающего тега <table>.
Пример:
<table>
<caption>Расписание занятий</caption>
<!-- Тело таблицы -->
</table>Заголовки Столбцов: <th>
Для выделения заголовков столбцов используется тег <th>. Обычно они располагаются в первой строке таблицы (<tr>).
Пример:
<table>
<tr>
<th>День недели</th>
<th>Предмет</th>
<th>Время</th>
</tr>
<!-- Тело таблицы -->
</table>Заголовки Строк: <th> в первой ячейке каждой строки
Аналогично, заголовки строк могут быть выделены с использованием тега <th>. Они располагаются в первой ячейке каждой строки.
Пример:
<table>
<tr>
<th>Студент</th>
<th>Оценка по математике</th>
<th>Оценка по литературе</th>
</tr>
<tr>
<th>Иванов</th>
<td>90</td>
<td>85</td>
</tr>
<tr>
<th>Петров</th>
<td>88</td>
<td>92</td>
</tr>
</table>Пример разработки таблицы с заголовками
В этом примере мы создали две таблицы. Первая содержит расписание занятий, а вторая - оценки студентов. Заголовки столбцов выделены с использованием тега <th>. Заголовки таблицы и стилевые правила определены внутри тега <style>. Это простой пример, который вы можете дополнить и адаптировать под свои потребности
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th,
td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #3498db;
color: #fff;
}
caption {
font-size: 1.2em;
font-weight: bold;
color: #e74c3c;
}
</style>
<title>Пример таблицы с заголовками</title>
</head>
<body>
<table>
<caption>Расписание занятий</caption>
<tr>
<th>День недели</th>
<th>Предмет</th>
<th>Время</th>
</tr>
<tr>
<td>Понедельник</td>
<td>Анжумания </td>
<td>10:00 - 11:30</td>
</tr>
<tr>
<td>Вторник</td>
<td>Прес качат</td>
<td>09:00 - 10:30</td>
</tr>
<tr>
<td>Среда</td>
<td>Бегит</td>
<td>13:00 - 14:30</td>
</tr>
</table>
<table>
<caption>Оценки студентов</caption>
<tr>
<th>Студент</th>
<th>Оценка по Анжуманию </th>
<th>Оценка по Прес качат</th>
</tr>
<tr>
<td>Алексей</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>Дарья</td>
<td>88</td>
<td>92</td>
</tr>
<tr>
<td>Марк</td>
<td>95</td>
<td>89</td>
</tr>
</table>
</body>
</html>
Заключение
Мы освоили важность использования заголовков в таблицах HTML для более наглядного представления данных. Заголовки обеспечивают структурированность и облегчают восприятие информации в таблицах.
Будьте первым