Руководство по таблицам в HTML

HTML-таблицы позволяют расположить данные в строках и столбцах. Они обычно используются для отображения табличных данных, таких как демографические данные, данные клиентов, финансовые отчеты, списки продуктов и т. д.

Вы можете создать таблицу, используя элемент <table>. Внутри элемента <table> вы можете использовать элементы <tr> для создания строк, а для создания столбцов внутри строки вы можете использовать элементы <td>. Вы также можете определить ячейку в качестве заголовка для группы ячеек таблицы, используя элемент <th>.

Следующий пример демонстрирует основную структуру таблицы.

<table>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

Таблицы не имеют границ по умолчанию. Вы можете использовать CSS-свойство border для добавления границ в таблицы. Кроме того, чтобы добавить больше пространства вокруг содержимого в ячейках таблицы, вы можете использовать CSS-свойство padding.

Следующие правила добавляют 1-пиксельные границы к таблице и 10-пиксельные отступы для ячеек.

table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}

По умолчанию границы вокруг таблицы и их ячейки отделены друг от друга. Но вы можете свернуть их в одну, используя свойство border-collapse для элемента <table>.

Кроме того, текст внутри элементов <th> текст отображается жирным шрифтом и по умолчанию выровнен по горизонтали по центру ячейки. Чтобы изменить выравнивание по умолчанию, вы можете использовать CSS-свойство text-align.

Следующие правила сворачивают границы таблицы и выравнивают текст заголовка таблицы по левому краю.

table {
    border-collapse: collapse;
}
th {
    text-align: left;
}

См. Руководство по таблицам в CSS, чтобы узнать подробнее о стилизации таблиц HTML.

Атрибут span для <table>

Атрибут span позволяет объединять строки и столбцы таблицы.

Обычно ячейка таблицы не может перекрывать пространство другой ячейки, которая расположена ниже или выше текущей. Но вы можете использовать атрибуты rowspan или colspan для охвата нескольких строк или столбцов в таблице.

Давайте посмотрим следующий пример, чтобы понять, как работает colspan:

<table>
    <tr>
        <th>Name</th>
        <th colspan="2">Phone</th>
    </tr>
    <tr>
        <td>John Carter</td>
        <td>5550192</td>
        <td>5550152</td>
    </tr>
</table>

Точно так же вы можете использовать атрибут rowspan для создания ячейки, которая охватывает несколько строк. Взглянем на пример:

<table>
    <tr>
        <th>Name:</th>
        <td>John Carter</td>
    </tr>
    <tr>
        <th rowspan="2">Phone:</th>
        <td>55577854</td>
    </tr>
    <tr>
        <td>55577855</td>
    </tr>
</table>

Использование тега <caption>

Вы можете указать заголовок (caption) для ваших таблиц, используя элемент <caption>.

Элемент <caption> должен быть размещен непосредственно после открывающего тега <table>. По умолчанию заголовок отображается в верхней части таблицы, но вы можете изменить его положение, используя CSS-свойство caption-side.

В следующем примере показано, как использовать этот элемент в таблице.

<table>
    <caption>Users Info</caption>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

Использование тегов <thead>, <tbody>, и <tfoot>

В HTML есть серия тегов <thead>, <tbody>, и <tfoot>, которые помогают вам создавать более структурированные таблицы, определяя области верхнего и нижнего колонтитула соответственно.

В следующем примере демонстрируется использование этих элементов.

<table>
    <thead>
        <tr>
            <th>Items</th>
            <th>Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stationary</td>
            <td>2,000</td>
        </tr>
        <tr>
            <td>Furniture</td>
            <td>10,000</td>
        </tr>        
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>12,000</td>
        </tr>
    </tfoot>
</table>