Watercolor, хорошо, тогда начнем с азов, раз мы знаем BB коды.
Наша задача сделать табличку BB кодах.
Пользуемся тем, что у нас есть кнопка генератора простых таблиц. нажали на нее, сделали произвольную табличку, а теперь, пользуясь своими знаниями, и данной темой Справочник HTML.
Помним! Коды BB отличны от HTML и не всегда способны жить отдельно от HTML платформы.

Отредактировано Диос (2016-01-13 15:16:02)

Watercolor, да, не обязательно такую же, любая BB таблица с горизонтальным, вертикальным сведением и заливкой ячейки.

Watercolor, значит начнем с самых азов.
[table] - значение таблицы
[tr] - строка
[td] - ячейка
collspan - слияние ячейки по горизонтали
rowspan - слияние ячейки по вертикали
bgcolor - заливка
width - ширина ячейки

Чтобы получить какое либо значение нужно прописывать его для каждой ячейки.
[td widht=20px] - ширина ячейки будет 20 пикселей
[td colspan=2] - сольет две ячейки по горизонтали
[td rowspan=2] - сольет две ячейки по вертикали Внимание! Чтобы таблица не уехала, слив две ячейки по вертикали, в следующей строке должно быть на одну ячейку меньше
[tr][td rowspan=2][/td][td][/td][/tr]
[tr][td][/td][/tr]
[td bgcolor=#009890] - зальет ячейку заданным светом

Watercolor, отлично. Теперь мы умеем сливать элементы. А значит, сейчас мы будем учиться делать основу для таблицы на форум.
Возьмем данный шаблон.

Попробуй рассказать мне, что здесь изображено.

Watercolor, увы, но даже близко нет. И сейчас, мы это будем делать.
Самое первое, это основа. Стандартная таблица из трех ячеек.
Однако, мы видим, что наши ячейки имеют разный размер.
Возьмем значения 100, 500 и 150 пикселей.

Теперь переносим ее в значения HTML кода, для этого меняем все [наименование] на <наименование> и ставим себе в на тестовик в объявления.

Первое, что мы проверяем, включено ли отображение объявления, затем, мы вспоминаем, что BB не всегда дружит с HTML и закрываем наши элементы точкой с запятой ; а = меняем :
То есть: width: 150px;

Отредактировано Диос (2016-01-13 17:53:38)

Отлично, теперь, делаем нашу табличку фиксированной.
Добавляем к значению таблицы высоту и ширину. У нас они будут 750 и 250
<table width=750px; hide=250px;>
Получаем красивую табличку из трех ячеек.
Теперь, нам нужно создать поле центральной ячейки, как мы видим, там есть нечто кнопочное.
Первый отсек, это будет прокручиваемые объявления форума, не входящие в состав переключающегося меню.
Для этого мы создаем div окна, которые помогут нам разместить необходимые элементы.
<div> - Чтобы данное окошко приняло необходимые нам очертания, мы собираем его по кусочкам.
То, что нам понадобиться для работы:
<div style="параметры">
overflow: auto; - создает прокрутку контента выходящего за размеры окна
width: ВЕЛИЧИНАpx; - задает ширину окна Внимание! Если окно прокрутки находится в окне ячейки, ширина должна быть меньше ширины ячейки, иначе полоса прокрутки перекроет границу ячейки.
height: ВЕЛИЧИНАpx; - задает высоту окна

margin-top: ВЕЛИЧИНАpx; - двигает окно от верха позиции место нахождения(шапка, объявление, футер)
margin-left: ВЕЛИЧИНАpx; - двигает окно вправо влево

Сначала мы создаем одно большое див окно, мы уже знаем его размеры, 500 на 250.
Затем, второе див окно с прокруткой, шириной и длинной. После делаем третье див окно, в котором будет размещена наша табличка с переключением вкладок, выравниваем ее по высоте и задаем уход влево, не забывая прописать ширину и длину.

Но, есть и второй вариант. Вместо трех ячеек базовой таблицы, мы создаем 4 ячейки, и делаем их с размерами 250 пикселей и 350 пикселей.
У нас получается примерно следующее:

Не красиво правда? Значит, нам нужно от центровать нашу табличку. В самое начало, перед значением таблицы, ставим <center>, затем отправляемся в самый низ, и после закрытого значения ставим </center>.

Готов, наша табличка имеет прекрасную основу и готова преображаться в рабочую, графически оформленную объявлялку форума.

Работаем мы исключительно в выделенной строке. Для этого не нужно удалять две других ячейки таблицы. Мы их дополняем, но не удаляем.

Разберем ошибки:

1. Удалены иные ячейки таблицы.
У нас табличка из трех ячеек, я нашел две.
2. Див окна расположились перед параметрами ячейки, а не внутри ячейки. Мы задаем параметры для таблицы, внутри таблице, а не иначе.
Див окно, это новый элемент, содержимое которого обязано иметь начальные и конечные коды. Чтобы окно ячейки <td></td> было видно в див окне, нужно писать таблицу целиком. <table>......</table>. Поэтому мы используем настройки для див окон, дабы не перегружать форум кодами.
3. Закрытие элемента.
Любое значение имеет окончание, будь то центровка, див окно, таблица, цвет шрифта. Всегда закрывается изначальным наименованием элемента, с чертой перед наименованием. </center></div></b></color></img>.
Исключение имеет лишь параметр работы со строкой.
<br> - перенос на новую строку
<p> - новый параграф
4. Величины.
На данный момент у нас пока два див окна. значит первое окно имеет значения 500х250, а второе, с прокруткой, имеет значения 180х250/150х200. Выбираем сами, главное, оставить место для третьего див окна, в которое мы установим таблицу с переключением вкладок.

Отредактировано Диос (2016-01-14 11:36:31)

<center><table width=750px; height=250px;>
<tr>
<td width: 100px;> Ячейка размером 100 пикселей</td>
<td width: 500px; <div style="width: 500px; height: 250px;">> Ячейка размером 500 пикселей</div>
<div style="width: 180px; height: 250px; overflow: auto;">> Ячейка размером 500 пикселей</div>
нет третьего див окна</td>
<td width: 150px;> Ячейка размером 150 пикселей</td>
</tr>
</table></center>

И вновь наши ошибки.
1. Наше див окно оказалось в параметрах ячейки. А должно стоять как контент ячейки.

2. Мы делаем большое див окно, что бы в нем писать контент. А это значит, что создав большое див окно, два других мы пишем в нем.

3. Потерялся чей-то кусочек. Не криминально, но внимательнее, не закрытое див окно или лишний элемент параметра могут снести форум.
4. А где среднее див окно, которые смещено и выравнено от левого края, для переключаемой таблице?

Отредактировано Диос (2016-01-15 12:08:12)

И забыл, параметры ширины и высоты мы тоже задаем для третьего див окна.

Любые значения главных элементов прописываются через style="параметры"
Мой косяк, забыл указать в начале разбора ошибок.