PSPx форум - Просмотр сообщения отдельно - [FAQ] bb-код [TABLE]

ErikPshat · 11.08.2012, 02:05

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

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

Тег <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!

Как оно вам стройно выглядет?

Тут даже дело не только в количестве символов, а в том, что при одинаковом их количестве в каждой строке, одна строка всё равно оказывается длиннее или короче другой. А всё потому, что цифра 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>
Рисуем таблицы на любой вкус и цвет!

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

Internet Explorer				Chrome				Opera				Safari				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

Элемент <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-кода) и почему-то потом собирает все переносы и выносит их над таблицей. То есть, если вы где-то оставили один перенос строки, то они превращаются в два, а потом эти два переноса оказываются перед таблицей, что делает перед таблицей пустые строки.