Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее
Eltisbook > HTML учебник > Таблицы в HTML

Таблицы в HTML

«Таблицы HTML» – седьмой урок учебника HTML. В этом уроке мы поговорим об очень важной вещи, а именно – об использовании таблиц в HTML.

Использование таблиц в html разметке гипертекстовых документов играет очень важную роль, т. к. открывает почти безграничные возможности в позиционировании элементов.

Таблицы являются незаменимым инструментом структурирования информации.

Создание таблиц.

Для создания таблицы html используется контейнер <table></table>. Для создания строк служит тег <tr> ,а для столбцов – <td>. Давайте создадим простую таблицу, состоящую из 3х строк и 3х столбцов.

<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Ячейки таблицы без содержимого в большинстве браузеров могут выводиться некорректно, поэтому внутри каждого столбца я помещаю символ неразрывного пробела &nbsp. Если не помните, то можете прочитать про символьные элементы разметки.

Атрибуты таблиц в HTML.

У таблиц в HTML существуют следующие атрибуты:

Форматирование таблиц.

Придание таблицам надлежащего внешнего вида является ключевым моментом при создании каркаса страницы, основанного на табличном методе. Ничего сложного в форматировании таблиц нет. Далее я приведу пример, в котором использую основные методы форматирования таблиц:

Объединение 2х ячеек по горизонтали, цвет фона красный Объединение 3х ячеек по вертикали и выравнивание по верху, цвет фона синий
Выравнивание по низу и цвет рамки синий
Выравнивание по верху и цвет рамки белый, цвет фона белый
Объединение 2х ячеек по горизонтали выравнивание по низу и цвет рамки синий

<table width=»358″ height=»452″ border=»1″ align=»right» bordercolor=»#FF0000″>
<tr>
<td height=»107″ colspan=»2″ class=»text» bgcolor=»#FF0000″> </td>

<td width=»37″ class=»text»>&nbsp;</td>
<td width=»111″ rowspan=»3″ valign=»top» class=»text» bgcolor=»#0000FF»> </td>
</tr>
<tr >
<td width=»69″ height=»169″ class=»text»>&nbsp;</td>
<td width=»113″ valign=»bottom» bordercolor=»#0000FF» class=»text»> </td>
<td class=»text»>&nbsp;</td>

</tr>
<tr>
<td height=»102″ class=»text»>&nbsp;</td>
<td valign=»top» bordercolor=»#FFFFFF»
class=»text» bgcolor=»#FFFFFF»> </td>
<td class=»text»>&nbsp;</td>

</tr>
<tr>
<td height=»60″ class=»text»>&nbsp;</td>
<td colspan=»2″ valign=»bottom»
bordercolor=»#0000FF» class=»text»> </td>

<td class=»text»>&nbsp;</td>
</tr>
</table>

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


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

В следующий раз речь пойдет о создании и использовании списков HTML.