Таблицы в 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 – рамки нет. Если рамки нет таблица не видна, отображается только её содержимое
- 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>
При создании сайтов даже если вы не будете использовать табличный дизайн для вашего сайта, использование таблиц позволит вам максимально точно позиционировать элементы на странице.
В этом уроке мы изучили и рассмотрели на примере пару способов создания таблиц различного вида. Узнали несколько тонкостей что наверняка пригодится вам в дальнейшем.
• Желаете перейти к изучению 8 урока: использование списков HTML
