HTML-таблица
HTML-тег table используется для отображения данных в табличной форме (строка * столбец).
В строке может быть много столбцов.
Мы можем создать таблицу для отображения данных в табличной форме, используя элемент <table> с помощью элементов <tr>, <td> и <th>.
В каждой таблице строка таблицы определяется тегом <tr>, заголовок таблицы определяется тегом <th>, а данные таблицы определяются тегом <td>.
Таблицы HTML используются для управления макетом страницы, например, разделом заголовка, панелью навигации, содержимым тела, разделом нижнего колонтитула и т. д. Но рекомендуется использовать тег div над таблицей для управления макетом страницы.
Теги таблицы HTML
<table>
этот тег определяет таблицу.
<tr>
этот тег определяет строку в таблице.
<th>
этот тег определяет ячейку заголовка в таблице.
<td>
это тег определяет ячейку в таблице.
<caption>
этот тег определяет заголовок таблицы.
<colgroup>
этот указывает группу из одного или нескольких столбцов в таблице для форматирования.
<col>
этот тег используется с элементом <colgroup> для указания свойств столбца для каждого столбца.
<tbody>
этот тег используется для группировки содержимого тела в таблице.
<thead>
этот тег используется для группировки содержимого шапки в таблице.
<tfooter>
Он используется для группировки содержимого нижнего колонтитула в таблице.
Пример таблицы HTML
<tr><th>Имя</th><th>Фамилия</th><th>возраст</th></tr>
<tr><td>Марина</td><td>Зотова</td><td>25</td></tr>
<tr><td>Варвара</td><td>Соколова</td><td>30</td></tr>
<tr><td>Кузьма</td><td>Соколов</td><td>30</td></tr>
</table>
HTML-таблица с рамкой
Есть два способа указать границы для HTML-таблиц.
1. По атрибуту границы таблицы в HTML
2. По свойству границы в CSS
1) Атрибут границы HTML
Вы можете использовать атрибут границы тега таблицы в HTML, чтобы указать границу. Но сейчас это не рекомендуется.
<tr><th>Имя</th><th>Фамилия</th><th>возраст</th></tr>
<tr><td>Марина</td><td>Зотова</td><td>25</td></tr>
<tr><td>Варвара</td><td>Соколова</td><td>30</td></tr>
<tr><td>Кузьма</td><td>Соколов</td><td>30</td></tr>
</table>
2) Свойство границы CSS
Теперь рекомендуется использовать свойство границы CSS для указания границы в таблице.
table, th, td {
border: 1px solid black;
}
</style>
HTML-таблица отступы
Вы можете указать отступы для заголовка таблицы и данных таблицы двумя способами:
1. По атрибуту ячейки таблицы в HTML
2. По свойству заполнения в CSS
Атрибут cellpadding тега таблицы HTML теперь устарел. Рекомендуется использовать CSS. Итак, давайте посмотрим код CSS.
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
Ширина таблицы HTML:
Мы можем указать ширину таблицы HTML, используя свойство ширины CSS . Его можно указать в пикселях или процентах.
<html>
<head>
<title>таблица</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 2px solid green;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1 заголовок</th>
<th>1 заголовок</th>
<th>1 заголовок</th>
</tr>
<tr>
<td<1 данные</td>
<td>1 данные</td>
<td>1 данные</td>
</tr>
</table>
</body>
</html>
HTML-таблица с colspan
Если вы хотите, чтобы ячейка занимала более одного столбца, вы можете использовать атрибут colspan.
Он разделит одну ячейку/строку на несколько столбцов, а количество столбцов зависит от значения атрибута colspan.
Давайте посмотрим на пример, который охватывает два столбца.
CSS-код:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
HTML-код:
<table style="width: 100%">
<tr>
<th>Имя</th>
<th colspan="2">Мобильный тел</th>
</tr>
<tr>
<td>Мария</td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table>
HTML-таблица с rowspan
Если вы хотите, чтобы ячейка занимала более одной строки, вы можете использовать атрибут rowspan.
Он разделит ячейку на несколько строк. Количество разделенных строк будет зависеть от значений rowspan.
Давайте посмотрим на пример, который охватывает две строки.
CSS-код:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
HTML-код:
<table>
<tr><th>Имя</th><td>Мария</td></tr>
<tr><th rowspan="2">Мобильный тел.</th><td>7503520801</td></tr>
<tr><td>9555879135</td></tr>
</table>
HTML-таблица с caption
HTML-caption отображается над таблицей. Он должен использоваться только после тега table.
<caption>Студенческие записи</caption>
<tr><th>Имя</th><th>Фамилия</th><th>Курс</th></tr>
<tr><td>Артур</td><td>Микалиян</td><td>4</td></tr>
<tr><td>Антон</td><td>Мартынов</td><td>3</td></tr>
</table>
