Библейский Израиль

Пятница, 29.03.2024, 13:14

Приветствую Вас Гость | RSS | Главная | Блог | Регистрация | Вход

Главная » 2011 » Февраль » 14 » Урок №5. HTML таблицы
18:46
Урок №5. HTML таблицы

html таблицы

Сегодняшний урок посветим использованию html таблиц.

В WEB таблицы – это не только какие-то отчетные данные, не только расписание или еще что-нибудь в этом стиле. В WEB таблицей можно задать целую структуру сайта.

html таблицы

Сколько вы таких страниц видели в Internet?

Тысячи и тысячи. Но если разобраться, то это вот такая таблица.

Спросите вы, а как располагаются элементы на странице, ровно? А они заключаются в свои таблицы и выравниваются нужным образом.

Благодаря тому, что в каждую ячейку одной таблицы, мы можем поместить новую таблицу любой структуры (или даже несколько таблиц), можно добиться требуемого результата.

Тегом таблицы является тег <table></table>,
строкой таблицы является тег <tr></tr>, и столбцом таблицы – тег <td></td>.

Таблица заполняется по строкам сверху вниз, а по столбцам слева на права. Количество столбцов в строке должно быть одинаково для всех строк.

Давайте рассмотрим пример, и вы сразу все поймете.

Сделаем такую таблицу:

html таблицы

Сделаем это следующим образом:

Ставим тег <table> и начинаем формировать первую строку, пишем:

<tr>

 <td>Ячейка 1 строка 1</td>
 <td>Ячейка 2 строка 1</td>
 <td>Ячейка 3 строка 1</td>
 </tr>

У нас получилась первая строка таблицы с тремя столбцами. Аналогично формируем вторую строку:

<tr>
 <td>Ячейка 1 строка 2</td>
 <td>Ячейка 2 строка 2</td>
 <td>Ячейка 3 строка 2</td>

 </tr>

И третью:

<tr>
 <td>Ячейка 1 строка 3</td>
 <td>Ячейка 2 строка 3</td>

 <td>Ячейка 3 строка 3</td>
 </tr>

Наши три строки сформированы, осталось закрыть тег </table>.

Наша таблица готова.

Если таблице нужно дать заголовок, то за это отвечает тег <caption> Заголовок таблицы </caption> .

По умолчанию он располагается по центру, над таблицей. Тег заголовка таблицы необходимо размещать между тегом <table> и первым тегом <tr>.

В принципе заголовок можно сделать, поставив тег <h3> Заголовок таблицы </h3>перед тегом <table>.

Если столбцу нужно дать заголовок, то для этого предусмотрен тег <th> Заголовок столбца </th>.

Тег <th> – то же что и тэг <td>, но его содержимое отображается полужирным шрифтом с выравниванием по центру, а содержимое <td>, как вы уже увидели, с выравниванием по левому краю, со шрифтом по умолчанию.

С тегами, касающихся таблиц, пожалуй, все.

Теперь рассмотрим параметры этих тегов.

Тег <table> имеет следующие параметры:

width=число – ширина таблицы в пикселях или в % относительно ширины окна браузера.

height=число - высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).

align = left – выравнивание таблицы по левому краю.

right – выравнивание таблицы по правому краю.

center – выравнивание таблицы по центру.

border= число – толщина рамки таблицы в пикселях.

cellspacing=число - расстояние между смежными ячейками в пикселях (по умолчанию = 2).

cellpadding=число – расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).

bgcolor= цвет – фоновый цвет таблицы.

background=url - фоновое изображение для таблицы.

bordercolor=цвет - цвет всех линий рамки таблицы.

Рассмотрим параметры тегов <tr>, <td>, <th>:

width=число – ширина ячейки в пикселях или в % относительно ширины окна браузера (для <tr>не применяется).

height=число - высота ячейки в пикселях или в % относительно ширины окна браузера (для <tr> не применяется).

(высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).

align = left – выравнивание в ячейке по левому краю.

right – выравнивание в ячейке по правому краю.

center – выравнивание в ячейке по центру.

valign - вертикальное выравнивание содержимого ячейки.

top - выравнивание по верхнему краю ячейки.

bottom – выравнивание по нижнему краю ячейки.

middle – выравнивание по середине ячейки.

bgcolor= цве – фоновый цвет ячейки.

background=url – фоновое изображение для ячейки.

bordercolor=цвет – цвет всех линий рамки ячейки.

colspan=число - количество объединяемых ячеек по столбцам (для <tr> не применяется).

rowspan=число- количество объединяемых ячеек по строкам (для<tr> не применяется).

Давайте подробнее остановимся на параметрах colspan и rowspan.

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

html таблицы

Для этого нам понадобятся параметры тега <td> colspan и rowspan..

Итак:

<table width="100%" border="1" cellspacing="0" cellpadding="0">

Формируем первую строку: так как в первой строке у нас одна ячейка, и она объединяет три ячейки второй строки, то для одной ячейки первой строки укажем параметр colstrong=3.

<tr>
 <td colspan="3" align="center">1</td>
 </tr>

Вторая строка это просто три ячейки:

 <tr>
 <td align="center">2</td>
 <td align="center">3</td>
 <td align="center">4</td>
</tr>

Третья строка: пятая ячейка третьей строки объединяет две ячейки второй строки ( 2 и 3) и две строки (третью и четвертую).

Поэтому для нее зададим colspan=2 и rowspan=2. Ячейка № 6 остается.

 <tr>
 <td colspan="2" rowspan="2" align="center">5</td>
 <td align="center">6</td>
</tr>

Таким образом получается, что в четвертой строке должна быть одна ячейка ()

 <tr>
 <td align="center">7</td>
 </tr>
</table>

Наша таблица построена.

Роль таблиц в WEB очень велика, поэтому рекомендую разобраться с построением таблиц.

Поупражняться можно на примерах.

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

Ссылка на файл Архив 5 урока

Упражнение:

Таблица 1.

html таблицы

Таблица 2.

html таблицы

Проект webformyself.com – основы самостоятельного сайтостроения

С уважением, Андрей Бернацкий.

Категория: Вебмастеру | Просмотров: 1626 | Добавил: Vikvar | Теги: html таблица, теги html таблица, создание таблиц в html | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск по сайту

Форма входа

Статистика

Поиск по Библии

Календарь

«  Февраль 2011  »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28

Облако тегов

Новости