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

В этом руководстве мы расскажем, как с помощью tr HTML создавать таблицы и задавать для них стили с помощью CSS.

Основные элементы таблицы

В HTML таблицы создаются с помощью элемента <table> в сочетании с элементами <tr> и <td>.

Каждый набор тегов <tr> (открывающийся и закрывающийся) представляет собой строку внутри таблицы. А каждый набор тегов <td> определяет ячейку таблицы.

Также с помощью элемента <th> можно добавлять заголовки:

<table>
    <tr>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
    </tr>
    <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
</table>

Просмотреть код с помощью онлайн-редактора

Рамка таблицы

С помощью CSS можно добавить рамку для всей таблицы или для отдельных ячеек. При добавлении только для таблицы рамка будет окружать внешнюю границу таблицы, но не каждую из ее ячеек.

При этом можно использовать встроенные стили, но в этом случае придется добавить код CSS для каждого элемента <td>.

Вместо этого более эффективно определить рамку во вложенной или внешней таблице стилей. Таким образом, в пределах одного объявления можно применить рамку для всех tr td HTML.

Для этого поместите стили рамки внутри <style>.

Например:

<style>
    table, th, td {
        border: 1px solid orange;
    }
</style>

После добавления этих стилей ваш документ будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table, th, td {
                border: 1px solid orange;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Просмотреть код с помощью онлайн-редактора

Спецификация HTML5 включает в себя атрибут border для таблицы, использование которого решает большинство целей разработки. Можно применять border=»0″, чтобы убрать рамку, или border=»1″, чтобы добавить ее. Но HTML не содержит способов задать стили рамки, поэтому большинство разработчиков используют CSS для оформления рамок таблиц.

Объединение рамок

По умолчанию, соседние ячейки имеют собственные рамки. Это может привести к возникновению «двойной рамки«.

Но большинство разработчиков предпочитают объединять все в одну сплошную рамку. Чтобы объединить сделать это, добавьте следующие строки кода:

border-collapse: collapse;

Теперь документ с тегом tr в HTML будет выглядеть так:

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table, th, td {
                border: 1px solid orange;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Просмотреть код с помощью онлайн-редактора

Поля ячеек

С помощью свойства CSS padding можно задать поля для ячеек и указать HTML tr height. Например, чтобы применить поля в 5 пикселей, добавьте следующую строку:

padding: 5px;

Теперь документ будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table, th, td {
                border: 1px solid orange;
                border-collapse: collapse;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Просмотреть код с помощью онлайн-редактора

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

Ширину таблицы можно указать с помощью свойства CSS width. Задав значение в пикселях, можно определить точную ширину. Процентное соотношение позволяет таблице «растягиваться» или «сжиматься» в зависимости от того, что еще находится на странице или каковы размеры окна браузера.

Вот пример использования процентов для HTML table tr:

table {
    width: 100%;
    }

Обратите внимание, что в этом случае мы используем селектор таблицы, так как задаем только ее ширину, а не отдельных ячеек.

Теперь документ будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table {
                width: 100%;
            }
            table, th, td {
                border: 1px solid orange;
                border-collapse: collapse;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Просмотреть код с помощью онлайн-редактора

Изменение цвета фона

HTML tr color можно задать с помощью свойства CSS background-color.

Можно применить цвет фона для всей таблицы, или только ее части. Например, ячеек, определенных строк и т.д.
Используем CSS, чтобы применить чередующиеся цвета к строкам таблицы. Первая строка будет иметь цвет А, вторая будет иметь цвет B, третья снова цвет А, четвертая снова цвет B и так далее.

Для этого используйте селектор псевдокласса CSS :nth-child со значениями odd и even, чтобы определить цвет фона четных и нечетных строк:

table.alt tr:nth-child(even) {
    background-color: #eee;
}
table.alt tr:nth-child(odd) {
    background-color: #fff;
}

Обратите внимание, что в этом примере я также создал класс, который называется alt, и применил его к таблице. А затем использовал этот класс как часть селектора CSS. Таким образом, если в документе есть больше одной таблицы, эти стили будут применены только к HTML table tr td с классом alt.

Теперь документ будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table {
                width: 100%;
            }
            table, th, td {
                border-collapse: collapse;
                padding: 5px;
            }
            table.alt tr:nth-child(even) {
                background-color: #eee;
            }
            table.alt tr:nth-child(odd) {
                background-color: #fff;
            }            
        </style>
    </head>
    <body>
        <table class="alt">
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Просмотреть код с помощью онлайн-редактора

Colspan

Можно использовать атрибут colspan, чтобы одна ячейка охватывала несколько столбцов. Для этого укажите количество столбцов, которые должна охватывать ячейка.

Вот пример заголовка HTML table tr td, который охватывает два столбца:

<table style="width:100%">
    <tr style="background-color:beige;">
        <th colspan="2">Table Header</th>
        <th>Table Header</th>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
</table>

Просмотреть код с помощью онлайн-редактора

Когда сделаете это, вам нужно будет удалить ненужные tr td HTML. В приведенном выше примере определено только два заголовка, хотя столбцов три.

RowSpan

RowSpan делает для строк то же, что colspan делает для столбцов (rowspan позволяет растянуть ячейку на несколько строк):

<table style="width:100%">
    <tr style="background-color:beige;">
        <th rowspan="4">Table Header</th>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
</table>

Просмотреть код с помощью онлайн-редактора

На заре интернета веб-дизайнеры часто использовали таблицы для определения структуры макета. Например, левый сайдбар задавался большой ячейкой. Область основного контента — это была еще одна ячейка и т.д. Это делалось, чтобы воспользоваться преимуществами структуры сетки, которую предлагают таблицы.

Но на сегодняшний день не рекомендуется использовать HTML table tr td. Сейчас такие макеты могут создаваться с помощью HTML в сочетании с CSS.

HTML должен использоваться для определения структуры и логики документа. CSS следует применять для оформления его представления.

Элементы таблицы

Вот список элементов таблицы, доступных в HTML5:

  • <table> — определяет таблицу;
  • <tr> HTML— определяет строку внутри таблицы;
  • <td>— определяет ячейку (или данные) внутри таблицы;
  • <th>— определяет ячейку заголовка;
  • <tbody> — определяет блок строк, состоящих из тела данных для родительской таблицы;
  • <thead> — определяет блок строк, состоящих из меток столбцов (футер) для родительской таблицы;
  • <tfoot>— определяет блок строк, состоящих из итогов столбцов (футер) для родительской таблицы;
  • <caption> — определяет заголовок родительской таблицы;
  • <colgroup> — определяет группу из одного или более столбцов в родительской таблице;
  • <col> — используется, чтобы указать свойства столбца в colgroup.

Перевод статьи «HTML Table Tutorial» был подготовлен дружной командой проекта Сайтостроение от А до Я.