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

<table>
<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, чтобы указать границу. Но сейчас это не рекомендуется.

<table border="1">
<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 для указания границы в таблице.

HTML-таблица отступы

Вы можете указать отступы для заголовка таблицы и данных таблицы двумя способами:
1. По атрибуту ячейки таблицы в HTML
2. По свойству заполнения в CSS
Атрибут cellpadding тега таблицы HTML теперь устарел. Рекомендуется использовать CSS. Итак, давайте посмотрим код CSS.

Ширина таблицы HTML:

Мы можем указать ширину таблицы HTML, используя свойство ширины CSS . Его можно указать в пикселях или процентах.

<!DOCTYPE html>
<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-код:

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.
Давайте посмотрим на пример, который охватывает две строки.