[FAQ] bb-код [TABLE] - Рисуем таблицы на любой вкус и цвет!

[ErikPshat]

Таблицы - что за чем едят!

Оглавление:


Предисловие
Тег <table> - общие понятия
Синтаксис
Так, между прочим - немного по понятиям
Урок №1: - опции и значения ТАБЛИЦЫ
Урок №2: - опции и значения КОЛОНКИ (не обязательный тег)
Урок №3: - опции и значения СТРОКИ
Урок №4: - опции и значения ЯЧЕЙКИ


Первый пункт инструкции
Предисловие:


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


9B - TA-090v2 - Пандора не работает, установка только Виртуальной CFW!
9B - TA-092v1 - Пандора не работает, установка только Виртуальной CFW!
9C - TA-092v1 - Пандора не работает, установка только Виртуальной CFW!
9C - TA-093v1 - Пандора не работает, установка только Виртуальной CFW!
9D - TA-093v1 - Пандора не работает, установка только Виртуальной CFW!
0A - TA-093v1 - Пандора не работает, установка только Виртуальной CFW!
0B - TA-093v1 - Пандора не работает, установка только Виртуальной CFW!
0C - TA-093v1 - Пандора не работает, установка только Виртуальной CFW!
0C - TA-095v1 - Пандора не работает, установка только Виртуальной CFW!
0CD - TA-095v1 - Пандора не работает, установка только Виртуальной CFW!
1A - TA-095v1 - Пандора не работает, установка только Виртуальной CFW!

Как оно вам стройно выглядет? :D
Тут даже дело не только в количестве символов, а в том, что при одинаковом их количестве в каждой строке, одна строка всё равно оказывается длиннее или короче другой. А всё потому, что цифра 1 короче цифры 9 или буква Л поуже буквы М.

А теперь посмотрим, как это дело выглядет в таблице:

9B-TA-090v2-Пандора не работает, установка только Виртуальной CFW!9B-TA-092-Пандора не работает, установка только Виртуальной CFW!9C-TA-092-Пандора не работает, установка только Виртуальной CFW!9C-TA-093-Пандора не работает, установка только Виртуальной CFW!9D-TA-093-Пандора не работает, установка только Виртуальной CFW!0A-TA-093-Пандора не работает, установка только Виртуальной CFW!0B-TA-093-Пандора не работает, установка только Виртуальной CFW!0C-TA-093-Пандора не работает, установка только Виртуальной CFW!0C-TA-095-Пандора не работает, установка только Виртуальной CFW!0CD-TA-095-Пандора не работает, установка только Виртуальной CFW!1A-TA-095-Пандора не работает, установка только Виртуальной CFW!
Или в таком виде:

DATE
CODEВерсия
матплатыКомментарий9BTA-090v2Пандора не работает, установка только Виртуальной CFW!9BTA-092Пандора не работает, установка только Виртуальной CFW![TR="bgcolor='#FFFFFF'"]9CTA-092Пандора не работает, установка только Виртуальной CFW!9CTA-093Пандора не работает, установка только Виртуальной CFW!9DTA-093Пандора не работает, установка только Виртуальной CFW!0ATA-093Пандора не работает, установка только Виртуальной CFW!0BTA-093Пандора не работает, установка только Виртуальной CFW!0CTA-093Пандора не работает, установка только Виртуальной CFW!0CTA-095Пандора не работает, установка только Виртуальной CFW!0CDTA-095Пандора не работает, установка только Виртуальной CFW!1ATA-095Пандора не работает, установка только Виртуальной CFW!




Второй пункт инструкцииТег <table>
Рисуем таблицы на любой вкус и цвет!

Это не картинка!

http://htmlbook.ru/themes/hb/images/browser_ie.png Internet Explorerhttp://htmlbook.ru/themes/hb/images/browser_cr.png Chromehttp://htmlbook.ru/themes/hb/images/browser_op.png Operahttp://htmlbook.ru/themes/hb/images/browser_sa.png Safarihttp://htmlbook.ru/themes/hb/images/browser_fx.png Firefox6.07.08.09.010.011.012.013.09.29.610.011.02.03.14.05.03.04.05.06.0http://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.pnghttp://htmlbook.ru/themes/hb/images/icon_yes.png

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы.
Любая таблица ОБЯЗАТЕЛЬНО состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.

Внутри <table> допустимо использовать следующие элементы:

<caption> <col> <colgroup> <thead> <tbody> <tfoot> <th> <tr> <td>




Элемент <caption> - является просто текстовым заголовком над таблицей, аналогично заголовкам шапок тем на нашем форуме, который можно воспроизвести обычным bb-кодом, поэтому его мы опускаем, вернее отбрасываем от использования в таблице.


Элементы <col> и <colgroup> редко используются и совсем не обязательные атрибуты, но иногда без них невозможно составить задуманную таблицу. Имеют фактически одинаковые функции, поэтому выбираем более функциональный <colgroup>, единственное превосходство которого определяется его функцией группировать колонки, обрамлённые бордюрами, при условии, что в опции <table> указан параметр rules="groups"


Элементы <thead>, <tbody> и <tfoot> - так же имеют идентичный результат, за исключением того, что 1-ый по-умолчанию делает заголовочную строку таблицы жирным шрифтом и по центру, что достигается обычными bb-кодами и , 2-ой атрибут по-умолчанию является обычным телом таблицы, требующим форматирования, 3-ий просто означает нижнюю часть таблицы. Поэтому, если отбросить эти атрибуты, то таблица полностью принимает значение тела <tbody> автоматически. Отсюда нет смысла в их применении.


Элемент <th> аналогичен элементу <td> и аналогично предыдущему пункту, просто отличается от него тем, что обозначает заголовочное содержимое ячейки, выделенное жирным и по центру, что мы так же можем достигнуть обычными bb-кодами и [CENTER].


Элементы <tr> и <td> являются обязательными атрибутами любой таблицы. Без них никакая таблица не станет таблицей. Об этом чуть ниже...



Таким образом, отсеяв всё ненужное, имеем 4 важных составляющих таблицы:
[TABLE="border=1 cellpadding=5"][COLGROUP="align=center"]<table>Основополагающее таблицы. Только этот тег указывает на то, что это таблица
[B]<colgroup>Регулирует характеристиками каждого столбца в таблице<tr>Регулирует характеристиками каждой строки в таблице<td>Регулирует характеристиками каждой ячейки таблицы

Третий пункт инструкцииТеперь САМОЕ важное - СИНТАКСИС

Каким образом строятся таблицы? А всё элементарно просто...

Любая ТАБЛИЦА всегда открывается тегом <table> и в конце вся таблица закрывается тегом </table>.
Внутри, между тегами <table>...</table> обязательно рисуется тег СТРОКИ <tr> и закрывается строка таблицы тегом </tr>
Внутри, между тегами строки <tr>...</tr> обязательно рисуется хоть одна ЯЧЕЙКА <td> и закрывается ячейка тегом </td>

Вот и всё элементарное правило!
Без ЯЧЕЙКИ не может быть СТРОКИ, как без строки не может быть ТАБЛИЦЫ, как без яйца не родится курица!

Для разъяснения добавлю, что...

Тут нужно только уяснить, что в одной СТРОКЕ таблицы чаще всего бывает не одна ЯЧЕЙКА, а несколько.
Ещё нужно уяснить, что в таблице обычно бывает не одна СТРОКА, а несколько и в каждой СТРОКЕ по нескольку ЯЧЕЕК.
Поэтому она и называется ТАБЛИЦА, потому что в ней есть несколько вертикальных колонок и несколько горизонтальных строк, а всё это состоит из элементарных ЯЧЕЕК.



Вот так выглядет синтаксис элементарной таблицы, состоящей из одной единственной ячейки:

<table>
<tr>
<td>...</td>
</tr>
</table>

Вот так такая таблица выглядет:

Всего одна ячейка


Вот так выглядет синтаксис таблицы, состоящей из 3-ёх ячеек:

<table>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>

Вот так такая таблица выглядет:

Первая ячейкаВторая ячейкаТретья ячейка


Вот так выглядет синтаксис таблицы, состоящей из 3-ёх строк и в каждой строке по 3-и ячейки:

<table>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>

Вот так такая таблица выглядет:

Первая ячейкаВторая ячейкаТретья ячейка[td=""][B]Четвёртая ячейкаПятая ячейкаШестая ячейкаСедьмая ячейкаВосьмая ячейкаДевятая ячейка

Надеюсь эти 3 примера геометрической прогрессии я сумел раскрыть для вашего понимания :)
[CENTER]Внимание! Между BB-кодами внутри таблицы НЕЛЬЗЯ делать переносов на новую строку, но можно использовать пробелы!
Поэтому, после составления таблицы, удалите все переносы строк по ENTER между тегами. Это связано с тем, что движок форума автоматически добавляет ещё свой перенос <br> после каждого тега (BB-кода) и почему-то потом собирает все переносы и выносит их над таблицей. То есть, если вы где-то оставили один перенос строки, то они превращаются в два, а потом эти два переноса оказываются перед таблицей, что делает перед таблицей пустые строки.

[ErikPshat]

Четвёртый пункт инструкцииТак, между прочим

Следует иметь в виду, что данные примеры приведены с учётом HTML, но разница с BB-кодами совершенно несущественна.
Если в HTML написание идёт такое - <table>, то в BB-кодах написание такое -
То есть, в HTML используются такие скобки - <...>, а в BB-кодах вот такие - [...]

Ещё нужно уяснить, что в синтаксисе HTML присутствуют не только тупо открывающие и закрывающие теги типа:

<table>...</table>, <tr>...</tr>, <td>...</td>


Но у каждого тега есть ещё и ОПЦИИ, от которых зависит оформление его внутреннего содержимого, к примеру:

<table align="center" background="images/snow.gif" cellpadding="5" width="100%">...</table>


<tr align="center" bgcolor="#ff00ff" bordercolor="00ff00" valign="top">...</tr>


<td width="25%" colspan="2" bgcolor="#D3EDF6" align="center">...</td>


Теперь обратите внимание на то же самое, но в BB-кодах:

[table="align=center background='images/snow.gif' cellpadding=5 width=100%"]...


...


...


Если вы заметили, то в HTML после тега опции пишутся через пробел: <table опция="значение" опция="значение" ...>
В BB-кодах, всегда после тега вот так вот ставится знак равенства: [table="опция=значение опция=значение ..."]

В HTML все опции пишутся через пробел, а каждое значение в кавычках.
В BB-кодах после тега с равенством все вместе взятые опции со значениями заключаются в одни общие кавычки, а значения у опций пишутся без кавычек, хотя по правилам необходимо значения у опций заключать в 'одинарные кавычки', например: [table="width='100%' border='1'"]

(тут есть нюансы, когда опции в стилях разделяются точкой с запятой ; например в теге и [DECOR=""]опции со значениями пишутся не через равенство, а через двоеточие - [DECOR="#ff00ff; color: white; text-shadow: 1px 1px 1px #808080"], но здесь другой случай)

Ну вот ещё довольно знакомые вам примеры, для напоминания о BB-кодах, правда тут используется примитивная одна опция:

Вставляем URL кнопкой http://www.pspx.ru/forum/cleardoc/editor/createlink.gif получаем тег с равенством и содержимое в кавычках: [URL="http://www.pspx.ru/forum/index.php"]
Заключаем в спойлер http://www.pspx.ru/forum/images/editor/spoiler.gif выделенный текст: [SPOILER="Открыть"]
Вставляем картинку http://www.pspx.ru/forum/cleardoc/editor/insertimage1.gif обтекаемую текстом: [PIC="right"]

[ErikPshat]

Урок №1Урок №1
[TABLE] - опции и значения ТАБЛИЦЫ

http://www.pspx.ru/forum/cleardoc/editor/table.gif


Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы.
Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.

Так вот, тег <table> никогда не используется сам по себе и обязательно должен иметь в себе теги строк <tr> и ячеек <td>. Тег таблицы <table> всегда открывает таблицу и всегда закрывает её в конце </table>.

Этот тег не такой уж простой, но и не такой сложный. Он имеет множество доступных опций, с помощью которых может влиять на содержимое всей таблицы в целом. Эти опции задуманы для того, чтобы не повторять одни и те же параметры для каждой ячейки, столбца или строки. Но с другой стороны, можно вообще обходиться без опций в теге <table>, т.к. все необходимые настройки можно осуществлять с помощью опций каждой отдельной ячеки или строки. Если вы не хотите использовать опции, то в BB-коде просто оставьте кавычки пустыми: [table=""]

Рассмотрим, какие доступны опции (или атрибуты) для тега [table=""]:

Опции или Атрибуты

АтрибутЗначениеОпределениеalignleft
center
rightВыравнивание таблицы по левому краю
Выравнивание таблицы по центру
Выравнивание таблицы по правому краюbackgroundПуть URL к картинкеОпределяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика.bgcolorЦвет (#RRGGBB)Устанавливает цвет фона таблицы. Можно использовать этот атрибут совместно с background, подобрав цвет фона близкий к фоновому рисунку.borderТолщинаУстанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется атрибут bordercolor тега <table>, то вид рамки меняется в зависимости от браузера. Когда в теге <table> используется атрибут border без значений (<table border>), то браузер отображает рамку толщиной один пиксел.bordercolorЦвет (#RRGGBB)Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление атрибутов bordercolor и border к тегу <table> создают однотонную линию.cellpaddingЗначение в пикселах или процентахОпределяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.cellspacingЗначение в пикселах или процентахЗадает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет.colsЦелое числоАтрибут cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.framevoid
border
above
below
hsides
vsides
rhs
lhsНе отрисовывать границы
Граница вокруг таблицы
Граница по верхнему краю таблицы
Граница снизу таблицы
Добавить только горизонтальные границы (сверху и снизу таблицы)
Рисовать только вертикальные границы (слева и справа от таблицы)
Граница только на правой стороне таблицы
Граница только на левой стороне таблицыheightЗначение в пикселах или процентахУстанавливает высоту таблицы. В спецификации HTML 4 этого атрибута нет, однако браузеры в большинстве случаев понимают его, если не установлен <!DOCTYPE>. В том случае, когда в документе задан <!DOCTYPE>, браузеры высоту таблицы, заданную через атрибут height, игнорируют.rulesall
groups
cols
none
rowsЛиния рисуется вокруг каждой ячейки таблицы
Линия отображается между группами тега <colgroup>
Линия отображается между колонками
Все границы скрываются
Граница рисуется между строками таблицы, созданых через тег <tr>summaryЛюбой текстАтрибут summary предназначен для краткого описания таблицы или указания ее предназначения. В отличие от тега <caption> содержимое summary никак не отображается и в браузере не выводится, однако может использоваться поисковыми системами или речевыми браузерами.widthЗначение в пикселах или процентахЗадает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

[ErikPshat]

Урок №2Урок №2
[colgroup] - опции и значения КОЛОНКИ

http://www.pspx.ru/forum/cleardoc/editor/colgroup.gif


Тег <colgroup>, исходя из названия - Группировка КОЛОНОК, предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Обычно закрывающий тег не требуется.

Разница между свойствами тегов <colgroup> и <col> не очень велика и состоит в следующем: <colgroup> позволяет объединять колонки в определенные группы, также, при добавлении атрибута rules="groups" к тегу <table>, браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>. В остальных случаях поведение колонок назначенных через элементы <colgroup> и <col> идентично. Поэтому мы выбрасываем из обихода тег <col>.

Здесь нужно уяснить самое важное:


Тег <colgroup> не обязательный параметр и если его не использовать, то браузер, по содержимому колонок, строк и ячеек, сам автоматически задаст ширину каждой колонке таблицы. Но часто бывает, когда вам необходимо строго выставить ширину и некоторые прочие характеристики каждой колонке именно так, а не иначе.


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


Теги закрывать не обязательно, поэтому он всегда встраивается сразу после открытия основного тега таблицы <table>, перечисляя каждую колонку. Однако в BB-коде он по любому будет закрываться, что не запрещается, но внутри тега, между его открытием и следом закрытием, никакие данные не вставляются. Тег только открывается, к нему пишутся опции и он тут же закрывается.


Если в таблице следом друг за другом идут одинаковые по ширине и оформлению колонки, то этим тегом можно сразу за один раз объединить эти колонки в одну группу по стилю оформления. Делается это через опцию span со значением количества объединяемых единым оформлением колонок.


Пример синтаксиса:

Допустим, мы рисуем таблицу с 7-ю колонками и 4-мя строчками. 1-я колонка у нас основная под "Наименование товара", следующие 5 колонок все одинаковые под "Количество завоза товара" каждый день рабочей недели, а последняя 7-я колонка пошире под общее количество.
Таким образом, синтаксис у нас будет такой:






Наименование товара
Пн
Вт
Ср
Чт
Пт
ИТОГО


Футболка трикотаж
3
5
2
7
1
18


Джинсы Levi's
2
3
1
1
2
9


Шнурки для ботинок
20
36
12
16
40
124



Вот так эта таблица выглядет:

Наименование товараПнВтСрЧтПтИТОГОФутболка трикотаж3527118Джинсы Levi's231129Шнурки для ботинок2036121640124


Собственно, как мы видим, вертикальным бордюром отделена только 1-ая и последняя колонки, т.к. 5 колонок посередине мы сгруппировали colgroup="span='5' с одинаковой шириной 70 пикселей и отцентрировали. А так как в теге мы указали border='1' и указали rules='groups', поэтому бордюрами обозначились не все ячейки, а только сгруппированные. То есть, внутри группы бордюр не применяется.
Хотя Опера моя всё-таки отображает бледные бордюрчики в сгруппированных колонках, но разные браузеры трактуют это каждый по своему.


Рассмотрим, какие доступны опции (или атрибуты) для тега [colgroup=""]:

Опции или Атрибуты

[TABLE="border='1' cellpadding='5' width='100%'"]АтрибутЗначениеОпределениеalignleft
center
right
justifyВыравнивание таблицы по левому краю
Выравнивание таблицы по центру
Выравнивание таблицы по правому краю
Выравнивание по левому и правому краюcharСимволАтрибут char заставляет выравниваться содержимое колонки по заданному символу. Эта возможность может пригодиться для выравнивания колонки дробных чисел по точке или запятой. Работает только в том случае, если значение атрибута align установлено как charcharoffЛюбое целое положительное или отрицательное числоЕсли атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа. Так, charoff='3' означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff='-3' — сместить на три символа влево.spanЦелое числоОпределяет число колонок, к которым будут применяться заданные характеристики. Если этот атрибут отсутствует, то тег <colgroup> работает для одной колонки. Допускается применять атрибут span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.valignbaseline
bottom
middle
topВыравнивание по базовой линии
Выравнивание по нижнему краю
Выравнивание по середине
Выравнивание по верхнему краю строкиwidthЗначение в пикселах или процентахЗадает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, атрибут width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого.

[ErikPshat]

Урок №3Урок №3
- опции и значения СТРОКИ

http://www.pspx.ru/forum/cleardoc/editor/tr.gif


Тег <tr> служит контейнером для создания строки таблицы
Каждая ячейка в пределах такой строки обязательно должна задаваться с помощью тега <th> или <td>.
Но так как тег <th> фактически повторяет все функции тега <tr>, за исключением того, что сразу автоматически центрирует и прибавляет жирность содержимому строки с ячейками, поэтому мы выбрасываем тег <th> из обихода (эти различия вполне исполняются обычными BB-кодами и ).

ИТАК, уясняем, что:

Тег <tr> - образовывает СТРОКУ таблицы и обязательно находится внутри тега самой таблицы <table></table>
В свою очередь, тег строки <tr> обязательно содержит внутри себя хоть одну ячейку <td>


[B]Опции или Атрибуты

[TR="bgcolor=#C47895"][CENTER]АтрибутЗначениеОпределениеalignleft
center
right
justify
charВыравнивание таблицы по левому краю
Выравнивание таблицы по центру
Выравнивание таблицы по правому краю
Выравнивание по левому и правому краю
Выравнивание по указанному символуbgcolorЦветУстанавливает цвет фона строки таблицыbordercolorЦветУстанавливает цвет рамки вокруг строки. Рамка показывается, когда установлен атрибут border с НЕнулевым значением у тега <table>charСимволАтрибут char заставляет выравниваться содержимое ячеек внутри тега <tr> по заданному символу. Эта возможность может пригодиться для выравнивания колонки дробных чисел по точке или запятой. Работает только в том случае, если значение атрибута align установлено как charcharoffЛюбое целое положительное или отрицательное числоЕсли атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа. Так, charoff='3' означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff='-3' — сместить на три символа влево.valignbaseline
bottom
middle
topВыравнивание по базовой линии
Выравнивание по нижнему краю
Выравнивание по середине
Выравнивание по верхнему краю строки

[ErikPshat]

Урок №4Урок №4
- опции и значения ЯЧЕЙКИ

http://www.pspx.ru/forum/cleardoc/editor/td.gif


Тег <td> предназначен для создания одной ячейки таблицы.
Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>


Опции или Атрибуты

[TD=""]АтрибутЗначениеОпределениеabbrЛюбая текстовая строкаАтрибут abbr предназначен для краткого описания содержимого ячеек. Текст внутри abbr браузерами не отображается и предназначен в первую очередь для доступа людей к содержанию с помощью вспомогательных технологий вроде речевых браузеров. Значение представляет сокращенную версию текста внутри тега <td>. Хотя abbr никак не выводится, браузеры распознают этот атрибут и могут получить к нему доступ через скрипты.alignleft
center
right
justify
charВыравнивание содержимого ячейки по левому краю
Выравнивание содержимого ячейки по центру
Выравнивание содержимого ячейки по правому краю
Выравнивание содержимого ячейки по ширине (одновременно по правому и левому краю).
Выравнивание содержимого ячейки по указанному символуbackgroundПуть URL к картинкеОпределяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика.bgcolorЦвет (#RRGGBB)Устанавливает цвет фона ячейки.bordercolorЦвет (#RRGGBB)Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен атрибут border с ненулевым значением у тега <table>.charСимволАтрибут char позволяет выравнить содержимое ячейки по заданному символу. Работает только в том случае, если значение атрибута align установлено как char.charoffЛюбое целое положительное или отрицательное числоЕсли атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа. Так, charoff="3" означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff="-3" — сместить на три символа влево.colspanЛюбое целое положительное число больше 1Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.headersОдин или несколько идентификаторов, разделенных между собой пробеломПозволяет связать ячейки таблицы с заголовками. Этот атрибут предназначен для повышения доступности таблицы пользователям речевых браузеров, в обычных браузерах результат применения атрибута headers не заметен.
Для связывания ячеек между собой одной ячейке в теге <td> задается атрибут id, а второй ячейке — атрибут headers со значением, совпадающим со значением id.heightЗначение в пикселах или процентахБраузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.nowrapНетДобавление атрибута nowrap к тегу <td> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение атрибута nowrap осуждается.rowspanЛюбое целое положительное число больше 1Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.scopecol
colgroup
row
rowgroup
Ячейка заголовка установлена для колонки
Ячейка заголовка установлена для группы колонок
Ячейка заголовка задана для строки
Ячейка заголовка установлена для группы строкvalignbaseline
bottom
middle
topВыравнивание по базовой линии
Выравнивание по нижнему краю
Выравнивание по середине
Выравнивание содержимого ячейки по верхнему краю строкиwidthЗначение в пикселах или процентахЗадает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, атрибут width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.

[ErikPshat]

Собственно вот и всё! Какие будут замечания и предложения?

[frostegater]

ErikPshat, чудно! шедевр!

[ErikPshat]

Как многие юзеры раздела PS3 знают об этом сайте IRD Library (http://jonnysp.bplaced.net/index.php), то многие видели там таблицу с поиском по TitleID.
Я подглядел код и увидел там подключённый плагин: http://jonnysp.bplaced.net/js/jquery.dataTables.min.js
По заголовку этого плагина вышел на сайт производителя: DataTables (https://datatables.net/)
Там есть очень много Examples (примеров).

Довольно хороший плагин со множеством настроек, с поиском, с сортировкой, который можно подключить к нам.
Но опять же, таблицу нужно составлять по-любому в HTML-формате, а с этим мозги у многих юзеров этого сделать не в состоянии.

[in1975]

ну многие оформления делаем чисто мы.

[shkuda]

Таблицы сейчас можно рисовать в сообщениях?
При вот таком примере
<table>
<tr>
<td>...</td>
</tr>
</table>
я таблицы в предварительном просмотре сообщения не наблюдаю.
________________________________________________________________

P.S. Работает, разбираюсь

[in1975]

shkuda, конечно можно, только синтаксис как тут (https://www.pspx.ru/forum/showpost.php?p=1045238) (см. пример)

[shkuda]

in1975, Разобрался плюс-минус с таблицами.
Вопрос возник: почему такой отступ получается от сообщения до самой таблицы (если текст сообщения отсутствует, то от края сообщения до самой таблицы)?


Почему такой отступ сверху получается?



Синтаксис такой:


Почему такой отступ сверху получается?

[shkuda]

В общем разобрался с этим)
Эрик в конце своего первого сообщения про это написал в этой теме:
Внимание! Между BB-кодами внутри таблицы НЕЛЬЗЯ делать переносов на новую строку, но можно использовать пробелы!
Поэтому, после составления таблицы, удалите все переносы строк по ENTER между тегами. Это связано с тем, что движок форума автоматически добавляет ещё свой перенос <br> после каждого тега (BB-кода) и почему-то потом собирает все переносы и выносит их над таблицей. То есть, если вы где-то оставили один перенос строки, то они превращаются в два, а потом эти два переноса оказываются перед таблицей, что делает перед таблицей пустые строки.
Если сделать без переноса, то нормально выглядит.
Почему такой отступ сверху получается?
Почему такой отступ сверху получается?
Неудобно конечно для восприятия, но видимо как есть.