|
| updated 07.07.17 00:48 22.04.16 10:29 | Таблицы (помощь по коду) |
ru |
Здрасте! Вот решил запаять мини урок по созданию таблицы в scrolls. Быть может вы хотите такую сделать но не знаете как. Дело это элементарное и сейчас вы в этом убедитесь.
Делать будем вот такого вида табличку:
А так же ее сворачиваемую версию:
Итак, приступим.
Начнем с того что клацнем вот такую кнопку  на панели инструментов. Как только вы ее нажмете - вылетит вот такой текст:
(table background='#feeddc' border='1' bordercolor='#e5e0d0')
(tr)(th)заголовок(/th)(th)таблицы(/th)(/tr)
(tr)(td)Шаблон(/td)(td)таблицы(/td)(/tr)
(/table)
И при сохранении он преобразовывается вот в такую табличку:
Примечание: я заменил квадратные скобки [] на круглые () для того что бы мы видели сам код, и он не преобразовывался в таблицу, вам этого делать не надо :)
Непосвященному человеку такой набор символов ни о чем не скажет и может даже отпугнет, но давайте разберемся в нем. Сразу хочу сказать что все эти буковки-аббревиатуры в скобках называются теги.
Возьмем первую строчку: (table background='#feeddc' border='1' bordercolor='#e5e0d0') - эта строчка кода создает таблицу, здесь задается цветовая гамма и толщина ее рамки. Нас интересуют параметры в одинарных скобках.
background='#feeddc' - цвет заднего фона.
border='1' - толщина рамки, допустимые значения от 0 до 9.
bordercolor='#e5e0d0' - цвет рамки.
И если с рамкой все понятно, больше border указал - рамка стала толще, то со сменой цвета рамки могут возникнуть некоторые затруднения.
На панели инструментов есть кнопка  которая по идее должна выдавать значение выбраного цвета, но у меня она почему то не работает. Поэтому я быстро нашел удобный во всех отношениях сайт посвященный этой тематике.
Там вы можете без проблем подобрать цвет, инвертировать его, разделить цвет на оттенки и многое другое. Выбранный колер копируете и вставляете в одинарные кавычки в коде.
Для своей таблички я выбрал background вот такого цвета (#f0f3fb) и могу сказать почему - этот цвет близкий к противоположному, цвету страницы scroll, а значит повышается читаемость текста внутри таблицы, хотя сейчас вы с трудом прочтете конечно что там написано :)
Толщину рамки, border, я оставил в значении 1 но вы можете поменять его как вам будет угодно, указав в кавычках цифру от 0 до 9.
Цвет рамки был конечно же заменен на вот такой цвет (#d2dbf3). Он из той же палитры что и цвет заднего фона, только более темный, и вместе они составляют неплохую композицию на мой взгляд - а главное текст внутри легко читаемый.
Было:
Стало:
Не знаю кому как, а мне второй вариант больше нравится, но спорить о вкусах не станем :)
Когда вы настроили цветовую гамму и выбрали толщину рамки, займемся наполнением таблички. Но сначала приведем ее в нормальный (удобный) вид. Разделим строчки таблицы, так что бы они образовывали вертикальную иерархию так нам будет удобнее читать и редактировать а на конечный результат эти сдвиги не повлияют.
Было:
(table background='#feeddc' border='1' bordercolor='#e5e0d0')
(tr)(th)заголовок(/th)(th)таблицы(/th)(/tr)
(tr)(td)Шаблон(/td)(td)таблицы(/td)(/tr)
(/table)
Стало:
(table background='#feeddc' border='1' bordercolor='#e5e0d0')
(tr)
(th)заголовок(/th)
(th)таблицы(/th)
(/tr)
(tr)
(td)Шаблон(/td)
(td)таблицы(/td)
(/tr)
(/table)
Думаю вы согласитесь что второй вариант удобнее для просмотра и редактирования. Давайте объясню почему мы разбили именно так.
(table background='#feeddc' border='1' bordercolor='#e5e0d0') - назначение этой строки вы уже знаете, думаю объяснять не нужно почему ее ставим отдельной строчкой.
(tr) - этот тег открывает новый массив данных в горизонтальной плоскости.
(th)заголовок(/th) - эта команда добавляет вертикально расположенную ячейку с информацией в наш горизонтальный массив (tr). Информацией в данном случае служит слово "заголовок" но там может быть что угодно - текст, ссылки, картинки и т.д. Тег (th) обозначает то что данные в этих ячейках будут заглавного вида. Что это значит - то что шрифт будет пожирнее и немного другой чем если мы используем тег (td). И все собственно говоря.
(/th) - тег закрывающий.
(td) - тег работающий аналогично тегу (th). Единственное различие - текст не жирный и шрифт чуток другой, для общего наполнения таблички.
(/td) - тег закрывающий.
(/tr) - этот тег закрывает наш массив данных в горизонтальной плоскости.
(/table) - тег закрывающий весь массив таблицы.
Все очень просто как видите. Есть простая иерархия команд: тег создания таблицы -> тег создания строки -> тег создания столбца -> тег закрытия столбца -> тег закрытия строки -> тег закрытия таблицы. Или если хотите, вот так:
->тег создания таблицы
---> тег создания строки
-----> тег создания столбца
-----> тег закрытия столбца
---> тег закрытия строки
->тег закрытия таблицы
Эта иерархия - вот и вся "сложность" в этом всем, теги быстро запоминаются, их тут раз-два и обчелся.
Вот собственно говоря и все по таблице. Хотите больше строк - добавляйте теги (tr), в строках хотите больше ячеек - добавляйте теги (td) внутри (tr) строк. Пример:
(table background='#f0f3fb' border='1' bordercolor='#d2dbf3')
(tr)
(th)заголовок 1(/th)
(th)заголовок 2(/th)
(/tr)
(tr)
(td)информация 1(/td)
(td)информация 2(/td)
(/tr)
(/table)
И например:
(table background='#f0f3fb' border='1' bordercolor='#d2dbf3')
(tr)
(th)заголовок 1(/th)
(th)заголовок 2(/th)
(th)заголовок 3(/th)
(th)заголовок 4(/th)
(th)заголовок 5(/th)
(/tr)
(tr)
(td)информация 1(/td)
(td)информация 2(/td)
(td)информация 3(/td)
(td)информация 4(/td)
(td)информация 5(/td)
(/tr)
(/table)
Так же, используйте различные эффекты для шрифта, меняйте его цвет, вставляйте изображения, или делайте табличку сворачиваемой для удобства. Например:
Жирный зеленый шрифт или красный курсив или синий подчеркнутый - тут от вашего воображения зависит :)
Вставить изображение тоже очень просто - жмем кнопку  на панели инструментов, вылетает тег шаблон (img)(/img) и сюда вставляется ссылка на картинку, например - (img)http://img.combats.ru/i/klan/TheLegacy.gif(/img) - будет выглядеть вот так
Что бы сделать табличку сворачиваемой, нажмите кнопку  на панели инструментов. Вылетит тег шаблон вида (hide "" "")(/hide) - и тут нам необходимо внести некоторую информацию. В первых кавычках указываем текст, который будет отображаться по умолчанию, во вторых - когда свернутая информация развернется. Например указываем вот так: (hide "Руны: развернуть" "Руны: свернуть")(/hide), а в саму команду включаем нашу готовую табличку:
(hide "Руны: развернуть" "Руны: свернуть")
(table background='#f0f3fb' border='1' bordercolor='#d2dbf3')
(tr)
(th)заголовок 1(/th)
(th)заголовок 2(/th)
(th)заголовок 3(/th)
(th)заголовок 4(/th)
(th)заголовок 5(/th)
(/tr)
(tr)
(td)информация 1(/td)
(td)информация 2(/td)
(td)информация 3(/td)
(td)информация 4(/td)
(td)информация 5(/td)
(/tr)
(/table)
(/hide)
|
| Comments: 8 | |
| |
|
Total posts: 1 Pages: 1
«« « 1 » »»
|
|
| Mo |
Tu |
We |
Th |
Fr |
Sa |
Su |
| | | | | 1 | 2 | | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | 10 | 11 | 12 | 13 | 14 | 15 | 16 | | 17 | 18 | 19 | 20 | 21 | 22 | 23 | | 24 | 25 | 26 | 27 | 28 | | |
|
