Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Архив

Таблицы в 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 – устанавливает рисунок в качестве фона таблицы.

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

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

 

Объединение 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.

 

 

Графика в HTML
HTML списки
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам
Политика конфиденциальности | Пользовательское соглашение