Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Таблицы HTML

Основные html-теги таблицы

Чтобы сделать таблицу в html, достаточно следующих тегов:

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

По умолчанию вокруг ячеек таблицы рамок нет.

Пример
<style type="text/css">
    table {
        border-collapse: collapse;
    }
    table th,
    table td {
        padding: 0 3px;
    }
    table.brd th,
    table.brd td {
        border: 1px solid #000;
    }
</style>
<h3>Таблица без рамок</h3>
<table>
    <tr>
        <th>Имя</th>
        <th>Фамилия</th>
    </tr>
    <tr>
        <td>Лариса</td>
        <td>Исаева</td>
    </tr>
    <tr>
        <td>Дмитрий</td>
        <td>Колесников</td>
    </tr>
</table>
<h3>Таблица c рамками</h3>
<table class="brd">
    <tr>
        <th>Имя</th>
        <th>Фамилия</th>
    </tr>
    <tr>
        <td>Лариса</td>
        <td>Исаева</td>
    </tr>
    <tr>
        <td>Дмитрий</td>
        <td>Колесников</td>
    </tr>
</table>

РЕЗУЛЬТАТ:

Таблица без рамок

Имя Фамилия
Лариса Исаева
Дмитрий Колесников

Таблица c рамками

Имя Фамилия
Лариса Исаева
Дмитрий Колесников

Атрибуты тегов <td> и <th> для объединения ячеек

colspan
Число столбцов, перекрываемых ячейкой.
rowspan
Число строк, перекрываемых ячейкой.
Пример
<style type="text/css">
    table {
        border-collapse: collapse;
    }
    table th,
    table td {
        padding: 0 5px;
        border: 1px solid #000;
        text-align: center;
    }
</style>
<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="2">хорьки</td>
    </tr>
    <tr>
        <td>вес</td>
        <td>размер</td>
    </tr>
    <tr>
        <td>самцы</td>
        <td>1.2 – 2.5 кг</td>
        <td>до 70см</td>
    </tr>
    <tr>
        <td>самки</td>
        <td>0.7 – 1.0 кг</td>
        <td>до 40см</td>
    </tr>
</table>

РЕЗУЛЬТАТ:

хорьки
вес размер
самцы 1.2 – 2.5 кг до 70см
самки 0.7 – 1.0 кг до 40см

По стандарту HTML5 все ранее используемые атрибуты таблицы, такие как border, cellspacing, cellpadding и др. больше не поддерживаются и их использование валидатор считает ошибками в коде. Для оформления таблиц нужно использовать CSS-стили, с помощью которых можно заменить все устаревшие атрибуты таблиц. Например, вместо атрибута cellspacing для изменения расстояния между ячейками таблицы используется свойство border-spacing, а для выравнивания содержимого в ячейках таблицы – свойства text-align и vertical-aling. CSS-стили для оформления таблиц

Теги группирования строк html таблицы

Для создания более сложных таблиц можно использовать теги:

<caption>...</caption>
обрамление заголовка таблицы (текст, размещенный между этими тегами, выравнивается по центру).
В исходном коде тег <caption> ставится сразу после тега <table>;
<thead>...</thead>
обрамление шапки таблицы
(в одной таблице допускается не более одного тега <thead>);
<tbody>...</tbody>
группирует строки таблицы в один табличный блок
(таких блоков в таблице может быть несколько);
<tfoot>...</tfoot>
обрамление футера, т.е. нижней, завершающей части таблицы
(в одной таблице допускается не более одного тега <tfoot>).
В исходном коде тег <tfoot>; ставится до тега <tbody>.
Пример
<style type="text/css">
    table {
        border-collapse: collapse;
    }
    table th,
    table td {
        padding: 0 3px;
    }
    table tr td:last-child {
        text-align: right;
    }
    table tbody {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
    }
</style>
<table>
    <caption>Потребление пива</caption>
    <thead>
    <tr>
        <th>Ф.И.О.</th>
        <th>литров</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td>Итого</td>
        <td>250</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Иванов Иван Иванович</td>
        <td>133</td>
    </tr>
    <tr>
        <td>Петров Петр Петрович</td>
        <td>117</td>
    </tr>
    </tbody>
</table>

РЕЗУЛЬТАТ:

Потребление пива
Ф.И.О. литров
Итого 250
Иванов Иван Иванович 133
Петров Петр Петрович 117

Теги группирования столбцов html таблицы

<colgroup>...</colgroup>
группирование столбцов для более удобного форматирования.
В исходном коде тег <colgroup> ставится после открывающего тега <table> и после тега <caption> (если он присутствует), перед тегами <thead>, <tbody>, <tfoot> и <tr>;
<col>
один или несколько столбцов в контейнере <colgroup>...</colgroup> (<col> – одиночный тег).
Атрибут тегов <colgroup> и <col>
span
Число столбцов, следующих друг за другом.

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

Тег col устанавливает параметры отдельно для каждого столбца. При этом неважно, как написать в исходном коде:

<colgroup><col span="3"></colgroup> или <colgroup><col><col><col></colgroup>

Пример
<style type="text/css">
    table {
        width: 200px;
    }
    col {
        border: 1px solid #000;
        width: 25%;
    }
    th {
        border: 1px solid #000;
        padding: 5px;
    }
    tr {
        height: 20px;
    }
</style>
<table>
    <colgroup style="background-color: yellow"><col span="2"></colgroup>
    <colgroup style="background-color: red"><col><col></colgroup>
    <tr>
        <th colspan="2">желтый</th>
        <th colspan="2">красный</th>
    </tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
</table>

РЕЗУЛЬТАТ:

желтый красный

Не пытайтесь установить стиль text-align для тегов <colgroup> и <col>. Текст, размещенный между тегами <td>...</td>, не наследует этот стиль, поскольку тег <td> не является потомком ни тега <colgroup>, ни тега <col>.

Горизонтальное выравнивание текста в определенном столбце таблицы можно изменить, указав стиль text-align для псевдокласса td:nth-child(n), где n – номер столбца.

Пример
<style type="text/css">
    table {
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #000;
        padding: 5px;
    }
    td:nth-child(2) {
        text-align: right;
    }
</style>
<table>
    <tr>
        <th>Наименование</th>
        <th>Цена (руб.)</th>
    </tr>
    <tr>
        <td>Поминутная оплата солярия (от 4 минут)</td><td>15</td>
    </tr>
    <tr>
        <td>50 минут солярия (14 руб/мин, 1 мес.)</td><td>700</td>
    </tr>
    <tr>
        <td>100 минут солярия (13 руб/мин, 2 мес.)</td><td>1300</td>
    </tr>
    <tr>
        <td>200 минут солярия (12 руб/мин, 3 мес.)</td><td>2400</td>
    </tr>
</table>

РЕЗУЛЬТАТ:

Наименование Цена (руб.)
Поминутная оплата солярия (от 4 минут)15
50 минут солярия (14 руб/мин, 1 мес.)700
100 минут солярия (13 руб/мин, 2 мес.)1300
200 минут солярия (12 руб/мин, 3 мес.)2400

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

Если Вас интересуют атрибуты тегов html-таблиц, смотрите Таблицы в HTML4 и ниже


Читать дальше: Фреймы в HTML


.