Таблицы в HTML
«Таблицы HTML» – седьмой урок учебника HTML. В этом уроке мы поговорим об очень важной вещи, а именно – об использовании таблиц в HTML.
Использование таблиц в html разметке гипертекстовых документов играет очень важную роль, т. к. открывает почти безграничные возможности в позиционировании элементов.
Таблицы являются незаменимым инструментом структурирования информации.
Создание таблиц.
Для создания таблицы html используется контейнер <table>…</table>. Для создания строк служит тег <tr> ,а для столбцов – <td>. Давайте создадим простую таблицу, состоящую из 3х строк и 3х столбцов.
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Ячейки таблицы без содержимого в большинстве браузеров могут выводиться некорректно, поэтому внутри каждого столбца я помещаю символ неразрывного пробела  . Если не помните, то можете прочитать про символьные элементы разметки.
Атрибуты таблиц в HTML.
У таблиц в HTML существуют следующие атрибуты:
- align – задает выравнивание по горизонтали. Возможные значения: left, center, right. По умолчанию таблицы выравниваются по левому краю окна браузера.
- valign – вертикальное выравнивание содержимого таблицы. Принимаемые значения: top, bottom, middle.
- border – Задает внешнюю рамку таблицы. 1 – рамка есть, 0 – рамки нет. То есть, при использовании 0 таблица визуально не будет видна.
- cellpadding – расстояние между границей каждой отдельной ячейки и ее содержимым.
- cellspacing – расстояние между границами близлежащих ячеек.
- width – ширина таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты).
- height – высота таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты).
- bgcolor – задает цвет фона для таблицы.
- background – устанавливает рисунок в качестве фона таблицы.
Форматирование таблиц.
Придание таблицам надлежащего внешнего вида является ключевым моментом при создании каркаса страницы, основанного на табличном методе. Ничего сложного в форматировании таблиц нет. Далее я приведу пример, в котором использую основные методы форматирования таблиц:
| Объединение 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»> </td>
<td width=»111″ rowspan=»3″ valign=»top» class=»text» bgcolor=»#0000FF»> </td>
</tr>
<tr >
<td width=»69″ height=»169″ class=»text»> </td>
<td width=»113″ valign=»bottom» bordercolor=»#0000FF» class=»text»> </td>
<td class=»text»> </td>
</tr>
<tr>
<td height=»102″ class=»text»> </td>
<td valign=»top» bordercolor=»#FFFFFF»
class=»text» bgcolor=»#FFFFFF»> </td>
<td class=»text»> </td>
</tr>
<tr>
<td height=»60″ class=»text»> </td>
<td colspan=»2″ valign=»bottom»
bordercolor=»#0000FF» class=»text»> </td>
<td class=»text»> </td>
</tr>
</table>
При создании табличного каркаса вам может потребоваться использование вложенных таблиц, например для создания меню навигации, которое будет состоять из отдельной таблицы, расположенной в одной из ячеек родительской. Так вот, ничего страшного в использовании вложенных таблиц нет и HTML спецификация этого не запрещает. Главное не забывайте вовремя закрывать теги столбцов и строк во избежание разрушения всей табличной структуры.
Работа с таблицами очень важна при создании сайтов. Даже если вы не будете использовать табличный дизайн для вашего сайта, использование таблиц позволит вам максимально точно позиционировать элементы на странице.
В следующий раз речь пойдет о создании и использовании списков HTML.