Ответить в теме
Показано с 1 по 9 из 9
  1. #1
    Аватар для Allods_Online
    Новости Allods_Online — неогранённый алмаз Allods_Online — неогранённый алмаз Allods_Online — неогранённый алмаз Allods_Online — неогранённый алмаз
    Регистрация
    31.08.2009
    Адрес
    https://allods.mail.ru/
    Сообщений
    6,182
    Репутация
    304

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

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

    В этом руководстве ты познакомишься с особой форумной магией - 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 cell2 cell
    3 cell4 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
    Последний раз редактировалось Gelikan; 25.06.2013 в 00:45.
    Ссылка на ручное скачивание обновлений и хотфиксов: http://dlb.allods.ru/

  2. #2
    Аватар для mrDenai
    Знаток II Элита Империи mrDenai на пути к лучшему
    Регистрация
    02.11.2009
    Сообщений
    2,469
    Репутация
    10
    rowspan есть?
    Огласите весь список, пожалуйста


    Я, например, так могу ^_^
    Последний раз редактировалось Gelikan; 25.06.2013 в 16:00. Причина: Членовредительство
    Карты астрала скоро обновим. *Сделайте меня разлениццо*
    _____________________________
    Не работает артбук в flash? Юзай простой! И музычку зацени!
    А ещё Генератор накидок,рункулятор!

  3. #3
    Аватар для StarostaGR
    Сержант гвардии StarostaGR на пути к лучшему
    Регистрация
    11.08.2009
    Адрес
    Country of tulips, bikes and ...
    Сообщений
    1,811
    Репутация
    10
    А что там за не вставившаяся картинка?

    И еще пара вопросов:
    1. Как сделать столбцы разной ширины?
    2. Картинку в таблицу я так понимаю вставлять можно?
    Введя при регистрации аккаунта код [21980], вы получите: 6 свитков (30 тыс. бонусного опыта и 60+ тыс. репутации), Сумку и Костюм. Внеся с 15 уровня 400 кристаллов на счет, вы получите: Сейф + Журнал на 25 заданий, Фолиант Знаний. + пин-код на волка от меня
    О гармонии в статах v. 5.0

  4. #4
    Аватар для YodoBashi
    Воин YodoBashi на пути к лучшему
    Регистрация
    27.01.2011
    Сообщений
    447
    Репутация
    10
    это руководство из серии "когда на работе нефик делать"
    или кто-то посты себе набивает

  5. #5
    Аватар для Gelikan
    Mail.Ru Gelikan может кое-чем гордиться Gelikan может кое-чем гордиться Gelikan может кое-чем гордиться Gelikan может кое-чем гордиться Gelikan может кое-чем гордиться Gelikan может кое-чем гордиться Gelikan может кое-чем гордиться Gelikan может кое-чем гордиться Gelikan может кое-чем гордиться Gelikan может кое-чем гордиться
    Регистрация
    07.09.2010
    Адрес
    Москва
    Сообщений
    2,107
    Репутация
    1430
    Цитата Сообщение от StarostaGR Посмотреть сообщение
    А что там за не вставившаяся картинка?
    Денай членовредительствует. Эта "ненависц" у меня уехала в конец предыдущего поста.

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

  6. #6
    Аватар для mrDenai
    Знаток II Элита Империи mrDenai на пути к лучшему
    Регистрация
    02.11.2009
    Сообщений
    2,469
    Репутация
    10
    Всё правильно уехала. Это магия css (не описанная в посте!)
    Карты астрала скоро обновим. *Сделайте меня разлениццо*
    _____________________________
    Не работает артбук в flash? Юзай простой! И музычку зацени!
    А ещё Генератор накидок,рункулятор!

  7. #7
    Аватар для mrDenai
    Знаток II Элита Империи mrDenai на пути к лучшему
    Регистрация
    02.11.2009
    Сообщений
    2,469
    Репутация
    10
    Что до полосок:
    [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; 25.06.2013 в 19:11.
    Карты астрала скоро обновим. *Сделайте меня разлениццо*
    _____________________________
    Не работает артбук в flash? Юзай простой! И музычку зацени!
    А ещё Генератор накидок,рункулятор!

  8. #8
    Аватар для mrDenai
    Знаток II Элита Империи mrDenai на пути к лучшему
    Регистрация
    02.11.2009
    Сообщений
    2,469
    Репутация
    10
    Ну и конечно же не стоит использовать полоски, залитые цветом фона форума, как советуют выше. Осенью они все превратятся в тыкву т.к. форум изменит цвет фона. Для таких дел лучше использовать прозрачную полоску:
    Яч. 1Яч. 3
    Яч. 4 Яч. 5Яч. 6
    Берите мой прозрачный пиксель, мне не жалко:
    Последний раз редактировалось mrDenai; 25.06.2013 в 19:16.
    Карты астрала скоро обновим. *Сделайте меня разлениццо*
    _____________________________
    Не работает артбук в flash? Юзай простой! И музычку зацени!
    А ещё Генератор накидок,рункулятор!

  9. #9
    Аватар для Tykromidze
    Гвардеец Tykromidze пока не определился
    Регистрация
    16.03.2012
    Сообщений
    1,112
    Репутация
    4
    Вопрос:

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

    с "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]

     Ответить в теме

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения