Существует несколько передовых методов форматирования таблиц для улучшения отображения или редактирования вики-таблиц в Википедии. Большинство советов предполагают использование стандартных текстовых редакторов. Хотя существуют некоторые специальные программные пакеты, позволяющие настраивать редактирование, они, как правило, недоступны при переходе на другие компьютеры для редактирования вики.
Некоторые из используемых здесь приемов выходят за рамки основ, описанных на странице справки Википедии « Справка:Таблицы », где объясняются почти все основные параметры форматирования таблиц, а также показаны примеры каждого из них.
Самый быстрый способ создания нескольких столбцов текста следующий:
{| ячейка = 5 | АА || ББ || СС |- | ДД || ЭЭ || ФФ |} Однако читатели часто предпочитают вертикальный список данных, вниз по каждому столбцу.
Граница может быть добавлена с помощью style="border:1px solid #BBB":
{| cellpadding = 5 style = "border:1px solid #BBB" | AA || CC || EE |- | BB || DD || FF |} Обратите внимание, что цвет фона по умолчанию светлее, поэтому для каждой строки можно указать оттенок светло-голубого-зеленого цвета, используя шестнадцатеричный код цвета "#fafeff" (или "#FAFEFF" ), хотя в больших списках цвет может не иметь значения:
{| cellpadding = 5 style = "border:1px solid #BBB" |- bgcolor = "#fafeff" | AA || CC || EE |- bgcolor = "#fafeff" | BB || DD || FF |} Викитекст любой строки можно сжать до одной строки, объединив столбцы двойными чертами «||» между ними и завершив каждую строку символом « <tr>».
:: Пример строки 1: | ''fmtspec'' |AA|| ''fmtspec'' |CC|| ''fmtspec'' |EE < tr > :: Пример строки 2: | ''fmtspec'' |BB|| ''fmtspec'' |DD|| ''fmtspec'' |FF < tr >Иногда это делается, потому что так проще переупорядочивать или просматривать строки, закодированные как отдельные строки текста. Несколько столбцов объединяются двойными чертами "||" между ними, в то время как каждый одинарный черт "|" вдоль строки позволяет использовать спецификатор формата перед каждым элементом данных, который заканчивается двойной чертой. Однако код wikitable для новой строки, черта-тире ("|-"), должен быть опущен путем добавления " <tr>" в конце предыдущей строки над ней. Последняя строка не нуждается в окончании " <tr>".
Таблица может использоваться для обертывания изображения, чтобы таблица могла плавать по направлению к центру страницы (например, с помощью: style="float: right;"). Однако поля таблицы, граница и размер шрифта должны быть точно установлены, чтобы соответствовать типичному отображению изображения. Параметр спецификации изображения "thumb|" (хотя автоматическое создание миниатюр по ширине, заданной пользователем) заставляет широкое левое поле, которое сжимает близлежащий текст, поэтому можно добавить параметр "center|" для подавления отступа левого поля. Однако "center" иногда переносит заголовок на вторую строку (под центрированным полем "[]"), поэтому "thumb|" можно опустить и просто жестко закодировать размер изображения, добавив серую (#BBB) границу. Используя точные параметры для соответствия другим изображениям, плавающую таблицу изображений можно закодировать следующим образом:
{| style = "float:right; border:1px solid #BBB;margin:.46em 0 0 .2em" |- style = "font-size:86%" | style = "vertical-align:top" |[[ Файл : DuraEuropos-TempleOfBel.jpg | 180px ]] <!-- --> < br /> Храм [[ Бела (мифология) | Бела ]] (плавающий). |} Текст внутри плавающей таблицы имеет размер style="font-size:86%" (аналогичный размеру обычных подписей к изображениям). Эта плавающая таблица изображений плавает над типичным полем изображения, но также позволяет настраивать левое поле изображения (см. плавающий пример храма ниже).
Текст подписи можно опустить или просто удалить параметр "thumb|", чтобы подпись была скрыта до тех пор, пока не будет показана с помощью "mouse-over display". К сожалению, параметр "thumb|" (используемый для отображения подписи) также управляет автоматической миниатюрой для изменения размера изображений в соответствии с пользовательскими настройками (размер миниатюры по умолчанию был 180 пикселей, затем после 2009 года стал 220 пикселей). В марте 2010 года было невозможно иметь автоматическую миниатюру, одновременно скрывая подпись: вместо этого параметр "thumb|" запускает оба действия и заставляет подпись отображаться под изображением.
Изображение, заданное параметром «left|», получит широкое правое поле (противоположное полю параметра «right|»), поэтому для перемещения влево потребуется изображение, заданное как «center|» внутри таблицы со стилем style="float:left; margin:0.46em 0.2em".
Вспомните, что за пределами таблицы изображений параметр "right|" заставляет изображение выравниваться (либо) над, либо под инфобоксом, но не будет плавать рядом с инфобоксом. По этой причине многие изображения рядом с инфобоксом обычно устанавливаются как "left|", чтобы выравниваться по левому краю, а не плавать в центре страницы.
Обратите внимание на порядок приоритета от правого поля: сначала идут инфобоксы или изображения, использующие "right|", затем идут плавающие таблицы, и, наконец, любой текст, который все еще может поместиться, будет перенесен. Если первое текстовое слово слишком длинное, текст не поместится, чтобы заполнить левую сторону, поэтому будьте осторожны, создавая "рваное левое поле", когда остается недостаточно места для текста, чтобы поместиться рядом с плавающими таблицами.
Если несколько отдельных таблиц изображений сложены, они будут плавать, чтобы выровняться по странице, в зависимости от ширины страницы. Текст будет сжат, чтобы вместить столько плавающих таблиц, сколько может вместиться, как автоматически выровненный, затем обернется любым текстом (который все еще может вместиться) с левой стороны.
Эту функцию автоматического выравнивания можно использовать для создания «плавающей галереи» изображений: набор из 20 плавающих таблиц будет переноситься (назад, справа налево), как если бы каждая таблица была словом текста, переносимым поперек и вниз по странице. Для переноса в типичном направлении (перенос слева направо) вместо этого определите все эти плавающие таблицы как левосторонние таблицы, используя верхний параметр style="float:left; margin:0.46em 0.2em". Несколько плавающих изображений обеспечивают более гибкую верстку изображений вокруг текста.
Изображения в wikitable можно сдвигать, вставляя неразрывные пробелы ( ) перед или после кода изображения (например, [[File:...]]) . Однако для автоматического центрирования требуется просто использовать параметр |center(см. WP:Расширенный синтаксис изображений#Расположение ).
Обратите внимание, что в примере ниже Col2 использует |center, а Col3 использует :
{| класс="wikitable" |- |<!--Col1-->[[Файл:Домторен Ванаф Бригиттенстраат.jpg|299x125px]] |<!--Col2-->[[Файл:Utrecht 003.jpg|299x125px| center ]] |<!--Col3--> [[Файл:Uitzicht--Domtoren.jpg|299x125px]] |- |<!--Col1-->Башня собора с улицы Бригиттенстраат |<!--Col2-->Клуатральный двор Утрехтского собора |<!--Col3--> <small>Вид с колокольни</small> |}Приведенный выше код генерирует следующую таблицу: обратите внимание, что среднее изображение сада отцентрировано (но не левое изображение), а правое изображение имеет 2 пробела перед «View...», чтобы дать приблизительное центрирование:
Также обратите внимание, что тег <small>...</small>сделал заголовок текста меньшего размера. Шрифты также могут быть размером в процентах ( style="font-size: 87%;"), где точный размер процента, отображаемый на экране, зависит от различных размеров, разрешенных для конкретного шрифта; браузер приблизится к ближайшему возможному размеру.
| style="font-size: 87%;" | Вид с колокольни
Атрибут столбца, указанный выше, используется style=для установки размера шрифта для заголовка, следующего за вторым символом вертикальной черты.
A font-size: 65%;— чрезмерно мелкий шрифт, а font-size: 87%;— шрифт среднего размера, немного больше, чем тот, который создается тегом <small>.
Примечание: Этот пример недоступен , и его следует избегать, насколько это возможно. Например, вложенные таблицы (таблицы внутри таблиц) следует по возможности разделять на отдельные таблицы.
Вот более продвинутый пример, демонстрирующий еще несколько вариантов создания таблиц.
Пользователи могут поиграть с этими настройками в своей таблице, чтобы увидеть, какой эффект они дадут. Не все эти методы могут быть уместны во всех случаях; например, то, что можно добавлять цветные фоны, не означает, что это всегда хорошая идея. Постарайтесь сделать разметку в таблицах относительно простой — помните, что другие люди тоже будут редактировать статью! Однако этот пример должен дать представление о том, что возможно.
Викитекст:
Текст перед центрированной таблицей...{| style = "border: 1px сплошной черный; border-spacing: 0; margin: 1em auto;" |+ '''Пример таблицы'''|-! style = "border: 1px solid black; padding: 5px; background: #efefef;" | Первый заголовок ! colspan = "2" style = "border: 1px solid black; padding: 5px; background: #ffdead;" | Второй заголовок |-| style = "border: 1px solid black; padding: 5px;" | Верхний левый угол | style = "border: 1px solid black; padding: 5px;" | Верхний средний | rowspan = "2" style = "border: 1px сплошной черный; border-bottom: 3px сплошной серый; padding: 5px; vertical-align: top;" | Правая сторона|-| style = "border: 1px solid black; border-bottom: 3px solid grey; padding: 5px;" | Нижний левый угол | style = "border: 1px solid black; border-bottom: 3px solid grey; padding: 5px;" | Нижняя середина |-| colspan = "3" style = "border: 1px solid black; text-align: center;" | Текст перед вложенной таблицей...{||+ ''Стол в столе''|-| стиль = "text-align: center; width: 150px;" | [[ Файл : Wiki.png ]] | стиль = "text-align: center; width: 150px;" | [[ Файл : Wiki.png ]] |-| colspan="2" style="text-align:center; border-top: 1px сплошной красный; <!-- --> border-right: 1px сплошной красный; border-bottom: 2px сплошной красный; <!-- --> border-left: 1px сплошной красный;" |Два логотипа Википедии|}...текст после вложенной таблицы|}...текст после центрированной таблицыКак это выглядит в браузере:
Текст перед центрированной таблицей...
...текст после центрированной таблицы
Таблица может использоваться для обертывания изображения, чтобы таблица могла плавать по направлению к центру страницы (например, с помощью: style="float: right;"). Однако поля таблицы, граница и размер шрифта должны быть точно установлены, чтобы соответствовать типичному отображению изображения. Параметр File-spec |thumb(хотя и автоматически миниатюризируется до ширины, предпочитаемой пользователем) принудительно устанавливает широкое левое поле, которое сжимает близлежащий текст, поэтому параметр |centerможно добавить для подавления отступа левого поля. Однако |centerиногда переносит заголовок на вторую строку (под центрированным полем "[]"), поэтому |thumbего можно опустить и просто жестко закодировать размер изображения, добавив серую (#BBB) границу. Используя точные параметры для соответствия другим изображениям, плавающую таблицу изображений можно закодировать следующим образом:
{| style = "float: right; border: 1px solid #BBB; margin: .46em 0 0 .2em;" |- style = "font-size: 86%;" | style = "vertical-align: top;" |[[ Файл : DuraEuropos-TempleOfBel.jpg | 180px ]] <!-- --> < br > Храм [[ Бела (мифология) | Бела ]] (плавающий) |} Текст внутри плавающей таблицы имеет размер style="font-size: 86%;". Эта плавающая таблица изображений плавает в типичном поле изображения, но позволяет настраивать левое поле изображения (см. плавающий пример храма ниже).
Текст подписи можно опустить или удалить параметр "thumb|", чтобы подпись была скрыта до "mouse-over display". К сожалению, параметр |thumb(используемый для отображения подписи) также управляет автоматической миниатюрой для изменения размера изображений в соответствии с пользовательскими настройками. Чтобы иметь автоматическую миниатюру, одновременно скрывая подпись, используйте |frameless|rightвместо |thumb.
Набор изображений с параметром |leftимеет широкое правое поле (противоположное полю параметра |right), поэтому перемещение влево может быть достигнуто с помощью набора изображений |centerвнутри таблицы со стилем = "float:left; margin:0.46em 0.2em;".
Напомним, что за пределами таблицы изображений этот параметр |rightзаставляет изображение выравниваться (либо) выше, либо ниже информационного поля, но не будет плавать рядом с информационным полем.
Обратите внимание на порядок приоритета : сначала идут инфобоксы или изображения с использованием |right, затем плавающие таблицы и, наконец, любые текстовые обтекатели, которые все еще могут поместиться. Если первое слово текста слишком длинное, текст не поместится, чтобы заполнить левую сторону, поэтому будьте осторожны, создавая «рваное левое поле», когда для текста не хватает места, чтобы поместиться рядом с плавающими таблицами.
Если несколько таблиц с одним изображением сложены друг на друга, они плавают, чтобы выровняться по странице, в зависимости от ширины страницы. Текст сжимается, чтобы вместить столько плавающих таблиц, сколько может вместиться, автоматически выравнивается, а затем переносит весь текст, который все еще может вместиться с левой стороны.
Эту функцию автоматического выравнивания можно использовать для создания «плавающей галереи» изображений: набор из 20 плавающих таблиц обтекает (назад, справа налево), как если бы каждая таблица была словом текста, которое обтекает поперек и вниз страницы. Для обтекания в типичном направлении (обтекание слева направо) вместо этого определите все эти плавающие таблицы как левосторонние таблицы с помощью параметра top style="float:left; margin:0.46em 0.2em;". Несколько плавающих изображений обеспечивают более гибкую верстку изображений вокруг текста.
Реальное программное обеспечение для набора текста, на протяжении более 30 лет, как правило, имело простые директивы для запуска выравнивания по левому краю, по правому краю, по центру или без отступа (за пределами линии левого поля). Однако на протяжении десятилетий в HTML было лишь ограниченное количество вариантов простого выравнивания (один: <center>, который сейчас устарел). Методом устранения отступа первого слова абзаца является помещение абзаца в текстовую таблицу, где первое слово (или слог) находится (отдельно) в столбце 1, а остальной текст — в столбце 2.
< table cellspacing = 0 cellpadding = 0 >< tr >< td valign = top > Bee < td > thoven сочинил [[ Лунную сонату ]]< br /> когда терял слух. </ table > Обратите внимание на использование обоих « cellspacing=0 cellpadding=0», чтобы не разделять пробел между первым слогом «Bee» и «thoven».
Третий столбец можно использовать для заключения текста во внешние скобки, а затем поместить закрывающую скобку "]" в столбец 3 следующим образом:
< table >< tr >< td valign = top > [ < td > Это строка 1. < br /> Строка 2. < td > ] </ table > В течение многих лет в HTML таблица всегда вызывала неявный перенос строки (или разрыв строки ). Поэтому, чтобы сохранить таблицу в строке, обходной путь — поместить всю строку в таблицу, а затем встроить таблицу в таблицу, используя внешнюю таблицу, чтобы заставить всю строку оставаться вместе. Рассмотрим следующие примеры:
* Это тестовая таблица < table style = "border:1px solid black" >< tr >< td > HELLO WORLD </ table > , за которой следует этот текст.* < table style = "background-color:#fafeff" >< tr >< td > Это тестовая таблица < td >< table height = 11px >< tr >< td style = "border:1px solid black; font-size:60%" > ПРИВЕТ, МИР </ table ></ td >< td > за которой следует этот текст. </ table > Эта строка — еще один текст после внешней таблицы.Используйте style="font-size:60%", чтобы уменьшить текст внутри поля. Однако мелкий текст можно заменить мелкими изображениями (выровненными внутри внутренней таблицы). Внешняя таблица предназначена только для 1 строки, поэтому, чтобы сделать 2-ю строку ровной, точная длина строки 1 должна быть определена заранее, чтобы соответствовать длине других строк.
Иногда столбцы данных необходимо перечислить в другом порядке, например, разное содержимое во 2-м столбце. Однако, поскольку wikitable закодирован на языке разметки, столбцы нельзя просто перетаскивать по экрану, как в редакторе, ориентированном на столбцы. Вместо этого суровая реальность заключается в том, что утомительное ручное редактирование каждой ячейки в строке часто требуется как самое быстрое решение в долгосрочной перспективе.
Однако некоторые текстовые редакторы позволяют определить цикл повторения для поиска и сдвига каждой 7-й строки или чего-то подобного, как повторяющийся шаблон, который может переупорядочить столбцы в большой таблице. В другом методе, который иногда используется, каждый элемент данных сначала префиксируется алфавитным кодом, вручную кодируется для конечной последовательности, затем эти строки сортируются, а затем все начальные текстовые префиксы удаляются. Сортировку можно выполнять в отдельных файлах, например, с помощью команды DOS-prompt: SORT myfile.DAT > myfile2.DAT, или же использовать текстовый редактор, такой как NoteTab, в котором есть опция modify-lines-sort. Редактирование-трюки наиболее полезны, когда необходимо изменить несколько таблиц, тогда время, необходимое для разработки сложных шаблонов редактирования, можно применить к каждой таблице. Для каждой таблицы вставьте альфа-префикс в каждый столбец (сделав каждый токен строки "|-" для сортировки как нулевой столбец, например, префикс "Row124col00"), затем отсортируйте в новый файл, а затем удалите префиксы записей столбцов.
Опять же, имейте в виду, что утомительное ручное редактирование элементов в каждой строке часто быстрее, чем потенциальная задержка из-за неправильного автоматического редактирования. Если в одной таблице меняются местами всего 2 столбца, то редактирование методом вырезания/вставки (этих записей столбцов) обычно быстрее, чем добавление префиксов столбцов, сортировка и удаление префиксов.
Другой вариант — скопировать всю таблицу с отображаемой страницы, вставить текст в электронную таблицу, переместить столбцы по своему усмотрению. Затем реконструировать строки таблицы с помощью формулы. Эта формула обрабатывает таблицу из трех столбцов, реконструируя одну строку. Редакторы могут скопировать строку для каждой строки таблицы, а затем скопировать строки формулы обратно на страницу редактирования.
=A1&" || "&A2&" || "&A3&"<tr>"
Если вы используете таблицы для двухмерной графики, вы можете обнаружить "фичу" в HTML, которая способствует седым волосам. Она может влиять как на строки, так и на столбцы, в зависимости от использования rowspan или colspan .
В этой таблице из 7 строк три ячейки имеют высоту 3 строк, но всего строк 6. Где строка 4? Есть строка 5-4!
Ответ заключается в том, что когда в таблице есть строка, не содержащая ни одной ячейки rowspan=1, эта строка «сжимается» вверх и исчезает.
Решение : разделите одну из высоких ячеек так, чтобы строка получила одну ячейку rowspan=1 (и не обращайте внимания на возможную потерю центрирования текста). Затем удалите границу между ними. Не забудьте заполнить ячейку ничем ( ). Это единственное решение, которое правильно сохраняет высоту ячейки, совпадающую с высотой ссылочной таблицы из семи строк.{{zwsp}}
Или, в этом случае, вы можете просто добавить третью строку текста (заполняя 3 строки доступного пространства) в ячейку «строка два/3 строки», сохраняя в то же время возможность центрирования текста:
Можно удалить границы между соседними ячейками в таблицах, например, если вам нужна непрямоугольная суперячейка.
В этой таблице желтые ячейки настроены именно для этого. Но зачем вообще нужны границы?
Если удалить class=wikitable, то можно увидеть, что таблица настроена правильно:
Класс wikitable требует, чтобы граница между двумя ячейками исчезала ТОЛЬКО тогда, когда ячейки начинаются в ОДНОЙ и ТОЙ ЖЕ строке (или столбце для вертикального эффекта).
Решение : разрезать их на части! И забыть о центрировании текста. Не забудьте заполнить новые ячейки ничем (nbsp). Здесь более темным желтым:
{| cellpadding = 5 style = "border:1px solid #AA6633" |- bgcolor = "#fafeff" | Это блокнот для отображения цвета границы.|}Хотя кодировка может показаться немного неуклюжей, результаты легко контролируются для интервалов и выравнивания. Ширина таблицы по умолчанию останется одинаковой для более широких или более узких окон, сохраняя выравнивание с текстом слева (или заголовками разделов) за пределами таблицы.
Редактирование викитекста/таблиц в WikibooksРедактирование Wikitext/Таблиц, готовых к использованию в Wikibooks