Ячейки, строки и столбцы таблиц в HTML. Как осуществить их объединение?

ячейки, строки и столбцы таблиц в html. как осуществить их объединение?

Использование строк и ячеек таблицы

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

Создать строку таблицы можно лишь одним способом. Для этого используется элемент <tr>. Между его открывающим и закрывающим тегом должны располагаться ячейки. HTML позволяет создавать ячейки двух видов: заголовочные и обычные.

Заголовочные ячейки, как правило, используются в самой первой строке для краткой характеристики содержимого столбцов. Они создаются с помощью элемента <th>. Браузеры применяют к заголовочным ячейкам таблицы специфичные стили отображения. Текст, помещенный внутри них, будет выровнен по центру и отобразиться с жирным начертанием шрифта.

Обычные ячейки задаются элементом <td>. Их использование полностью аналогично заголовочным. Они имеют одинаковое поведение и наборы атрибутов. Единственное отличие в том, что к обычным ячейкам браузеры не применяют специфичной стилизации.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания ячеек и строк</title>
    </head>
    <body>
        <h3>Учебное расписание:</h3>
        <table>
            <tr>
                <th>Предмет</th>
                <th>Аудитория</th>
                <th>Время</th>
            </tr>
            <tr>
                <td>Менеджмент</td>
                <td>238</td>
                <td>12:00</td>
            </tr>
            <tr>
                <td>Экономика</td>
                <td>458</td>
                <td>14:00</td>
            </tr>
            <tr>
                <td>Основы права</td>
                <td>310</td>
                <td>16:00</td>
            </tr>
        </table>
    </body>
</html>

Заметка
Стандарт HTML5 запрещает использование атрибутов таблиц, ячеек и строк. Допустимы только атрибуты colspan и rowspan элементов <td> и <th>, о которых мы расскажем далее в статье.

Запрещенные атрибуты влияют только на внешнее оформление элементов таблиц. Поэтому для их замены гораздо удобнее использовать CSS.

Объединение ячеек таблицы

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

Если какая-то строка имеет меньшее количество ячеек, вместо недостающих будут показаны пустые места. Это поведение можно исправить с помощью атрибута colspan элементов <td> и <th>, который в своем значении должен содержать число. Оно явным образом указывает браузеру, сколько столбцов занимает данная ячейка таблицы.

Действие атрибута colspan также называют объединением ячеек. Оно происходит с лева направо от текущей позиции ячейки. Значение "2" атрибута colspan скажет браузеру, что данная ячейка занимает два столбца (свой и тот, что справа).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример объединения ячеек по горизонтали</title>
    </head>
    <body>
        <table>
            <tr>
                <th>Наименование товара</th>
                <th colspan="2">Цены</th>
            </tr>
            <tr>
                <td>Молоко</td>
                <td>72руб.</td>
                <td>56руб.</td>
            </tr>
            <tr>
                <td>Сыр</td>
                <td>450руб.</td>
                <td>380руб.</td>
            </tr>
            <tr>
                <td>Сметана</td>
                <td>55руб.</td>
                <td>45рубю</td>
            </tr>
        </table>
    </body>
</html>

Также HTML позволяет объединять ячейки по вертикали. Каждая ячейка может объединяться с той, что лежит под ней в другой строке. Для этого нужно использовать атрибут rowspan элементов <td> и <th>. Его действие аналогично объединению по горизонтали. Значение "2" атрибута rowspan скажет браузеру, что данная ячейка занимает две строки (свою и ту, что снизу).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Объединение ячеек по вертикали и горизонтали</title>
    </head>
    <body>
        <table>
            <tr>
                <th rowspan="2">Наименование товара</th>
                <th colspan="2">Цены</th>
            </tr>
            <tr>
                <th>Розница</th>
                <th>Опт</th>
            </tr>
            <tr>
                <td>Молоко</td>
                <td>72руб.</td>
                <td>56руб.</td>
            </tr>
            <tr>
                <td>Сыр</td>
                <td>450руб.</td>
                <td>380руб.</td>
            </tr>
            <tr>
                <td>Сметана</td>
                <td>55руб.</td>
                <td>45руб.</td>
            </tr>
        </table>
    </body>
</html>

Последние публикации