Чат веб-разработчиков
Как объединить ячейки в таблице HTML

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

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

Когда вы решаете аналогичные задачи в каком-нибудь текстовом редакторе, например, наиболее распространенном – Word, то он практически все делает сам, достаточно лишь нажать соответствующую кнопку. Но если говорить про решение этой задачи в HTML, то здесь все иначе. И если вы будете внимательным, то задача не будет казаться такой уж непосильной.

Объединение ячеек в строках

В первую очередь расскажем, как объединить строки в таблице в HTML. В этом поможет атрибут colspan, который работает с такими тегами, как <th> и <td>.

Например, вы приписываете данному атрибуту значение 2. В результате этого ячейка, к которой относится тег, увеличивается в горизонтальном направлении ровно в 2 раза, вытесняя соседнюю. Но вытесненная ячейка никуда не уходит, она присутствует в таблице, только в совершенно новом столбце, который необходимо убрать.

Давайте попрактикуемся, как это делается. Итак, начнем. Попробуем создать таблицу следующего вида:
Таблица с объединением ячеек по горизонтали

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

Код доступен только после покупки курса HTML для начинающих.

Вот и всё! Совсем ничего страшного!

Объединение ячеек в столбцах

В вертикальном направлении ячейки объединять немногим сложнее, нежели в горизонтальном. Эта задача решается с помощью атрибута rowspan, который приписывается тегам <td> или <th>.

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

Давайте теперь создадим следующую таблицу:
Таблица с объединением ячеек по вертикали

Подумаем, что нам нужно сделать. Нам нужно добавить ячейку, которая занимает по вертикали места в 2 раза больше, чем простая. затем добавить в этой же строке две простых ячейки.
Переходим на следующую строку. Здесь у нас сразу уже занятое место ячейкой сверху. Переходим в следующую секцию и видим, что нам в этой строке остаётся только добавить две простых ячейки. Переносим в код:

Код доступен только после покупки курса HTML для начинающих.

Опять-таки, ничего сложного.

Одновременное объединение по вертикали и горизонтали в одной таблице

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

Таблица с объединением столбцов и строк

Что? Читаешь дальше, даже не попытавшись? А ну давай пробуй, слабак!

Если всё же не получилось, то вот ответ:

Код доступен только после покупки курса HTML для начинающих.
Читайте также
Комментарии


olezhqka@gmail.com
olezhqka@gmail.com

Здравствуйте! Спасибо большое за создание этого курса. Очень помогает разобраться что к чему и запоминать порядок кодов. Я хотел бы узнать как вы установили текст: "Налоговая ставка" по средине строчке или я возможно что-то пропустил?

ivashkevich
ivashkevich

Приветствую! Спасибо, рад слышать :)
Про выравнивание узнаете в следущем уроке.

ImmortalPsych
ImmortalPsych

А вот домашка

<!DOCTYPE=html>
<head>
    <meta charset="utf-8">
    <title>Табличка</title>
    <style>
        table {border: solid 2px blue;
               border-collapse: collapse;}
        td, th {border: solid 2px blue;
                padding: 11px;}
    </style>
</head>
<body>
<table>
    <tr> <td rowspan="2" colspan="2">1</td> <td>2</td> </tr>
    <tr> <td>3</td> </tr>
    <tr>  <td>4</td> <td>5</td> <td>6</td> </tr>
</table>
</body>
</html>
Dilik
Dilik
<hr>
<table>
    <tr>
        <td rowspan="2" colspan="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td> 
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
ivashkevich
ivashkevich

Отлично! =)

alsvis2013
alsvis2013

Всё, разобрался, спасибо!

nordlund_nasty@mail.ru
nordlund_nasty@mail.ru

в целом алгоритм был понятен, но почему-то вообще долго ничего не показывал на экране. перепроверяла все двадцать раз, в итоге обнаружила, что в строке </style> забыла поставить вот это >, и из-за этого ничего не работало. но в итоге ошибку устранила, все получилось ))

<! DOCTYPE=html>
<html>
<head>
<meta charset="UTF-8">
<title> практика </title>
<style>
table {
border: solid 2px black;
border-collapse: collapse;
}
td, tr {
border: solid 2px black;
padding: 11px;
}
</style>
</head>
<body>
<table>
<caption> <pre> еще одна таблица</caption>
<tr> <td rowspan="2" colspan="2">1</td> <td>2</td> </tr>
<tr> <td>3</td> </tr>
<tr> <td>4</td> <td>5</td> <td>6</td> </tr>
</table>
</body>
</html>
ivashkevich
ivashkevich

Бывает) Поставьте PHPStorm - он будет подчеркивать такие ошибки.