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

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

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

    В этом руководстве ты познакомишься с особой форумной магией - 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
    Репутация
    20
    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
    MY.GAMES Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию Gelikan имеет безупречную репутацию
    Регистрация
    07.09.2010
    Адрес
    Москва
    Сообщений
    2,240
    Репутация
    3241
    Цитата Сообщение от StarostaGR Посмотреть сообщение
    А что там за не вставившаяся картинка?
    Денай членовредительствует. Эта "ненависц" у меня уехала в конец предыдущего поста.

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

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

  7. #7
    Аватар для mrDenai
    Знаток II Элита Империи mrDenai на пути к лучшему
    Регистрация
    02.11.2009
    Сообщений
    2,469
    Репутация
    20
    Что до полосок:
    [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
    Репутация
    20
    Ну и конечно же не стоит использовать полоски, залитые цветом фона форума, как советуют выше. Осенью они все превратятся в тыкву т.к. форум изменит цвет фона. Для таких дел лучше использовать прозрачную полоску:
    Яч. 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]

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

Ваши права

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