Как сделать таблицу в HTML? Атрибуты colspan, rowspan и другие.

ВИДЕОКУРС HTML. УРОК 44.

Рубрикатор статьи

В этом видео уроке мы начнем изучение нового интересного раздела, но сначала давайте вспомним, о чем мы говорили в прошлом видео.

В прошлый раз мы закончили изучение раздела по HTML-формам. В видео уроке мы поговорили про обработчик данных формы, с помощью которого научились собирать данные и отправлять их на наш E-mail.

Ну а сейчас приступим к изучению еще одного раздела, который посвящен таблицам. Таблицы в HTML играют далеко не последнюю роль, и бывает, что необходимо создать таблицу для публикации табличных данных. Но сразу начинают возникать вопросы, как это сделать и какие параметры можно использовать? Именно об этом мы и поговорим. Узнаем, как сделать таблицу в HTML? Изучим все атрибуты таблиц, атрибуты строк в таблице и атрибуты ячеек таблицы. Поговорим о двух, пожалуй, самых популярных атрибутах и в тоже время зачастую самых непонятных, это colspan и rowspan.

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

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

Как сделать таблицу в HTML? Атрибуты colspan, rowspan и другие.

Как сделать таблицу в HTML? Теги HTML-таблицы.

Начнем естественно с самого начала. С создания HTML-таблицы. Вообще для создания таблицы используется три основных HTML-тега, это <table>, <tr> и <td>.

HTML-тег <table> создает контейнер таблицы, в котором находятся строки и ячейки, а также сами данные, например текст.

HTML-тег <tr> создает строку в таблице.

И HTML-тег <td> создает ячейку таблицу, в которую непосредственно будут добавлены табличные данные, например текст.

Пример HTML-кода для создания простой HTML-таблицы (В примере создается таблица с использованием трех строк и трех колонок):

<table border="1">
<tr><td>Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td></tr>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

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

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

Теперь мы знаем, как сделать таблицу в HTML. А значит можно поговорить о параметрах, которые можно указывать для таблиц. Здесь стоит отметить, что параметры мы можем указывать, как для тега <table> отдельно, так и для тегов <tr> и <td>.

Начнем с HTML-тега <table> и рассмотрим основные HTML-атрибуты, которые мы можем использовать, чтобы сделать таблицу удобнее.

Ширина таблицы в HTML.

Довольно популярный вопрос, связанный с таблицами это как указать ширину таблицы? На самом деле все довольно просто. Для указания ширины таблицы используется параметр width, как и для указания ширины для любых других элементов в HTML:

<table width="800" border="1">
<tr><td>Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td></tr>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

Здесь стоит напомнить, что в значении параметра width необходимо указать любое целое число. И не забудьте о том, что указываете количество пикселей. В нашем случае ширина будет равна 800 пикселей.

Отступы таблицы в HTML.

Еще один популярный вопрос касается указания отступов в таблице. Для указания отступов необходимо использовать два атрибута.

Для указания внутренних отступов (отступ текста от края ячейки) мы должны использовать атрибут cellpadding.

А для указания внешних отступов (отступ ячеек от границ таблицы и друг от друга) мы должны использовать атрибут cellspacing.

Мы не будем рассматривать отдельные примеры для каждого атрибута, а просто рассмотрим один пример, в котором укажем и внутренние отступы таблицы и внешние:

<table  width="800" cellspacing="10" cellpadding="10" border="1">
<tr><td>Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td></tr>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

В этом примере мы указываем, что внешние и внутренние отступы таблицы будут равны 10 пикселям.

И рассмотрим еще пару примеров, в которых поговорим о выравнивании информации внутри ячеек и строк.

Горизонтальное выравнивание в HTML-таблице.

Для того чтобы выровнять текст внутри ячеек справа, слева или по центру достаточно воспользоваться атрибутом align. Но здесь стоит быть внимательным, так как этот атрибут мы можем применить как ко всей строке и выровнять текст с одной стороны ячейки во всей строке, так и отдельно для каждой ячейки.

В примере мы рассмотрим горизонтальное выравнивание текста во ВСЕЙ первой строке, и горизонтальное выравнивание во второй строке, но выровняем только первую ячейку второй строки. В первом случае выровняем текст по центру, а во втором справа:

<table  width="800" cellspacing="10" cellpadding="10" border="1">
<tr align="center"><td>Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td></tr>
<tr><td align="right">Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

Также стоит помнить, что по умолчанию текст выравнивается слева.

Вертикальное выравнивание в HTML-таблице.

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

<table width="800" cellspacing="10" cellpadding="10" border="1">
<tr height="150" valign="top"><td>Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td></tr>
<tr  height="150"><td valign="bottom">Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

Здесь также стоит отметить, что была добавлена высота (heightуниверсальный HTML-атрибут) для двух первых строк, чтобы мы смогли увидеть работу атрибута valign.

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

Но я не могу не вспомнить еще два атрибута, с которыми очень часто могут возникать проблемы и недопонимание. Для того что их рассмотреть мы не будем использовать параметры строк и ячеек, о которых говорили выше так как они будут мешать. Оставим только атрибуты для тега <table>.

Colspan.

Теперь погорим об объединении ячеек между собой. Для начала рассмотри атрибут colspan, который позволит нам объединять ячейки по горизонтали между собой.

Здесь стоит помнить, что данный атрибут применяется только к тегу <td>. Кроме того если применять атрибут так как он есть, мы увидим не только объединение ячеек, но и проблемы вытекающие отсюда. Например, если применить атрибут colspan как есть, например, к первой ячейке первой строки, мы объединим первую и вторую ячейку первой строки между собой. При этом первые и вторые ячейки второй и третей строки останутся на своих местах. Но при этом последняя (третья) ячейка первой строки будет выброшена, как бы за пределы. НЕ правильный пример:

<table width="800" cellspacing="10" cellpadding="10" border="1">
<tr><td colspan="2">Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td></tr>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

В этом случае следует учитывать, что при объединении ячеек горизонтально в строке, в которой происходит объединение должно быть меньше ячеек. Например, если мы объединим две ячейки, как в нашем случае, то одну (последнюю) ячейку необходимо удалить. Или добавить по одной ячейке для остальных строк. В примере мы просто удалим лишнюю ячейку первой строки. Правильный пример:

<table width="800" cellspacing="10" cellpadding="10" border="1">
<tr><td colspan="2">Ячейка 1-1</td><td>Ячейка 1-2</td></tr>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

Именно из-за этих особенностей использование этих атрибутов вызывает много проблем и вопросов, особенно у новичков. Но если быть внимательным все должно получиться. Главное понять, как это работает.

Rowspan.

Rowspan также позволяет объединять ячейки между собой. Но объединение происходит по вертикали. Как если бы мы объединяли строки, а не ячейки.

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

<table width="800" cellspacing="10" cellpadding="10" border="1">
<tr><td rowspan="2">Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td></tr>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

Эта проблема также решается удалением лишней ячейки или добавлением новых. Но здесь стоит учитывать, что при объединении двух ячеек, как в нашем случае происходит следующее: Все ячейки из первой строки остаются на местах. А во второй строке первая ячейка первой строки занимает место первой ячейки второй строки, из-за чего происходит сдвиг всех ячеек в сторону. И при этом последняя ячейка второй строки получается как бы лишней. Ну а самый простой вариант избавиться от проблемы удалить лишнюю ячейку. Правильный пример:

<table width="800" cellspacing="10" cellpadding="10" border="1">
<tr><td rowspan="2">Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td></tr>
<tr><td>Ячейка 2-1</td><td>Ячейка 2-2</td></tr>
<tr><td>Ячейка 3-1</td><td>Ячейка 3-2</td><td>Ячейка 3-3</td></tr>
</table>

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

Видео урок: Как сделать таблицу в HTML? Атрибуты colspan, rowspan и другие.

HTML-справочник и другие материалы можно и нужно скачать здесь!

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

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 0.0/10 (0 голосов)
Автор: Михаил Веб Дата публикации: 17.06.2014