|
BB-коды форума Здесь всё, что касается оформления форума, тем и сообщений. |
11.08.2012, 02:05
|
Сообщение: #1 (1045235)
|
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,246
Вы сказали Спасибо: 26,991
Поблагодарили 42,523 раз(а) в 12,172 сообщениях
Сила репутации: 10Репутация: 41718 
(репутация неоспорима)
|
[FAQ] bb-код [TABLE] - Рисуем таблицы на любой вкус и цвет!
Таблицы - что за чем едят!
Оглавление:
Давно хотел осуществить эту мечту, т.к. нет-нет да иногда приходится ломать голову над упорядочиванием блоков текста. Сколько мучений было произведено, чтобы хоть как-то выровнять столбцы инструкций, прибегая к всевозможным хитростям по добавлению символов, закрашивая их под цвет фона или ещё каким премудростям. Взять для примера вот такое извращение:
- 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!
Как оно вам стройно выглядет? ![Ыыы!](images/smilies/gs.gif)
Тут даже дело не только в количестве символов, а в том, что при одинаковом их количестве в каждой строке, одна строка всё равно оказывается длиннее или короче другой. А всё потому, что цифра 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 | ![](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-кода) и почему-то потом собирает все переносы и выносит их над таблицей. То есть, если вы где-то оставили один перенос строки, то они превращаются в два, а потом эти два переноса оказываются перед таблицей, что делает перед таблицей пустые строки.
|
Последний раз редактировалось ErikPshat; 05.05.2017 в 12:26.
|
|
|
Эти 6 пользователя(ей) сказали Спасибо ErikPshat за это полезное сообщение:
|
|
11.08.2012, 02:06
|
Сообщение: #2 (1045236)
|
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,246
Вы сказали Спасибо: 26,991
Поблагодарили 42,523 раз(а) в 12,172 сообщениях
Сила репутации: 10Репутация: 41718 
(репутация неоспорима)
|
Так, между прочим
Следует иметь в виду, что данные примеры приведены с учётом 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 кнопкой
получаем тег с равенством и содержимое в кавычках: [URL="https://www.pspx.ru/forum/index.php"]
- Заключаем в спойлер
выделенный текст: [SPOILER="Открыть"]
- Вставляем картинку
обтекаемую текстом: [PIC="right"]
Последний раз редактировалось ErikPshat; 11.08.2012 в 06:36.
|
|
|
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
|
|
11.08.2012, 02:07
|
Сообщение: #3 (1045237)
|
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,246
Вы сказали Спасибо: 26,991
Поблагодарили 42,523 раз(а) в 12,172 сообщениях
Сила репутации: 10Репутация: 41718 
(репутация неоспорима)
|
Урок №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 будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. |
Последний раз редактировалось ErikPshat; 11.08.2012 в 06:36.
|
|
|
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
|
|
11.08.2012, 02:07
|
Сообщение: #4 (1045238)
|
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,246
Вы сказали Спасибо: 26,991
Поблагодарили 42,523 раз(а) в 12,172 сообщениях
Сила репутации: 10Репутация: 41718 
(репутация неоспорима)
|
Урок №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 будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого. |
Последний раз редактировалось ErikPshat; 11.08.2012 в 06:37.
|
|
|
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
|
|
11.08.2012, 02:08
|
Сообщение: #5 (1045239)
|
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,246
Вы сказали Спасибо: 26,991
Поблагодарили 42,523 раз(а) в 12,172 сообщениях
Сила репутации: 10Репутация: 41718 
(репутация неоспорима)
|
Урок №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 | Выравнивание по базовой линии
Выравнивание по нижнему краю
Выравнивание по середине
Выравнивание по верхнему краю строки |
Последний раз редактировалось ErikPshat; 11.08.2012 в 06:37.
|
|
|
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
|
|
11.08.2012, 02:09
|
Сообщение: #6 (1045240)
|
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,246
Вы сказали Спасибо: 26,991
Поблагодарили 42,523 раз(а) в 12,172 сообщениях
Сила репутации: 10Репутация: 41718 
(репутация неоспорима)
|
Урок №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; 11.08.2012 в 06:37.
|
|
|
Эти 2 пользователя(ей) сказали Спасибо ErikPshat за это полезное сообщение:
|
|
11.08.2012, 02:33
|
Сообщение: #7 (1045244)
|
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,246
Вы сказали Спасибо: 26,991
Поблагодарили 42,523 раз(а) в 12,172 сообщениях
Сила репутации: 10Репутация: 41718 
(репутация неоспорима)
|
Собственно вот и всё! Какие будут замечания и предложения?
|
|
|
23.09.2012, 09:32
|
Сообщение: #8 (1048742)
|
Модель консоли: Все PSP
Прошивка: 5.00 m33-6
Регистрация: 20.01.2010
Сообщений: 3,422
Вы сказали Спасибо: 2,375
Поблагодарили 1,618 раз(а) в 874 сообщениях
Сила репутации: 1Репутация: 1618 
(обеспечено прекрасное будущее)
|
ErikPshat, чудно! шедевр!
|
|
|
15.10.2017, 23:40
|
Сообщение: #9 (1120398)
|
Модель консоли: PSP-1004
Прошивка: 6.60 PROMOD
Другие консоли: iPad 3 WiFi
Регистрация: 18.12.2006
Адрес: Москва
Возраст: 57
Сообщений: 46,246
Вы сказали Спасибо: 26,991
Поблагодарили 42,523 раз(а) в 12,172 сообщениях
Сила репутации: 10Репутация: 41718 
(репутация неоспорима)
|
Как многие юзеры раздела PS3 знают об этом сайте IRD Library, то многие видели там таблицу с поиском по TitleID.
Я подглядел код и увидел там подключённый плагин: http://jonnysp.bplaced.net/js/jquery.dataTables.min.js
По заголовку этого плагина вышел на сайт производителя: DataTables
Там есть очень много Examples (примеров).
Довольно хороший плагин со множеством настроек, с поиском, с сортировкой, который можно подключить к нам.
Но опять же, таблицу нужно составлять по-любому в HTML-формате, а с этим мозги у многих юзеров этого сделать не в состоянии.
|
|
|
Этот пользователь сказал Спасибо ErikPshat за это полезное сообщение:
|
|
16.10.2017, 06:01
|
Сообщение: #10 (1120407)
|
Модель консоли: PS3 SS
Прошивка: HFW 4.91.2
Регистрация: 10.04.2016
Возраст: 48
Сообщений: 26,783
Вы сказали Спасибо: 10,070
Поблагодарили 14,025 раз(а) в 6,275 сообщениях
Сила репутации: 10Репутация: 13913 
(репутация неоспорима)
|
ну многие оформления делаем чисто мы.
|
|
|
Эти 2 пользователя(ей) сказали Спасибо in1975 за это полезное сообщение:
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
Ваши права в разделе
|
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения
HTML код Выкл.
|
|
|
Текущее время: 19:17. Часовой пояс GMT +3.
Powered by vBulletin® Version 3.8.7 Copyright ©2000 - 2024, vBulletin Solutions, Inc. Перевод: zCarot
PSPx Forum - Сообщество фанатов игровых консолей.
|
|
|