Введение
В этом лабораторном задании вы узнаете о теге HTML <td>, который используется для определения данных таблицы в HTML-таблице. Также вы узнаете о различных атрибутах, которые можно использовать с этим тегом.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Создание HTML-таблицы
Первым шагом является создание HTML-таблицы с некоторыми данными. Откройте файл index.html и добавьте следующий код:
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>22</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Здесь мы создали HTML-таблицу с двумя строками и тремя столбцами. Тег <td> используется для определения содержимого каждой ячейки в таблице.
Использование атрибута colspan
Атрибут colspan используется для указания количества столбцов, которое должна охватывать ячейка. Чтобы использовать атрибут colspan, добавьте следующий код:
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<td colspan="2">John Doe</td>
<td>22</td>
</tr>
<tr>
<td colspan="2">Jane Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Здесь мы использовали атрибут colspan, чтобы объединить первые два столбца и отобразить имя человека в одной ячейке.
Использование атрибута rowspan
Атрибут rowspan используется для указания количества строк, которое должна охватывать ячейка. Чтобы использовать атрибут rowspan, добавьте следующий код:
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<td rowspan="2">John</td>
<td>Doe</td>
<td>22</td>
</tr>
<tr>
<td colspan="2">Male</td>
</tr>
<tr>
<td rowspan="2">Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">Female</td>
</tr>
</table>
</body>
</html>
Здесь мы использовали атрибут rowspan, чтобы объединить столбец с именем и отобразить имя человека в одной ячейке для двух строк.
Использование атрибута header
Атрибут header используется для указания того, что ячейка связана с одной или несколькими ячейками-заголовками. Чтобы использовать атрибут header, добавьте следующий код:
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<th id="name-header">Name</th>
<th>Age</th>
</tr>
<tr>
<td headers="name-header">John Doe</td>
<td>22</td>
</tr>
<tr>
<td headers="name-header">Jane Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Здесь мы использовали атрибут header, чтобы указать, что первый столбец связан с ячейкой-заголовком с идентификатором name-header.
Резюме
Поздравляем! Вы узнали, как использовать HTML-тег <td> для определения таблиц данных в HTML-таблице. Вы также узнали о различных атрибутах, таких как colspan, rowspan и header, которые можно использовать с этим тегом для создания более сложных таблиц.
