Меню сайта
Программирование
Хакинг
Категории раздела
Html [15]
Главная » Статьи » Программирование » Html

Урок 8 HTML Таблицы
Урок 8 HTML Таблицы
Таблицы вошли очень прочно в веб дизайн и теперь без них сложно представить даже самую простую страничку. Удобство при их использовании сложно описать словами, да и не нужно.

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

Параметрами этого тега задается общий вид таблицы, ее цвет, толщина рамки и многое другое. И вот какие аргументы могут быть:

align
Ну как и всегда этот параметр задает выравнивание таблицы. Если таблица находится в выравненных участках текста, т.е. где указаны <div> или <center> то сами понимаете выравнивание можно не указывать.

По умолчанию таблица выравнивается по левому краю.

width
Этот параметр задает ширину таблицы. Как правило браузер подбирает размер таблицы таким образом, чтобы там все хорошенько уместилось, но вы если вам нужен конкретный размер, то вы можете его указать в пикселах или в процентах от свободного пространства.

border
Используется для указания ширины границы таблицы в пикселах. По умолчанию имеет размер равный 0, и при этом границы таблицы не отображаются, т.е. получается прозрачная таблица :-).

cellspacing
Каждую ячейку браузер обводит своей собственной рамкой, и этот параметр задает ширину пространства между ними.

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

bgcolor
Задает цвет фона таблицы.

background
Изображение, которое будет отображатся в виде фона таблицы.

Для того чтобы создать новый ряд ячеек в таблице существует тег <tr>. Для создания новой ячейки предназначен тег <td> или <th>. Количество ячеек (т.е. элементов <td> и <th>) должно быть одинаково в каждом ряду таблицы, т.е. внутри каждого тега <tr>

Пример простейшей таблицы:

<table border=1>
<tr><td>Первая ячейка<td>Вторая ячейка
<tr><td>новый<td>ряд
</table>

Тег <tr> имеет несколько атрибутов.

align
Задает выравнивание внутри всех ячеек таблицы. Если, например указать align=center, то содержимое каждой ячейки будет выравнено по центру.
valign
Также задает выравнивание, но уже по вертикали. Может принимать значения top - выравнивание по верху,middle - по центру, ну и bottom по низу.

bgcolor и background

Задают цвет или изображение фона одной строки таблицы.

Ячейки таблицы более богаты своими параметрами. Чтобы не писать снова, скажу что в них входят все параметры строк таблицы описанные выше, ну и еще парочка другая следующих :-) :

rowspan
Объединяет указанное количество ячеек в одну по вертикали.

colspan
Объединяет ячейки по горизонтали.

width и height
Задают рекомендуемые размеры ячейки по горизонтали и вертикали.

Наверно многие не поняли как это могут ячейки объединяться. А вот как !!! Пример:

<table border=2>
<tr><td>1<td>2<td>3<td>4<td>5
<tr><td colspan=2 rowspan=2>6<td colspan=2>7<td rowspan=2>8
<tr><td>9<td>10
<tr><td>11<td>12<td>13<td>14<td>15
</table>

В общем понять это не просто, но Вы научитесь. Кстати очень замечательная особенность Html, в том что в ячейке можно сделать вложенную таблицу, а в ней еще одну и т.д. пока таблицы не кончатся :-).
Категория: Html | Добавил: -=Bandit=- (29.04.2013)
Просмотров: 703 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
people-group
Tak.ru

Карты сайта: Sitemap.xml и Sitemap-forum.xml

Дизайн сайта скомпилировал Lexarus