Как сделать таблицу в HTML? Атрибуты colspan, rowspan и другие.
В этом видео уроке мы начнем изучение нового интересного раздела, но сначала давайте вспомним, о чем мы говорили в прошлом видео.
В прошлый раз мы закончили изучение раздела по HTML-формам. В видео уроке мы поговорили про обработчик данных формы, с помощью которого научились собирать данные и отправлять их на наш E-mail.
Ну а сейчас приступим к изучению еще одного раздела, который посвящен таблицам. Таблицы в HTML играют далеко не последнюю роль, и бывает, что необходимо создать таблицу для публикации табличных данных. Но сразу начинают возникать вопросы, как это сделать и какие параметры можно использовать? Именно об этом мы и поговорим. Узнаем, как сделать таблицу в HTML? Изучим все атрибуты таблиц, атрибуты строк в таблице и атрибуты ячеек таблицы. Поговорим о двух, пожалуй, самых популярных атрибутах и в тоже время зачастую самых непонятных, это colspan и rowspan.
Кроме того, если говорить о важности таблиц в HTML, можно вспомнить, что раньше многие сайты использовали именно табличную верстку. Что говорит о том, что таблицы знать необходимо. Однако теперь сайты проще и правильнее верстать с использование блочной верстки. Но таблицы не потеряли своей значимости благодаря тому, что это самый удобный способ публикации табличных данных.
Как сделать таблицу в HTML? Теги HTML-таблицы.
Начнем естественно с самого начала. С создания HTML-таблицы. Вообще для создания таблицы используется три основных HTML-тега, это <table>, <tr> и <td>.
HTML-тег <table> создает контейнер таблицы, в котором находятся строки и ячейки, а также сами данные, например текст.
HTML-тег <tr> создает строку в таблице.
И HTML-тег <td> создает ячейку таблицу, в которую непосредственно будут добавлены табличные данные, например текст.
Пример HTML-кода для создания простой HTML-таблицы (В примере создается таблица с использованием трех строк и трех колонок):
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Как Вы можете видеть все довольно просто. Однако при создании таблицы необходимо быть предельно собранным и внимательным, чтобы ничего не перепутать. Потому что выявить проблему в довольно однообразном HTML-коде довольно сложно.
Также стоит отметить, что я сразу указал атрибут border, который нужен для отображения границ таблицы. В этом случае указана ширина границы в один пиксель.
Теперь мы знаем, как сделать таблицу в HTML. А значит можно поговорить о параметрах, которые можно указывать для таблиц. Здесь стоит отметить, что параметры мы можем указывать, как для тега <tr> и <td>.
Начнем с HTML-тега <table> и рассмотрим основные HTML-атрибуты, которые мы можем использовать, чтобы сделать таблицу удобнее.
Ширина таблицы в HTML.
Довольно популярный вопрос, связанный с таблицами это как указать ширину таблицы? На самом деле все довольно просто. Для указания ширины таблицы используется параметр width, как и для указания ширины для любых других элементов в HTML:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Здесь стоит напомнить, что в значении параметра width необходимо указать любое целое число. И не забудьте о том, что указываете количество пикселей. В нашем случае ширина будет равна 800 пикселей.
Отступы таблицы в HTML.
Еще один популярный вопрос касается указания отступов в таблице. Для указания отступов необходимо использовать два атрибута.
Для указания внутренних отступов (отступ текста от края ячейки) мы должны использовать атрибут cellpadding.
А для указания внешних отступов (отступ ячеек от границ таблицы и друг от друга) мы должны использовать атрибут cellspacing.
Мы не будем рассматривать отдельные примеры для каждого атрибута, а просто рассмотрим один пример, в котором укажем и внутренние отступы таблицы и внешние:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-2 | Ячейка 3-3 |
В этом примере мы указываем, что внешние и внутренние отступы таблицы будут равны 10 пикселям.
И рассмотрим еще пару примеров, в которых поговорим о выравнивании информации внутри ячеек и строк.
Горизонтальное выравнивание в HTML-таблице.
Для того чтобы выровнять текст внутри ячеек справа, слева или по центру достаточно воспользоваться атрибутом align. Но здесь стоит быть внимательным, так как этот атрибут мы можем применить как ко всей строке и выровнять текст с одной стороны ячейки во всей строке, так и отдельно для каждой ячейки.
В примере мы рассмотрим горизонтальное выравнивание текста во ВСЕЙ первой строке, и горизонтальное выравнивание во второй строке, но выровняем только первую ячейку второй строки. В первом случае выровняем текст по центру, а во втором справа:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Также стоит помнить, что по умолчанию текст выравнивается слева.
Вертикальное выравнивание в HTML-таблице.
Что касается вертикального выравнивания в таблице, то здесь все также как и при использовании горизонтального, только выравниваться все будет по вертикали и использоваться будет атрибут valign. В примере мы также выровняем всю первую строку по верхнему краю, а во второй строке выровняем только первую ячейку по нижнему краю:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Здесь также стоит отметить, что была добавлена высота (height — универсальный HTML-атрибут) для двух первых строк, чтобы мы смогли увидеть работу атрибута valign.
Конечно же, это не все атрибуты, которые мы можем применять к таблицам. Остальные параметры Вы сможете увидеть в видео уроке.
Но я не могу не вспомнить еще два атрибута, с которыми очень часто могут возникать проблемы и недопонимание. Для того что их рассмотреть мы не будем использовать параметры строк и ячеек, о которых говорили выше так как они будут мешать. Оставим только атрибуты для тега <table>.
Colspan.
Теперь погорим об объединении ячеек между собой. Для начала рассмотри атрибут colspan, который позволит нам объединять ячейки по горизонтали между собой.
Здесь стоит помнить, что данный атрибут применяется только к тегу <td>. Кроме того если применять атрибут так как он есть, мы увидим не только объединение ячеек, но и проблемы вытекающие отсюда. Например, если применить атрибут colspan как есть, например, к первой ячейке первой строки, мы объединим первую и вторую ячейку первой строки между собой. При этом первые и вторые ячейки второй и третей строки останутся на своих местах. Но при этом последняя (третья) ячейка первой строки будет выброшена, как бы за пределы. НЕ правильный пример:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 | |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 | |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 | |
В этом случае следует учитывать, что при объединении ячеек горизонтально в строке, в которой происходит объединение должно быть меньше ячеек. Например, если мы объединим две ячейки, как в нашем случае, то одну (последнюю) ячейку необходимо удалить. Или добавить по одной ячейке для остальных строк. В примере мы просто удалим лишнюю ячейку первой строки. Правильный пример:
| Ячейка 1-1 | Ячейка 1-2 | |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Именно из-за этих особенностей использование этих атрибутов вызывает много проблем и вопросов, особенно у новичков. Но если быть внимательным все должно получиться. Главное понять, как это работает.
Rowspan.
Rowspan также позволяет объединять ячейки между собой. Но объединение происходит по вертикали. Как если бы мы объединяли строки, а не ячейки.
В этом случае также возникают проблемы с лишней ячейкой, которую выбрасывает за пределы. Если мы применим атрибут, как есть для первой ячейки первой строки, тогда за пределы будет выброшена третья ячейка второй строки. Неправильный пример:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Эта проблема также решается удалением лишней ячейки или добавлением новых. Но здесь стоит учитывать, что при объединении двух ячеек, как в нашем случае происходит следующее: Все ячейки из первой строки остаются на местах. А во второй строке первая ячейка первой строки занимает место первой ячейки второй строки, из-за чего происходит сдвиг всех ячеек в сторону. И при этом последняя ячейка второй строки получается как бы лишней. Ну а самый простой вариант избавиться от проблемы удалить лишнюю ячейку. Правильный пример:
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | |
| Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
Также стоит учесть, что удаление вовсе необязательно, если правильно все рассчитать перед созданием таблицы.
Видео урок: Как сделать таблицу в HTML? Атрибуты colspan, rowspan и другие.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующем видео уроке мы познакомимся с еще одним тегом, который позволит добавить заголовок (подпись) для HTML-таблицы.
Атрибут rowspan | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 1.
Рис. 1. Пример таблицы, где используется вертикальное объединение ячеек
В приведенной на рис. 1 таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью атрибута rowspan.
Синтаксис
<th rowspan="число">...</th>Значения
Любое целое положительное число больше 1.
Значение по умолчанию
1
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TH, атрибут rowspan</title>
</head>
<body>
<table border="1" align="center"
cellpadding="4" cellspacing="0">
<tr>
<th rowspan="2" bgcolor="#FBF0DB">ячейка 1</th>
<td>ячейка 2</td>
</tr>
<tr>
<td>ячейка 3</td>
</tr>
</table>
</body>
</html>Атрибут rowspan - объединение рядов таблицы
Атрибут rowspan управляет объединением рядов в HTML таблице. Применяется к тегам th и td.
Принимаемое значение: целое число начиная с 1.
Как пользоваться: добавляем данный атрибут к любой ячейке td или th. Если, к примеру, задать rowspan в значение 2 - то ячейка, которой это задали, займет два ряда по высоте таблицы. При этом ячейки из ряда ниже никуда не денутся, наша расширившаяся ячейка их вытеснит и таблица развалится. Чтобы этого не произошло, нужно удалить одну из ячеек из ряда ниже. Смотрите примеры для лучшего понимания.
Пример . Таблица без объединений
Давайте посмотрим таблицу без объединений, с которой мы будем работать дальше:
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</table> table, td, th {
border: 1px solid black;
}
:
Пример . Расширим Ячейку1 на два ряда
А теперь давайте расширим Ячейку1 на два ряда, задав ей атрибут rowspan в значении 2. Мы увидим, что она вытесняет ячейки из ряда под ней и таблица разваливается:
<table>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</table> table, td, th {
border: 1px solid black;
}
:
Пример . Расширим Ячейку1 на два ряда без разваливания таблицы
Чтобы поправить проблему с разваливанием таблицы из предыдущего примера, давайте попробуем удалить одну из ячеек из второго ряда (и это не обязательно Ячейка4, которая находится непосредственно под нашей Ячейкой1, можно удалять любую, мы удалим ячейку с номером 5):
<table>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</table> table, td, th {
border: 1px solid black;
}
:
Пример . Расширим Ячейку1 на 3 ряда без разваливания таблицы
А здесь давайте расширим нашу ячейку не на два ряда, а на 3, зададим ей rowspan в значении 3. При этом удалим одну из ячеек из третьего ряда (ячейку 7, 8 или 9 - без разницы), чтобы таблица не развалилась:
<table>
<tr>
<td rowspan="3">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 9</td>
</tr>
</table> table, td, th {
border: 1px solid black;
}
:
Пример . Расширим еще и Ячейку2 на 2 столбца
Давайте расширим еще и Ячейку2 на 2 столбца в дополнение к первой ячейке. Для этого Ячейке2 добавляем colspan в значении 2. При этом удалим Ячейку3, чтобы таблица не развалилась:
<table>
<tr>
<td rowspan="3">Ячейка 1</td>
<td colspan="2">Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 9</td>
</tr>
</table> table, td, th {
border: 1px solid black;
}
:
Смотрите также
- атрибут colspan,
который объединяет столбцы таблицы
Как вы используете colspan и rowspan в таблицах HTML?
если вы путаете, как работают макеты таблиц, они в основном начинаются с x=0, y=0 и работают через них. Давайте объясним с графикой, потому что они так весело!
когда вы начинаете таблицу, вы делаете сетку. Ваша первая строка и ячейка будут находиться в верхнем левом углу. Думайте об этом как о указателе массива, перемещающемся вправо с каждым увеличенным значением x и перемещающимся вниз с каждым увеличенным значением y.
для первой строки вы определяете только две ячейки. Один охватывает 2 строки вниз и один охватывает 4 столбца поперек. Поэтому, когда Вы дойдете до конца первого ряда, это выглядит примерно так:
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
</table>
теперь, когда строка закончилась, "указатель массива" переходит к следующей строке. Поскольку позиция x 0 уже занята предыдущей ячейкой, x переходит в позицию 1, чтобы начать заполнение ячеек. * см. примечание о разнице между диапазонами строк.
эта строка имеет четыре ячейки, в которые все 1х1 блоки, заполняющие одинаковую ширину ряда над ним.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
следующая строка - это все ячейки 1x1. Но, например, что делать, если вы добавили дополнительную ячейку? Ну, он просто выскочит с края справа.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
* но что, если мы вместо этого (вместо добавления дополнительной ячейки) сделали все эти ячейки имеют диапазон строк 2? То, что вам нужно рассмотреть здесь, это то, что даже если вы не собираетесь быть добавляя еще несколько ячеек в следующую строку, строка все равно должна существовать (даже если это пустая строка). Если вы попытаетесь добавить новые ячейки в строку сразу после этого, вы заметите, что он начнет добавлять их в конец нижней строки.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
наслаждайтесь прекрасным миром создания таблиц!