[Руководство] Как пользоваться табличками?

[Allods_Online]

Привет тебе, дорогой читатель!

В этом руководстве ты познакомишься с особой форумной магией - BBcode. Сегодня мы разберёмся, как же таки кастовать таблички.

Итак. На данный момент мы имеем два варианта таблиц на форуме: с фоном и рамкой и без оных.

Если в первом случае всё понятно - всего один тэг да перенос энтером (методом проб и ошибок), то во втором случае наши доблестные вебмастера вышли из трудного положения - особенности движка форума - простым способом: они реализовали таблички по образу и подобию таблиц HTML.

Всё просто:
есть строки (горизонтали)

[TR]

и есть стоблцы (вертикали)

[TD]

Делаем так:

[TBL="noborder"]
[TR][TD]1 cell[/TD][TD]2 cell[/TD][/TR]
[TR][TD]3 cell[/TD][TD]4 cell[/TD][/TR]
[/TBL]

Получаем так:

1 cell	2 cell
3 cell	4 cell

noborder - это стиль, отвечающий за прозрачность и безрамочность.

Нюансы.
Из-за технических особенностей форума, каждый поставленный перенос строки в коде таблички будет вынесен в виде пустой строки перед табличкой.
То есть, если в вас закралось чувство прекрасного и вы решили навести порядок с вёрсткой, то оставь надежду всяк сюда входящий... всё тлен, ребята. Ничего не выйдет.
Как вы видите, сейчас тут огромный разрыв...

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6
ячейка 7	ячейка 8	ячейка 9
ячейка 10	ячейка 11	ячейка 12
ячейка 13	ячейка 14	ячейка 15
ячейка 16	ячейка 17	ячейка 18

Но на самом деле в коде нет разрыва

[TBL="noborder"]
[TR][TD]ячейка 1 [/TD][TD]ячейка 2 [/TD][TD]ячейка 3 [/TD][/TR]
[TR][TD]ячейка 4 [/TD][TD]ячейка 5 [/TD][TD]ячейка 6 [/TD][/TR]
[TR][TD]ячейка 7 [/TD][TD]ячейка 8 [/TD][TD]ячейка 9 [/TD][/TR]
[TR][TD]ячейка 10 [/TD][TD]ячейка 11 [/TD][TD]ячейка 12[/TD][/TR]
[TR][TD]ячейка 13 [/TD][TD]ячейка 14 [/TD][TD]ячейка 15[/TD][/TR]
[TR][TD]ячейка 16 [/TD][TD]ячейка 17 [/TD][TD]ячейка 18[/TD][/TR]
[/TBL]

Печаль, беда, но не безысходность. Чтобы поправить положение, постройте свою табличку, приведите её к финальному виду, а потом сделайте то, от чего покоробилась бы душа любого верстальщика - сделайте wall-of-text из вашей красивенькой таблички.

[TBL="noborder"][TR][TD]ячейка 1 [/TD][TD]ячейка 2 [/TD][TD]ячейка 3 [/TD][/TR][TR][TD]ячейка 4 [/TD][TD]ячейка 5 [/TD][TD]ячейка 6 [/TD][/TR][TR][TD]ячейка 7 [/TD][TD]ячейка 8 [/TD][TD]ячейка 9 [/TD][/TR][TR][TD]ячейка 10 [/TD][TD]ячейка 11 [/TD][TD]ячейка 12[/TD][/TR][TR][TD]ячейка 13 [/TD][TD]ячейка 14 [/TD][TD]ячейка 15[/TD][/TR][TR][TD]ячейка 16 [/TD][TD]ячейка 17 [/TD][TD]ячейка 18[/TD][/TR][/TBL]

Зрелище ужасающее, но деваться некуда.

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6
ячейка 7	ячейка 8	ячейка 9
ячейка 10	ячейка 11	ячейка 12
ячейка 13	ячейка 14	ячейка 15
ячейка 16	ячейка 17	ячейка 18

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

Чтобы привести поля таблицы к нужной вам ширине, придётся немного поплясать с бубном.
Определите опытным путём, какой ширины должны быть столбцы, запилите в пеинте полоски толщиной в 1 пиксель и шириной, равной желаемой ширине соответствующего столбца. Цвет полоски - фон таблицы.
Далее просто вставьте их в нужные ячейки верхней строки таблички. Картинки зафиксируют поля и не дадут рамкам двигаться.

Альтернативой указанному выше способу оформления таблиц является более простой и понятный вариант с применением тега [Table].
В теле данного тега используется вертикальная черта "|" в качестве разделителя ячеек и перенос строки в роли обозначения столбцов. Простая табличка в этом случае будет выглядеть так:

[TABLE]Ячейка 1|Ячейка 2|Ячейка 3
Ячейка 4| Ячейка 5|Ячейка 6
[/TABLE]

И ее действующий вариант:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6

Как видите - ничего сложного. Но и тут есть свои фишки. Например для растяжения таблицы на определенную ширину или объединения нескольких ячеек в строке.

Для того, чтобы задать нашей табличке фиксированную ширину необходимо сделать следующее:

[TABLE="width=99%"]Ячейка 1|Ячейка 2|Ячейка 3
Ячейка 4| Ячейка 5|Ячейка 6
[/TABLE]

А вот как оно выглядит.

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6

А задав не 99%, а, к примеру, 60 - получим следующее:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6

Пора заняться объединением ячеек. Для этого используется параметр {colsp}, устанавливаемый после разделителя. Вот так:

[TABLE]Ячейка 1|Ячейка 2|Ячейка 3
Ячейка 4|{colsp=2} Ячейка 5
[/TABLE]

Где "2" - количество объединяемых ячеек по горизонтали.

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5

[mrDenai]

rowspan есть?
Огласите весь список, пожалуйста

Я, например, так могу ^_^

[StarostaGR]

А что там за не вставившаяся картинка?

И еще пара вопросов:
1. Как сделать столбцы разной ширины?
2. Картинку в таблицу я так понимаю вставлять можно?

[YodoBashi]

это руководство из серии "когда на работе нефик делать"
или кто-то посты себе набивает

[Gelikan]

А что там за не вставившаяся картинка?

Денай членовредительствует. Эта "ненависц" у меня уехала в конец предыдущего поста.

1. Как сделать столбцы разной ширины?

Чтобы привести поля таблицы к нужной вам ширине, придётся немного поплясать с бубном.
Определите опытным путём, какой ширины должны быть столбцы, запилите в пеинте полоски толщиной в 1 пиксель и шириной, равной желаемой ширине соответствующего столбца. Цвет полоски - фон таблицы.

2. Картинку в таблицу я так понимаю вставлять можно?

Да, абсолютно спокойно.

[mrDenai]

Всё правильно уехала. Это магия css (не описанная в посте!)

[mrDenai]

Что до полосок:

[IMG]//placekitten.com/110/200[/IMG]	[IMG]//placekitten.com/50/300[/IMG]	[IMG]//placekitten.com/200/310[/IMG]
[IMG]//placekitten.com/200/150[/IMG]	[IMG]//placekitten.com/70/50[/IMG]	[IMG]//placekitten.com/200/300[/IMG]

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

[mrDenai]

Ну и конечно же не стоит использовать полоски, залитые цветом фона форума, как советуют выше. Осенью они все превратятся в тыкву т.к. форум изменит цвет фона. Для таких дел лучше использовать прозрачную полоску:

Яч. 1		Яч. 3
Яч. 4	Яч. 5	Яч. 6

Берите мой прозрачный пиксель, мне не жалко:

[Tykromidze]

Вопрос:

Можно-ли как-то объединить строчки в одном столбце?

с "colsp" понятно, а с "rowsp" не выгорит?



У меня получилось несколько строчек втиснуть в одну ячейку, но это жутко не удобно:

ячейка 1 ячейка 1 ячейка 1

ячейка 2

ячейка 3

[table=1][LEFT]ячейка 1[/LEFT][CENTER] [/CENTER][LEFT]ячейка 1[/LEFT][CENTER] [/CENTER][LEFT]ячейка 1[/LEFT]|ячейка 2|ячейка 3[/table]