В этом видео уроке мы начнем изучение нового интересного раздела, но сначала давайте вспомним, о чем мы говорили в прошлом видео.
В прошлый раз мы закончили изучение раздела по 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. А значит можно поговорить о параметрах, которые можно указывать для таблиц. Здесь стоит отметить, что параметры мы можем указывать, как для тега <table>
отдельно, так и для тегов <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-1 | Ячейка 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-таблицы.