Академия Корана:Как делать таблицы: различия между версиями

Материал из Академия Корана
Перейти к навигации Перейти к поиску
Новая страница: «{{shortcut|ВП:Т|ВП:ТАБ}} {{Руководства}} Таблицы являются удобной формой для отображения информ…»
 
 
(нет различий)

Текущая версия от 14:05, 9 мая 2016

Шаблон:Shortcut Шаблон:Руководства Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою цель, когда между строчками и столбцами имеется смысловая связь, то есть информацию в них можно рассортировать неким образом, например, по дате или алфавиту.

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

Рекомендуется также следовать правилам оформления таблиц, особенно в случаях, если цветовое оформление не несёт специального смысла.

Основы

Ячейка

Любая таблица в wiki-стиле состоит из ячеек.

Простейшая таблица состоит из одной ячейки:

Это ячейка

Cложные таблицы состоят из множества ячеек:

Это ячейка
и это ячейка
и это ячейка


Строка. Столбец

Ячейки могут объединяться в строки и/или столбцы. Таблицы, состоящие из двух и более строк, называются многострочными.

← Это строка →
← и это строка →
← и это строка →


↑ ↑ ↑
Это столбец и это столбец и это столбец
↓ ↓ ↓


Заголовок таблицы

Дополнительным элементом таблицы является заголовок таблицы.

Это заголовок таблицы
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9


Заголовок строки/столбца

Строки и столбцы в таблице тоже могут иметь заголовки.

Это заголовок столбца и это заголовок столбца
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
Ячейка 5 Ячейка 6


и это заголовок строки Ячейка 1 Ячейка 2 Ячейка 3
Это заголовок строки Ячейка 4 Ячейка 5 Ячейка 6
и это заголовок строки Ячейка 7 Ячейка 8 Ячейка 9


Классы таблиц

По своему оформлению таблицы подразделяются на классы.

wikitable
Таблица 1
Ячейка 1
Ячейка 2
Ячейка 3
   
standard
Таблица 2
Ячейка 1
Ячейка 2
Ячейка 3
   
tiles
Таблица 3
Ячейка 1
Ячейка 2
Ячейка 3
   
simple
Таблица 3
Ячейка 1
Ячейка 2
Ячейка 3


Классы ячеек

Оформление ячеек может быть осуществлено посредством классов оформления ячеек.


Интерактивность

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

Эту таблицу можно свернуть/развернуть:

Общий заголовок
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2

В этой таблице можно сортировать данные по убыванию/возрастанию в столбцах «Латиница» и «Кириллица», но не в столбце «Цифры»:

Латиница Кириллица Цифры
A А 10
B Б 20
C В 30
D Г 40

Подробнее о сортировке таблиц см. m:Help:Sorting.


Прочие характеристики таблицы и её элементов

Таблица в тексте статьи может быть выровнена по любому краю, а также может быть «плавающей».

Исходный код таблицы

Открывающие и закрывающие элементы

Исходный код таблицы заключается в фигурные скобки {  }. Первая фигурная скобка исходного кода таблицы называется открывающей скобкой, последняя — закрывающей. После открывающей скобки таблицы ставится вертикальная черта |. Вертикальная черта также ставится перед закрывающей скобкой таблицы. Открывающая скобка таблицы с вертикальной чертой называется открывающим элементом таблицы, а вертикальная черта с закрывающей скобкой — закрывающим элементом таблицы.

Исходный код:   Представление в Википедии: 
{|
 |Cодержимое таблицы
 |}
   
Cодержимое таблицы

Ячейки

Каждая ячейка в таблице начинается с одинарной вертикальной черты |, после которой пишется содержимое ячейки. Между вертикальной чертой и первой буквой текста содержимого ячейки допускается вставлять пробел.

Запись каждой ячейки в таблице начинают, как правило, с новой строчки:

Исходный код:   Представление в Википедии: 
{| border="1"
 |Ячейка А
 |Ячейка Б
 |Ячейка В
 |}
   
Ячейка А Ячейка Б Ячейка В

Вики-разметка также позволяет записывать ячейки в одну строчку. При этом, все ячейки, следующие за первой ячейкой в строке, начинаются с двойной вертикальной черты: ||. Например:

Исходный код:   Представление в Википедии: 
{| border="1"
 |Ячейка А||Ячейка Б||Ячейка В
 |}
   
Ячейка А Ячейка Б Ячейка В

Строки и столбцы

Ячейки в таблице можно организовывать в строки.

Строка таблицы начинается с вертикальной черты, после которой пишется дефис: |-. Таблица может иметь множество строк.

Записи ячеек в табличной строке начинают с новой строчки в исходном коде таблицы. Каждая последующая ячейка в строке может быть записана с новой строчки или в одну строчку.

Пример записи ячеек с новой строчки

Исходный код:   Представление в Википедии: 
{| border="1"
 |-
 |Ячейка А-1
 |Ячейка Б-1
 |Ячейка В-1
 |-
 |Ячейка А-2
 |Ячейка Б-2
 |Ячейка В-2
 |-
 |Ячейка А-3
 |Ячейка Б-3
 |Ячейка В-3
 |}
   
Ячейка А-1 Ячейка Б-1 Ячейка В-1
Ячейка А-2 Ячейка Б-2 Ячейка В-2
Ячейка А-3 Ячейка Б-3 Ячейка В-3

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


Пример записи ячеек в одну строчку

Исходный код:   Представление в Википедии: 
{| border="1"
 |-
 |Ячейка А-1||Ячейка Б-1||Ячейка В-1
 |-
 |Ячейка А-2||Ячейка Б-2||Ячейка В-2
 |-
 |Ячейка А-3||Ячейка Б-3||Ячейка В-3
 |}
   
Ячейка А-1 Ячейка Б-1 Ячейка В-1
Ячейка А-2 Ячейка Б-2 Ячейка В-2
Ячейка А-3 Ячейка Б-3 Ячейка В-3

Примеры простых таблиц

Шаблон:Подробно

Пример таблицы, состоящей из одной строки

Пример записи ячеек с новой строчки

Исходный код:   Представление в Википедии: 
{|
 |Ячейка 1
 |Ячейка 2
 |Ячейка 3
 |}
   
Ячейка 1 Ячейка 2 Ячейка 3


Пример записи ячеек в одну строчку

Исходный код:   Представление в Википедии: 
{|
 |Ячейка 1||Ячейка 2||Ячейка 3
 |}
   
Ячейка 1 Ячейка 2 Ячейка 3

Пример многострочной таблицы

Пример записи ячеек с новой строчки

Исходный код:   Представление в Википедии: 
{| border="1"
 |-
 |Ячейка А-1
 |Ячейка Б-1
 |Ячейка В-1
 |-
 |Ячейка А-2
 |Ячейка Б-2
 |Ячейка В-2
 |-
 |Ячейка А-3
 |Ячейка Б-3
 |Ячейка В-3
 |}
   
Ячейка А-1 Ячейка Б-1 Ячейка В-1
Ячейка А-2 Ячейка Б-2 Ячейка В-2
Ячейка А-3 Ячейка Б-3 Ячейка В-3

Пример записи ячеек в одну строчку

Исходный код:   Представление в Википедии: 
{| border="1"
 |-
 |Ячейка А-1||Ячейка Б-1||Ячейка В-1
 |-
 |Ячейка А-2||Ячейка Б-2||Ячейка В-2
 |-
 |Ячейка А-3||Ячейка Б-3||Ячейка В-3
 |}
   
Ячейка А-1 Ячейка Б-1 Ячейка В-1
Ячейка А-2 Ячейка Б-2 Ячейка В-2
Ячейка А-3 Ячейка Б-3 Ячейка В-3

Шаблон:Подробно

Выравнивание текста в ячейках

Таблица
текст 
{| class="wikitable"
|-
! Таблица
|-
| текст
|}
Таблица
текст 
{| class="wikitable" style="text-align:center"
|-
! Таблица
|-
| текст
|}

Табличные рамки

Вид рамки описывается в первой строке, сразу после {|. Не забудьте, что между ними и атрибутом должен быть пробел.

Толщина линий рамки задаётся атрибутом border="n", где «n» — толщина линии:

Исходный код:   В Википедии это будет выглядеть следующим образом: 
{| border="1"
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}
   
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Изменять оформление рамки таблицы также можно с помощью атрибута class. Подробнее об этом см. «Классы таблиц». Как правило, рекомендуется использовать class="standard":

Исходный код:   В Википедии это будет выглядеть следующим образом: 
{| class="standard"
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}
   
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Заголовки

Заголовок таблицы

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

Для того чтобы у таблицы появился заголовок, с новой строчки после открывающего элемента таблицы поставьте вертикальную черту и знак «плюс» |+ и напишите текст заголовка.

Исходный код:   Представление в Википедии: 
{| border="1"
 |+ Очень длинный-длинный текст заголовка таблицы.
 |Ячейка 1
 |Ячейка 2
 |-
 |Ячейка 3
 |Ячейка 4
 |}
   
Очень длинный-длинный текст заголовка таблицы.
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Заголовок строки/столбца

Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных чёрточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков. Подробнее о стилях оформления таблиц см. Википедия:Оформление таблиц.

Пример:

Исходный код:   Представление в Википедии: 
{| border="1"
 !Заголовок 1
 !Заголовок 2
 !Заголовок 3
 |-
 !Заголовок А
 |Ячейка А-2
 |Ячейка А-3
 |-
 !Заголовок Б
 |Ячейка Б-2
 |Ячейка Б-3
 |-
 !Заголовок В
 |Ячейка В-2
 |Ячейка В-3
 |}
   
Заголовок 1 Заголовок 2 Заголовок 3
Заголовок А Ячейка А-2 Ячейка А-3
Заголовок Б Ячейка Б-2 Ячейка Б-3
Заголовок В Ячейка В-2 Ячейка В-3

В классе standard заголовки подсвечиваются:

Исходный код:   Представление в Википедии: 
{| class="standard"
 !Заголовок 1
 !Заголовок 2
 !Заголовок 3
 |-
 !Заголовок А
 |Ячейка А-2
 |Ячейка А-3
 |-
 !Заголовок Б
 |Ячейка Б-2
 |Ячейка Б-3
 |-
 !Заголовок В
 |Ячейка В-2
 |Ячейка В-3
 |}
   
Заголовок 1 Заголовок 2 Заголовок 3
Заголовок А Ячейка А-2 Ячейка А-3
Заголовок Б Ячейка Б-2 Ячейка Б-3
Заголовок В Ячейка В-2 Ячейка В-3

Объединение ячеек

В wiki-стиле, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали. Для объединения по вертикали применяется атрибут rowspan="n", где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.

Пример:

Вертикальное объединение двух ячеек пишется так:         Выглядеть это будет так: 
{| border="1"
 |Ячейка 1 
 |rowspan="2" |Ячейка 2, объединяет два ряда таблицы
 |Ячейка 3
 |- 
 |Ячейка 4
 |Ячейка 5
 |}
        
Ячейка 1 Ячейка 2, объединяет два ряда таблицы Ячейка 3
Ячейка 4 Ячейка 5
Для объединения по горизонтали используется атрибут colspan="n".         Выглядит это так: 
{| border="1"
 |Ячейка 1 
 |colspan="2" |Ячейка 2, объединяет два столбца
 |-
 |Ячейка 3 
 |Ячейка 4
 |Ячейка 5
 |}
        
Ячейка 1 Ячейка 2, объединяет два столбца
Ячейка 3 Ячейка 4 Ячейка 5
Для создания сложного заголовка таблицы можно воспользоваться следующей конструкцией:         Выглядеть это будет так: 
{| border="1"
|-
! rowspan="2" colspan="3" | Ячейка в две строки
! colspan="2" | Ячейка в два столбца
|-align="center"
| А || Б
|-align="center"
| 1 || 2 || 3 || 4 || 5
|-align="center"
| 1 || 2 || 3 || 4 || 5
|}
       
Ячейка в две строки Ячейка в два столбца
А Б
1 2 3 4 5
1 2 3 4 5

Цветовое оформление таблиц

Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:

  • для отдельного слова — <span style="color:#abcdef">Tекст</span>;
  • для длинного текста — <div style="color:#abcdef">Текст, текст.</div>,

где «abcdef» — индекс цвета в Таблице цветов. 

Пример:
Для "раскраски" текста пишут так:
{| border="1"
 |Ячейка 1*1
 |Здесь только одно <span style="color:#ff00ff">розовое</span> слово.
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |<div style="color:#33сс66">А здесь зелёным цветом выделен длинный-длинный абзац.</div>
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Википедии это будет выглядеть следующим образом:

Ячейка 1*1 Здесь только одно розовое слово. Ячейка 3*1
Ячейка 1*2 Ячейка 2*2
А здесь выделен зелёным цветом длинный-длинный абзац.
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Сделать цветную ячейку можно с помощью атрибута style="background:#rrggbb", где «rrggbb» обозначает индекс цвета в таблице цветов. 

Пример:
Для «раскраски» одной ячейки пишется так:
{| border="1"
 |Ячейка 1*1
 |style="background:#ffcc00"|Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |style="background:#ccff00"|Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

В Википедии это будет выглядеть следующим образом:

Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Вложенные таблицы

Основные принципы

Под вложенной таблицей подразумевается таблица, вложенная в какую-либо ячейку существующей, ранее созданной таблицы (родительская таблица). Написание кода вложенной таблицы подчиняется общим правилам для таблиц.

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

Пример

Мы хотим в ячейке 2 родительской таблицы сделать вложенную таблицу.

Исходный код влож. табл.:   Исходный код родит. табл.:   В Википедии родит. табл. будет выглядеть так: 
 {|
  |Ячейка A
  |-
  |Ячейка Б
  |-
  |Ячейка В
  |}
  →   
{| border="1"
 |Ячейка 1
 |Ячейка 2
 {|
  |Ячейка A
  |-
  |Ячейка Б
  |-
  |Ячейка В
  |}
 |Ячейка 3
 |}
   
Ячейка 1 Ячейка 2
Ячейка A
Ячейка Б
Ячейка В
Ячейка 3

Обратите внимание, что без указания параметров рамки (border="n") для вложенной таблицы, по умолчанию толщина линии рамки вложенной таблицы равна «1».

Объединённые таблицы

Основные принципы

Под объединённой таблицей понимается таблица, состоящая, как правило, из одной строки, в нечётных ячейках которой содержатся вложенные таблицы.

Посредством объединённой таблицы вы можете элегантно оформить данные в виде двух (или более) отдельных таблиц, расположенных рядом друг с другом в горизонтальном направлении, например:

Таблица 1
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
   
Таблица 2
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
   
Таблица 3
Ячейка 3.1
Ячейка 3.2
Ячейка 3.3

Для создания объединённой таблицы, показанной в примере выше, сначала напишите код объединённой таблицы из одной строки с пятью ячейками, которые будут служить столбцами объединённой таблицы: 

{|
 |Столбец 1
 |Столбец 2
 |Столбец 3
 |Столбец 4
 |Столбец 5
 |}
    

Примечания

  • Столбец 1 — в этой ячейке будет вложенная таблица № 1.
  • Столбец 2 — эта ячейка будет служить пробелом между таблицами № 1 и 2.
  • Столбец 3 — в этой ячейке будет вложенная таблица № 2.
  • Столбец 4 — эта ячейка будет служить пробелом между таблицами № 2 и 3.
  • Столбец 5 — в этой ячейке будет вложенная таблица № 3.

Затем вместо записей «Столбец 2» и «Столбец 4» вставьте знак неразрывного пробела — &nbsp; — который установит расстояние между расположенными рядом таблицами. Если расстояние между таблицами вам покажется узковатым, добавьте один или более знаков неразрывного пробела, отделяя их друг от друга двумя вертикальными чёрточками, например:  || || || .

Исходный код объединённой таблицы:   В Википедии это будет выглядеть так: 
{|
  |Столбец 1
  | || 
  |Столбец 3
  | || 
  |Столбец 5
  |}
   
Столбец 1     Столбец 3     Столбец 5

Затем в нечётные столбцы вместо записей «Столбец 1», «Столбец 2» и «Столбец 3» с новой строки впишите коды вложенных таблиц.

Исходный код объединённой таблицы:   В Википедии это будет выглядеть так: 
{|
  |
  {| class="standard"
   !Таблица 1
   |-
   |Ячейка 1.1
   |-
   |Ячейка 1.2
   |-
   |Ячейка 1.3
   |}
  | || 
  |
  {| class="standard"
   !Таблица 2
   |-
   |Ячейка 2.1
   |-
   |Ячейка 2.2
   |-
   |Ячейка 2.3
   |}
  | || 
  |
  {| class="standard"
   !Таблица 3
   |-
   |Ячейка 3.1
   |-
   |Ячейка 3.2
   |-
   |Ячейка 3.3
   |}
  |}
   
Таблица 1
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
   
Таблица 2
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
   
Таблица 3
Ячейка 3.1
Ячейка 3.2
Ячейка 3.3

В объединённых таблицах можно располагать вложенные таблицы любой сложности и формата, а также делать объединённые таблицы многострочными. Однако следует учитывать, что с усложнением вложенных таблиц увеличивается сложность исходного кода и, соответственно, затрудняется его починка в случае неосторожного обращения при редактировании. Ниже приведён пример более сложных вложенных таблиц с заголовками и записью кода ячеек в одну строчку. 

{|
 |
 {| class="standard"
  !Заголовок 1||Заголовок 2
  |-
  |Ячейка 1-1||Ячейка 1-2
  |-
  |Ячейка 1-3||Ячейка 1-4
  |-
  |Ячейка 1-5||Ячейка 1-6
  |-
  |Ячейка 1-7||Ячейка 1-8
  |-
  |Ячейка 1-9||Ячейка 1-10
  |-
  |Ячейка 1-11||Ячейка 1-12
  |}
 | || 
 |
 {| class="standard"
  !Заголовок 1||Заголовок 2
  |-
  |Ячейка 3-1||Ячейка 3-2
  |-
  |Ячейка 3-3||Ячейка 3-4
  |-
  |Ячейка 3-5||Ячейка 3-6
  |-
  |Ячейка 3-7||Ячейка 3-8
  |-
  |Ячейка 3-9||Ячейка 3-10
  |-
  |Ячейка 3-11||Ячейка 3-12
  |}
 | || 
 |
 {| class="standard"
  !Заголовок 1||Заголовок 2
  |-
  |Ячейка 5-1||Ячейка 5-2
  |-
  |Ячейка 5-3||Ячейка 5-4
  |-
  |Ячейка 5-5||Ячейка 5-6
  |-
  |Ячейка 5-7||Ячейка 5-8
  |-
  |Ячейка 5-9||Ячейка 5-10
  |-
  |Ячейка 5-11||Ячейка 5-12
  |}
 |}
        
Заголовок 1 Заголовок 2
Ячейка 1-1 Ячейка 1-2
Ячейка 1-3 Ячейка 1-4
Ячейка 1-5 Ячейка 1-6
Ячейка 1-7 Ячейка 1-8
Ячейка 1-9 Ячейка 1-10
Ячейка 1-11 Ячейка 1-12
   
Заголовок 1 Заголовок 2
Ячейка 3-1 Ячейка 3-2
Ячейка 3-3 Ячейка 3-4
Ячейка 3-5 Ячейка 3-6
Ячейка 3-7 Ячейка 3-8
Ячейка 3-9 Ячейка 3-10
Ячейка 3-11 Ячейка 3-12
   
Заголовок 1 Заголовок 2
Ячейка 5-1 Ячейка 5-2
Ячейка 5-3 Ячейка 5-4
Ячейка 5-5 Ячейка 5-6
Ячейка 5-7 Ячейка 5-8
Ячейка 5-9 Ячейка 5-10
Ячейка 5-11 Ячейка 5-12

Примерно такой же результат можно получить с помощью шаблона {{столбцы}} — см. его документацию.

Выравнивание объединённых таблиц

Объединяемые таблицы выравниваются по вертикали. Для выравнивания по верхнему краю таблиц с разным количеством строк применяется параметр style="vertical-align:top" или valign="top".

Пример без выравнивания

Таблица 1
Текст
Текст
Таблица 2
Текст
Таблица 3
Текст
Текст
Текст
Исходный код для примера без выравнивания
{|
|
{| class="wikitable"
 |-
 ! Таблица 1
 |-
 | Текст
 |-
 | Текст
 |}
|
{| class="wikitable"
 |-
 ! Таблица 2
 |-
 | Текст
 |}
|
{| class="wikitable"
 |-
 ! Таблица 3
 |-
 | Текст
 |-
 | Текст
 |-
 | Текст
|}
|}

Пример с выравниванием

Таблица 1
Текст
Текст
Таблица 2
Текст
Таблица 3
Текст
Текст
Текст
Исходный код для примера с выравниванием
{|
|valign="top"|
{| class="wikitable"
 |-
 ! Таблица 1
 |-
 | Текст
 |-
 | Текст
 |}
|valign="top"|
{| class="wikitable"
 |-
 ! Таблица 2
 |-
 | Текст
 |}
|valign="top"|
{| class="wikitable"
 |-
 ! Таблица 3
 |-
 | Текст
 |-
 | Текст
 |-
 | Текст
|}
|}

Ширина таблицы и столбцов

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

Пример:
{| border="1" width="75%"
 |+Таблица 1
 |Ячейка 1*1 - long - long- long- long- long
 |Ячейка 1*2
 |-
 |Ячейка 1*3
 |Ячейка 1*4
 |}
{| border="1" width="75%"
 |+Таблица 2
 |Ячейка 2*1
 |Ячейка 2*2
 |-
 |Ячейка 2*3
 |Ячейка 2*4
 |}

Выглядеть это будет так:

Таблица 1
Ячейка 1*1 - long - long- long- long- long Ячейка 1*2
Ячейка 1*3 Ячейка 1*4
Таблица 2
Ячейка 2*1 Ячейка 2*2
Ячейка 2*3 Ячейка 2*4

С помощью этого же атрибута можно регулировать ширину отдельных столбцов: 

Пример:
{| border="1" width="75%"
 |+Таблица 1
 | width="40%"|Ячейка 1*1 - long - long- long- long- long
 | width="20%"|Ячейка 1*2 - long - long- long- long- long
 | width="40%"|Ячейка 1*3 - long - long- long- long- long
 |-
 |Ячейка 1*4
 |Ячейка 1*5
 |Ячейка 1*6
 |}
Таблица 1
Ячейка 1*1 - long - long- long- long- long Ячейка 1*2 - long - long- long- long- long Ячейка 1*3 - long - long- long- long- long
Ячейка 1*4 Ячейка 1*5 Ячейка 1*6

Для задания определённой ширины ячейки с вложенной таблицей следует указать для неё атрибут width, но закрыть этот атрибут вертикальной чёрточкой: 

{| border="1"
 |Ячейка 1
 | width="50%"|
 {| border="2"
  |Ячейка A
  |-
  |Ячейка B
  |}
 |Ячейка 3
 |}
       
Ячейка 1
Ячейка A
Ячейка B
Ячейка 3

Сворачивающиеся и сортируемые таблицы

При использовании таблиц может оказаться полезным не загромождать ими статью, но в то же время дать в них всю необходимую и полезную информацию (которая може быть интересна не всем читателям). Для этого можно использовать сворачивающиеся таблицы указав, что они по умолчанию должны показываться в свёрнутом состоянии. 

{| class="wikitable collapsible collapsed"
|-
! Заголовок таблицы
|-
| Содержание таблицы (остающееся по умолчанию скрытым)
|-
| Продолжение скрытого содержания
|}

Получаем:

Если не указать collapsed, то таблица будет сворачивающейся, но по умолчанию - развёрнутой.

Также можно сделать таблицу такой, что её содержание будет сортироваться (по вертикали), включив в заголовок команду "sortable", причём сортировка может проводиться по любому из столбцов, выбранному читателем. Такие сортируемые таблицы могут одновременно быть сворачивающимися. При этом нужно учесть следующее:

  • Не следует делить таблицу на секции с помощью заголовков секций (или чего-то схожего), занимающего несколько ячеек (объединённых).
  • Если в ячейке находятся числа, то для успешной сортировки таких ячеек необходимо, чтобы перед числами не было никаких буквенных пояснений - "Номер", "Около", "для N>5" - содержимое ячейки должно начинаться с сортируемых цифр. Кроме того, для корректной сортировки столбцов чисел, содержащих нецифровые символы, нужно дать движку указание на необходимость применения числовой сортировки, проставив в мета-заголовке столбца data-sort-type="number".
{| class="wikitable collapsible sortable"
|-
! Числа !! Буквы !! Числа и буквы после них
|-
| 1 || в || 90 млн  
|-
| 3 || а || 5 десятков  
|-
| 2 || б || 10 тыс 
|}

Получаем:

Числа Буквы Числа и буквы после них
1 в 90 млн
3 а 5 десятков
2 б 1 тыс

Вариант той же таблицы, по умолчанию свёрнутой:

Более подробно работа разных видов сворачивающихся и сортируемых таблиц описана в исходном тексте помощи в Английской Википедии: сворачивание; сортировка.

Ограничения

Для создания PDF в каждой ячейке таблицы должно быть строк не более чем вмещается на одну отрисованную страницу (примерно до 60 строк), иначе PDF сформируется некорректно.

См. также

Ссылки

Шаблон:Shortcut

bg:Уикипедия:Наръчник/Таблици fr:Aide:Les tableaux ja:Wikipedia:表の作り方/改定案 ro:Wikipedia:Folosirea tabelelor zh:Wikipedia:表格

Источник — https://www.tr.holyquran.wiki/index.php?title=Академия_Корана:Как_делать_таблицы&oldid=23520