Таблицы

Поделиться12010-03-05 22:13:26

Автор: Vanila
Админка
Откуда: берутся дети?=))))
Зарегистрирован: 2010-03-03
Приглашений: 0
Сообщений: 446
Уважение: +16
Позитив: +8
Пол: Женский
Возраст: 32 [1991-10-25]
Провел на форуме:
3 дня 7 часов
Последний визит:
2010-11-23 21:21:38

Это трудно?

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

Пример 1:

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

Какая разница между <tr> и <td>?

Как видно из приведённого примера, это, возможно, самый сложный из примеров HTML, которые мы вам давали до сих пор. Давайте здесь остановимся и сделаем пояснения:

Для вставки таблиц используются 3 базовых тэга:
<table> - начало и конец таблицы. Логично.
<tr> - "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.
<td> - сокращение от "table data/табличные данные". Этот тэг начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично.

Вот что происходит в Примере 1: таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>Cell 1</td> и <td>Cell 2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>.

+1

Поделиться22010-03-05 22:16:39

Автор: Vanila
Админка
Откуда: берутся дети?=))))
Зарегистрирован: 2010-03-03
Приглашений: 0
Сообщений: 446
Уважение: +16
Позитив: +8
Пол: Женский
Возраст: 32 [1991-10-25]
Провел на форуме:
3 дня 7 часов
Последний визит:
2010-11-23 21:21:38

В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.
Пример 2:

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>

Есть ещё какие-нибудь атрибуты?

Разумеется. Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:

Пример 3:

<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

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

Пример 4:

<table border="1" width="30%">

Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.

Ещё атрибуты?

У таблиц есть много атрибутов. Вот ещё два:
align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в ряду или в отдельной ячейке. Например, left, center или right.
valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle или bottom.

Пример 5:

<td align="right" valign="top">Cell 1</td>

Что можно вставлять в таблицы?

Теоретически - всё: текст, ссылки и изображения... НО таблицы предназначаются для вывода табличных данных (т. е. данных, которые изначально представляются в виде столбцов и рядов), поэтому избегайте вставки данных в таблицы только потому, что вы хотите разместить их рядом друг с другом.

В добрые старые времена Internet - т. е. несколько лет назад - таблицы часто использовались для распределения содержимого на странице. Однако сегодня для этого есть более крутой способ - CSS. Но об этом позже.

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

0

Поделиться32010-03-05 22:19:37

Автор: Vanila
Админка
Откуда: берутся дети?=))))
Зарегистрирован: 2010-03-03
Приглашений: 0
Сообщений: 446
Уважение: +16
Позитив: +8
Пол: Женский
Возраст: 32 [1991-10-25]
Провел на форуме:
3 дня 7 часов
Последний визит:
2010-11-23 21:21:38

Что же ещё?

При создании таблиц используются два атрибута: colspan и rowspan.

Colspan - сокращение от "column span/охват столбцов". Colspan используется в тэге <td> для специфицирования того, сколько столбцов охватывает данная ячейка:

Пример 1:

<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

Установка colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.

Пример 2: