[Добавить в закладки]    [Мобильная Версия]
Инфо о Сайте: на нашем сайте вы сможете найти всё для вашего
сайта или форума ну или почти...
Меню сайта
Мини чат
200
Главная » Статьи » Мои статьи [ Добавить статью ]
FAQ по созданию таблиц
Я заметил что на этом форуме очень часто поступают просьбы о создании табиц. Вот решил написать фак по созданию таблиц. На самом деле это очень легко, стоит только потратить 5 минут времени на прочтение этого фака, при чем не просто прочиать, а именно написать таблицу по порядку, потом парачка таблиц собственного производства, и вам больше никогда не прийдеться заказывать таблицы.

I. Начало

Выучим самые главные тэги таблицы
Code
<table>здесь мы будем писать все наши строчки, столбцы, тексты и т.п.</table>

далее нам понадобиться тэги строчки и столбца(ячейки)
Code
<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы

Например нам надо создать таблицу в которой будет две строчки и в каждой строчке по три столбца

Code
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>

II. Размеры

Вспомним об атрибутах height(высота) и width(ширина) - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Высоту и ширину можно задать как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).

Code
<table>
<tr>
<td height="35" width="50">1.1</td>
<td width="50">1.2</td>
<td width="50">1.3</td>
</tr>
<tr>
<td height="35" width="50">2.1</td>
<td width="50">2.2</td>
<td width="50">2.3</td>
</tr>
</table>

Отвечаю на возникающий вопрос. Вопрос - "Почему высоту задали только для одной ячейки?" Ответ - Потому что если задать высоту первой ячейки 30, а второй 50, а третей 45(все эти ячейки находяться в одном ряду), то высота всех трех ячеек будет 50, так как высота должна быь одна, выбираеться самая большая заданная высота. НО ширину надо задавать для КАЖДОЙ ячейки.

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

Кстати, атрибуты height и width можно задать в процентах:

Code
<td width="30%"> содержимое ячейки </td>

Если мы задали для ячейки ширину в 30 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 70 процентов, т.е. сумма их ширин не должна превышать 70 процентов. Почему? Простая арифметика: в сумме это все должно равняться 100%. Считаем: 100 – 30 = 70.

III. Выравнивание

Пговорим о вертикальном выравнивании содержимого таблицы, т.е. о том, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим атрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу). Атрибут "valign" не надо прописывать для всех ячеек, только для тех, где бы мы захотели захотели чтобы текст располагался сверху или снизу. Также есть атрибут "align" это выравнивание по горизонвтали. например align="center". Его также не надо задавать для каждой ячейки, а только в которой мы хотим что-то сделать с текстом.

Итак выравняем текст вверх

Code
<table>
<tr>
<td height="35" width="50" valign="top">1.1</td>
<td width="50" valign="top">1.2</td>
<td width="50" valign="top">1.3</td>
</tr>
<tr>
<td height="35" width="50" valign="top">2.1</td>
<td width="50" valign="top">2.2</td>
<td width="50" valign="top">2.3</td>
</tr>
</table>

IV. Colspan и Rowspan

Давайте поговорим об атрибутах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Тоесть, у нас есть два ряда в каждом по 3 столбца, прописав атрибут colspan="2" в какой то ячейке, мы там не прописываем ширину(width), и получае то что она стала точно такой же ширины как как и две ячейки снизу(или сверху, зависит от того где вы прописали). И двайте будем думать еще логически, если у нас есть три ячейки в первом ряду, и в втором ряду три ячейки. И в первом ряду мы расстянули вторую ячейку на два ряда, значит нам надо убрать в первом ряду третюю ячейку. Точно такой же принцып работы rowspan, только растягивает не по ячейкам, а по рядам.

Code
<table>
<tr>
<td height="35" width="50" valign="top">1.1</td>
<td colspan="2" valign="top">1.2</td>
</tr>
<tr>
<td height="35" width="50" valign="top">2.1</td>
<td width="50" valign="top">2.2</td>
<td width="50" valign="top">2.3</td>
</tr>
</table>

V. Лишнее пространство

Стандартно между ячейками есть мальнькое пустое пространство. Избавиться от него очень просто с помощью атрибута cellspacing, равного нулю.

Code
<table cellspacing="0">
<tr>
<td height="35" width="50" valign="top">1.1</td>
<td colspan="2" valign="top">1.2</td>
</tr>
<tr>
<td height="35" width="50" valign="top">2.1</td>
<td width="50" valign="top">2.2</td>
<td width="50" valign="top">2.3</td>
</tr>
</table>

А если кому-то наборот хочеться увеличить расстояние, то вместо "0" ставим что больше, например cellspacing="5".

VI. Рамки. Границы.

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

Code
]<table cellspacing="0" border="2">
<tr>
<td height="35" width="50" valign="top">1.1</td>
<td colspan="2" valign="top">1.2</td>
</tr>
<tr>
<td height="35" width="50" valign="top">2.1</td>
<td width="50" valign="top">2.2</td>
<td width="50" valign="top">2.3</td>
</tr>
</table>

Рамке мы можем задать цвет. Пусть он будет черным в нашем примере

Code
<table cellspacing="0" border="2" bordercolor="#000000">
<tr>
<td height="35" width="50" valign="top">1.1</td>
<td colspan="2" valign="top">1.2</td>
</tr>
<tr>
<td height="35" width="50" valign="top">2.1</td>
<td width="50" valign="top">2.2</td>
<td width="50" valign="top">2.3</td>
</tr>
</table>

VII. Готово!

Вот вообщем то и вся наука в создании таблиц. С остальными сложностями, типа вставка плеэров, видео, прокрутки, вы розберетесь и сами, там нечего петь. Ну конечно если хотите я могу это описать в следующем факе. Удачи в создании таблиц wink

Источник: http://forums.0pk.ru/viewtopic.php?id=3100
Категория: Мои статьи | Добавил: admin (27.07.2011) | Автор: danwill E
Просмотров: 449 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]