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

PSPx форум (https://www.pspx.ru/forum/index.php)

- BB-коды форума (https://www.pspx.ru/forum/forumdisplay.php?f=424)

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

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

Оглавление:
Предисловие

Тег <table> - общие понятия

Синтаксис

Так, между прочим - немного по понятиям

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

Урок №2: [colgroup] - опции и значения КОЛОНКИ (не обязательный тег)

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

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

Предисловие:

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

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	Версия матплаты	Комментарий
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!

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

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

http://htmlbook.ru/themes/hb/images/browser_ie.png Internet Explorer				http://htmlbook.ru/themes/hb/images/browser_cr.png Chrome				http://htmlbook.ru/themes/hb/images/browser_op.png Opera				http://htmlbook.ru/themes/hb/images/browser_sa.png Safari				http://htmlbook.ru/themes/hb/images/browser_fx.png Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0
http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://htmlbook.ru/themes/hb/images/icon_yes.png	http://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-кодами [B] и [CENTER], 2-ой атрибут по-умолчанию является обычным телом таблицы, требующим форматирования, 3-ий просто означает нижнюю часть таблицы. Поэтому, если отбросить эти атрибуты, то таблица полностью принимает значение тела <tbody> автоматически. Отсюда нет смысла в их применении.
Элемент <th> аналогичен элементу <td> и аналогично предыдущему пункту, просто отличается от него тем, что обозначает заголовочное содержимое ячейки, выделенное жирным и по центру, что мы так же можем достигнуть обычными bb-кодами [B] и [CENTER].
Элементы <tr> и <td> являются обязательными атрибутами любой таблицы. Без них никакая таблица не станет таблицей. Об этом чуть ниже...

Таким образом, отсеяв всё ненужное, имеем 4 важных составляющих таблицы:

<table> Основополагающее таблицы. Только этот тег указывает на то, что это таблица
<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>

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

Первая ячейка	Вторая ячейка	Третья ячейка
Четвёртая ячейка	Пятая ячейка	Шестая ячейка
Седьмая ячейка	Восьмая ячейка	Девятая ячейка

Надеюсь эти 3 примера геометрической прогрессии я сумел раскрыть для вашего понимания :)

Цитата:

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

Так, между прочим

Следует иметь в виду, что данные примеры приведены с учётом HTML, но разница с BB-кодами совершенно несущественна.
Если в HTML написание идёт такое - <table>, то в BB-кодах написание такое - [table]
То есть, в 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%"]...[/table]
[tr="align=center bgcolor=#ff00ff bordercolor=00ff00 valign=top"]...[/tr]
[td="width=25% colspan=2 bgcolor=#D3EDF6 align=center"]...[/td]

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

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

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

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

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

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

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

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

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

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

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

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

Атрибут	Значение	Определение
align	left 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 позволяет несколько ускорить отображение содержимого таблицы.
frame	void border above below hsides vsides rhs lhs	Не отрисовывать границы Граница вокруг таблицы Граница по верхнему краю таблицы Граница снизу таблицы Добавить только горизонтальные границы (сверху и снизу таблицы) Рисовать только вертикальные границы (слева и справа от таблицы) Граница только на правой стороне таблицы Граница только на левой стороне таблицы
height	Значение в пикселах или процентах	Устанавливает высоту таблицы. В спецификации HTML 4 этого атрибута нет, однако браузеры в большинстве случаев понимают его, если не установлен <!DOCTYPE>. В том случае, когда в документе задан <!DOCTYPE>, браузеры высоту таблицы, заданную через атрибут height, игнорируют.
rules	all groups cols none rows	Линия рисуется вокруг каждой ячейки таблицы Линия отображается между группами тега <colgroup> Линия отображается между колонками Все границы скрываются Граница рисуется между строками таблицы, созданых через тег <tr>
summary	Любой текст	Атрибут summary предназначен для краткого описания таблицы или указания ее предназначения. В отличие от тега <caption> содержимое summary никак не отображается и в браузере не выводится, однако может использоваться поисковыми системами или речевыми браузерами.
width	Значение в пикселах или процентах	Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

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

https://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-я колонка пошире под общее количество.
Таким образом, синтаксис у нас будет такой:

Код:

[table="width='650' cellpadding='2' cellspacing='0' border='1' rules='groups'"]

   [colgroup="width='200'"][/colgroup]

   [colgroup="span='5' align='center' width='70'"][/colgroup]

   [colgroup="width='100' align='center'"][/colgroup]

      [tr="bgcolor='#00ff00'"]

         [td=""][B]Наименование товара[/B][/td]

         [td=""][B]Пн[/B][/td]

         [td=""][B]Вт[/B][/td]

         [td=""][B]Ср[/B][/td]

         [td=""][B]Чт[/B][/td]

         [td=""][B]Пт[/B][/td]

         [td=""][B]ИТОГО[/B][/td]

      [/tr]

      [tr=""]

         [td=""][B]Футболка трикотаж[/B][/td]

         [td=""]3[/td]

         [td=""]5[/td]

         [td=""]2[/td]

         [td=""]7[/td]

         [td=""]1[/td]

         [td=""]18[/td]

      [/tr]

      [tr=""]

         [td=""][B]Джинсы Levi's[/B][/td]

         [td=""]2[/td]

         [td=""]3[/td]

         [td=""]1[/td]

         [td=""]1[/td]

         [td=""]2[/td]

         [td=""]9[/td]

      [/tr]

      [tr=""]

         [td=""][B]Шнурки для ботинок[/B][/td]

         [td=""]20[/td]

         [td=""]36[/td]

         [td=""]12[/td]

         [td=""]16[/td]

         [td=""]40[/td]

         [td=""]124[/td]

      [/tr]

[/table]

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

Наименование товара Пн Вт Ср Чт Пт ИТОГО
Футболка трикотаж 3 5 2 7 1 18
Джинсы Levi's 2 3 1 1 2 9
Шнурки для ботинок 20 36 12 16 40 124

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибут	Значение	Определение
abbr	Любая текстовая строка	Атрибут abbr предназначен для краткого описания содержимого ячеек. Текст внутри abbr браузерами не отображается и предназначен в первую очередь для доступа людей к содержанию с помощью вспомогательных технологий вроде речевых браузеров. Значение представляет сокращенную версию текста внутри тега <td>. Хотя abbr никак не выводится, браузеры распознают этот атрибут и могут получить к нему доступ через скрипты.
align	left 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	Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
scope	col colgroup row rowgroup	Ячейка заголовка установлена для колонки Ячейка заголовка установлена для группы колонок Ячейка заголовка задана для строки Ячейка заголовка установлена для группы строк
valign	baseline bottom middle top	Выравнивание по базовой линии Выравнивание по нижнему краю Выравнивание по середине Выравнивание содержимого ячейки по верхнему краю строки
width	Значение в пикселах или процентах	Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, атрибут width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.

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

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

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

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

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