Работа в сети интернет - возможность хорошо зарабатывать...

Главная | Регистрация | Вход
Пятница, 19.08.2022, 04:16
Приветствую Вас Гость | RSS
Меню сайта
Категории раздела
HTML учебник [12]
Java Script учебник [1]
CSS учебник [2]
PHP учебник [1]
Главная » Статьи » Учебники » HTML учебник

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

  • 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">&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>

 

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

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

• Желаете перейти к изучению 8 урока: использование списков HTML



Источник:
Категория: HTML учебник | Добавил: Т_е_н_ь: (11.09.2012)
Просмотров: 338

Обратите Ваше внимание на другие статьи:

 ПОНРАВИЛАСЬ СТАТЬЯ!? ХОТИТЕ ПОДЕЛИТЕСЬ С ДРУЗЬЯМИ:



Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
Форма входа
Онлайн радио
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Посетившие за день
[ Полный Список ]




 ZaroBOTAK.uCoz.ru | Copyright © 2012| Все права на сайт принадлежат Красникову Максиму | Бесплатный хостинг uCoz
Копирование материалов без указания активной ссылки на //zarobotak.ucoz.ru строго запрещено.