Таблицы в 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 существуют следующие атрибуты:

• align – задает выравнивание по горизонтали. Возможные значения: left, center, right. По умолчанию таблицы выравниваются по левому краю окна браузера.
  
  
• valign – вертикальное выравнивание содержимого таблицы. Принимаемые значения: top, bottom, middle.
  
  
• border – Задает внешнюю рамку таблицы. 1 – рамка есть, 0 – рамки нет. Тоесть, при использовании 0 таблица визуально не будет видна.
  
  
• cellpadding – расстояние между границей каждой отдельной ячейки и ее содержимым.
  
  
• cellspacing – расстояние между границами близлежащих ячеек.
  
  
• width – ширина таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты).
  
  
• height – высота таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты).
  
  
• bgcolor – задает цвет фона для таблицы.
  
  
• background – устанавливает рисунок в качестве фона таблицы.

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

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

<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.

Урок 6: Графика в HTML.

Урок 7: Таблицы HTML.

Урок 8: HTML списки.