Таблицы 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>

Атрибуты тегов <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>

Теги группирования строк 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>

Теги группирования столбцов 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 для псевдокласса 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>

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

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