И это пятый урок по изучению основ языка HTML, в котором речь пойдет о создании таблиц.
Построение таблиц на первый взгляд может показаться довольно сложным, но если приложить немного усилий, разобраться в структуре кода, то никаких проблем эта тема у вас не вызовет.
Как вы уже возможно знаете, основным тегом для построения таблиц служит тег <table></table>, это парный тег и внутрь его помещаются другие теги информация.
Следующий уровень это строчка таблицы (tablerow/ряд таблицы), как уже можно понять это тоже парный тег <tr></tr>.
И последний, но не маловажный тег ячейки, как я его называю, в переводе же tabledata/табличные данные, так же является парным <td></td> и именно внутрь этого тега помещается текст, картинки или какая другая информация.
Теперь, узнав о самых значительных тегах таблицы, приведу простенький пример, который приводят во всех уроках:
Пример:
Левая верхняя ячейка | Правая верхняя ячейка |
Левая нижняя ячейка | Правая нижняя ячейка |
Вроде все понятно, если нет, то вернитесь в начало статьи и перечитайте мною написанное.
Идем дальше, подобным образом можно делать любые таблицы, с любым кол-вом ячеек, главное чтобы они помещались в размеры страницы.
Но как делать таблицы с шапкой или с объединением каких-то ячеек, тут с пониманием так же могут возникнуть проблемы.
У тега <td> есть для этой цели два замечательных атрибута (Перейти к статье №4. Что такое атрибуты?) colspan="" и rowspan="", которые принимаю как значение кол-во ячеек.
Теперь разберемся по порядку colspan="" говорит браузеру сколько начиная с этой ячейки, двигаясь с лева на право ячеек нужно объединить, следует убирать не нужные ячейки(теги <td></td>), чтобы таблица не рушилась и сразу же горячий пример…
Пример:
Верхняя ячейка, состоящая из двух объединённых верхних | |
Левая нижняя ячейка | Правая нижняя ячейка |
Неправильный пример:
Верхняя ячейка, состоящая из двух объединённых верхних | Побочная ячейка | |
Левая нижняя ячейка | Правая нижняя ячейка |
Атрибут rowspan="" объединяет ячейки по вертикали, не буду заставлять ждать и сразу же пример
Пример:
Левая ячейка, состоящая из двух объединённых левых | Правая верхняя ячейка |
Правая нижняя ячейка |
Здесь так же следует удалять побочные ячейки, если не хотите, чтобы ваша таблица «поехала».
Есть еще очень много различных атрибутов, но о них я не буду рассказывать вам в этой статье. Рад был поделиться знанием, следите за выпуском новых статей.
Добавить комментарий
Авторизоваться с помощью: