Основы HTML. Урок №5. Таблицы, сопутствующие теги и атрибуты.

И это пятый урок по изучению основ языка HTML, в котором речь пойдет о создании таблиц.

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

Как вы уже возможно знаете, основным тегом для построения таблиц служит тег <table></table>, это парный тег и внутрь его помещаются другие теги информация.

Следующий уровень это строчка таблицы (tablerow/ряд таблицы), как уже можно понять это тоже парный тег <tr></tr>.

И последний, но не маловажный тег ячейки, как я его называю, в переводе же tabledata/табличные данные, так же является парным <td></td> и именно внутрь этого тега помещается текст, картинки или какая другая информация.

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

<table border="1">
<tr>
<td>Левая верхняя ячейка</td>
<td>Правая верхняя ячейка</td>
</tr>
<tr>
<td>Левая нижняя ячейка</td>
<td>Правая нижняя ячейка</td>
</tr>
</table>

Пример:

Вроде все понятно, если нет, то вернитесь в начало статьи и перечитайте мною написанное.

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

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

У тега <td> есть для этой цели два замечательных атрибута (Перейти к статье №4. Что такое атрибуты?) colspan="" и rowspan="", которые принимаю как значение кол-во ячеек.

Теперь разберемся по порядку colspan="" говорит браузеру сколько начиная с этой ячейки, двигаясь с лева на право ячеек нужно объединить, следует убирать не нужные ячейки(теги <td></td>), чтобы таблица не рушилась и сразу же горячий пример…

<table border="1">
<tr>
<td colspan="2">Верхняя ячейка, состоящая из двух объединённых верхних</td>
</tr>
<tr>
<td>Левая нижняя ячейка</td>
<td>Правая нижняя ячейка</td>
</tr>
</table>

Пример:

Неправильный пример:

<table border="1">
<tr>
<td colspan="2">Верхняя ячейка, состоящая из двух объединённых верхних</td>
<td>Побочная ячейка</td>
</tr>
<tr>
<td>Левая нижняя ячейка</td>
<td>Правая нижняя ячейка</td>
</tr>
</table>

Атрибут rowspan="" объединяет ячейки по вертикали, не буду заставлять ждать и сразу же пример

<table border="1">
<tr>
<td rowspan="2">Верхняя ячейка, состоящая из двух объединённых левых</td>
<td>Правая верхняя ячейка</td>
</tr>
<tr>
<td>Правая нижняя ячейка</td>
</tr>
</table>

Пример:

Здесь так же следует удалять побочные ячейки, если не хотите, чтобы ваша таблица «поехала».

Есть еще очень много различных атрибутов, но о них я не буду рассказывать вам в этой статье. Рад был поделиться знанием, следите за выпуском новых статей.