Введение
Таблицы можно использовать для представления данных в структурированном формате. Основной компонент любой таблицы - это элемент строки таблицы (), который определяет строку ячеек. Строки таблицы должны быть помещены внутри элемента таблицы (). В этом практическом занятии мы узнаем, как создавать строки HTML-таблиц.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Создание структуры HTML таблицы
Для создания HTML-таблицы сначала необходимо определить ее структуру. Создайте HTML-файл с именем index.html. Добавьте в файл следующий код:
<!doctype html>
<html>
<head>
<title>Моя таблица</title>
</head>
<body>
<table>
<tr>
<th>Заголовочная ячейка 1</th>
<th>Заголовочная ячейка 2</th>
</tr>
<tr>
<td>Ячейка данных 1</td>
<td>Ячейка данных 2</td>
</tr>
</table>
</body>
</html>
В этом коде мы создали HTML-таблицу с двумя строками и двумя столбцами. Первая строка содержит две заголовочные ячейки (
<tr>
<td>Ячейка данных 3</td>
<td>Ячейка данных 4</td>
</tr>
Теперь таблица имеет три строки, в каждой из которых по две ячейки.
Стилизация строк таблицы
Мы можем добавить стили к строкам таблицы с использованием CSS. Добавьте следующий стиль в элемент , чтобы добавить цвет фона к четным строкам:
<style>
tr:nth-child(even) {
background-color: lightgray;
}
</style>
Этот код добавит цвет фона lightgray ко второй строке таблицы.
Объединение строк таблицы
Мы можем объединить две или более соседних строк в одну строку с использованием атрибута rowspan. Например, предположим, что мы хотим объединить первые две строки в одну. Замените первый элемент
<tr>
<th rowspan="2">Заголовочная ячейка 1</th>
<th>Заголовочная ячейка 2</th>
</tr>
Атрибут rowspan="2" в первой заголовочной ячейке объединит первые две строки в одну.
Создание заголовков таблиц
Мы можем использовать элемент
| ), а вторая строка содержит две ячейки с данными ( | ).
Добавление дополнительных строкДля добавления дополнительных строк в таблицу необходимо добавить в таблицу больше элементов | |
|---|---|---|
| для создания заголовковых ячеек в таблице. Заголовочные ячейки обычно используются для описания содержимого столбцов. Чтобы добавить заголовочную ячейку в первый столбец, замените первый элемент | во второй строке следующим кодом:
Атрибут | указывает, что это заголовочная ячейка для первой строки.
РезюмеВ этом практическом занятии мы узнали, как создавать строки таблицы в HTML и настраивать таблицу с использованием CSS. Мы также узнали, как объединять соседние строки и создавать заголовочные ячейки в таблице. С этими навыками вы теперь можете создавать красивые и структурированные таблицы для своих веб-страниц. |
