Difference between revisions of "Help:Таблицы"

From Wiki4Intranet
Jump to: navigation, search
m (добавил репликацию в wiki.4intra.net)
 
m (→‎Выравнивание содержимого ячейки)
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
[[Category:{{SITENAME}}:Справка]]
 
−
 
 
Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою цель, когда между строчками и столбцами имеется смысловая связь, т. е. информацию в них можно рассортировать неким образом, например, по дате или алфавиту.
 
Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою цель, когда между строчками и столбцами имеется смысловая связь, т. е. информацию в них можно рассортировать неким образом, например, по дате или алфавиту.
  
 
С другой стороны, таблицы сложнее обычного текста. Так что применять их имеет смысл лишь там, где они действительно улучшают восприятие материала. Поэтому предварительно обдумывайте: не лучше ли использовать обычный список.
 
С другой стороны, таблицы сложнее обычного текста. Так что применять их имеет смысл лишь там, где они действительно улучшают восприятие материала. Поэтому предварительно обдумывайте: не лучше ли использовать обычный список.
  
−
=== Таблицы в машинописном стиле без форматирования ===
+
== Расширение SimpleTable ==
−
Простейший и быстрейший способ создать таблицу — это написать ее в машинописном стиле, с помощью преформатированных блоков.
+
−
Столбцы и общий вид форматируются визуально. Например:
+
  
−
<center>Климатическая таблица</center>
+
Простейший способ с минимумом «шумовых» символов и с соблюдением модели «строка таблицы=строка текста» — это использование расширения SimpleTable и тега «tab».
−
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
+
−
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
−
Дневная температура  21    21      22    23  25  27    29    28    26      24      22    20
+
−
Ночная температура  15    15      15    16  17  17    18    17    16      15      15    14
+
−
Солнечные часы/день  6      6      7    8  9    9    9    8      7      7      6      6
+
−
Дождливые дни/месяц  6      4      3    2  2    1    0    0      2      5      6      7
+
−
Температура воды    19    18      18    18  19  20    21    23    20      18      18    18
+
  
−
===Расширение SimpleTable===
+
{{NoteBox|1=Этот же способ удобно применять для копипасты простых таблиц из Excel’я и подобных программ — нужно только написать <tt>&lt;tab sep=tab&gt;</tt>. Если, однако, таблица содержит объединённые ячейки или специфичные стили ячеек, то способ не подходит, и нужно смотреть в сторону [[#Импорт таблиц из внешних приложений в вики-синтаксис]].}}
−
Еще один простейший способ с минимумом «шумовых» символов и с соблюдением модели
+
−
«строка таблицы=строка текста», это использовать расширение SimpleTable и тег «tab».
+
  
 
Например,
 
Например,
−
<nowiki>
+
<pre>
−
<tab cellpadding="5" border=1 sep=spaces head=top>
+
<tab class=wikitable sep=spaces head=top>
 
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
 
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
 
Дневная_температура  21    21      22    23  25  27    29    28    26      24      22    20
 
Дневная_температура  21    21      22    23  25  27    29    28    26      24      22    20
Line 32: Line 19:
 
Температура_воды    19    18      18    18  19  20    21    23    20      18      18    18
 
Температура_воды    19    18      18    18  19  20    21    23    20      18      18    18
 
</tab>
 
</tab>
−
  </nowiki>
+
</pre>
  
−
<tab cellpadding="5" border=1 sep=spaces  head=top>
+
<tab class=wikitable sep=spaces  head=top>
 
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
 
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
 
Дневная_температура  21    21      22    23  25  27    29    28    26      24      22    20
 
Дневная_температура  21    21      22    23  25  27    29    28    26      24      22    20
Line 50: Line 37:
 
:;comma: запятая
 
:;comma: запятая
 
:;bar: вертикальная черта «|»
 
:;bar: вертикальная черта «|»
 +
:;Другие: Есть возможность определить как разделитель любую последовательность символов. Скажем, <tt>sep="%%"</tt> разобьёт строчку по двойному символу процента.
 
;head: этот атрибут, если есть, указывает, где распологается заголовок таблицы.
 
;head: этот атрибут, если есть, указывает, где распологается заголовок таблицы.
 
:;top: верхняя запись
 
:;top: верхняя запись
Line 56: Line 44:
  
 
Также принимаются все атрибуты, которые можно указать в стандартном синтаксисе вики-таблиц, например:
 
Также принимаются все атрибуты, которые можно указать в стандартном синтаксисе вики-таблиц, например:
−
;class: Название CSS-стиля таблицы. Стиль применяется к самой таблице, а не к её ячейкам. Чтобы применить стиль к ячейкам, нужно определить класс <tt>.className td</tt>. Например, чтобы выровнять все ячейки по левому краю, нужно добавить на страницу следующий текст: <pre><html><style>.classname td { text-align: right; }</style></html></pre>
+
;class: Название CSS-стиля таблицы. Стиль применяется к самой таблице, а не к её ячейкам.
 +
;:Чтобы не видеть убогие стандартные HTML-рамочки, рекомендуется всегда использовать <tt>class="wikitable"</tt>.
 +
;:Чтобы применить стиль к ячейкам, нужно определить класс <tt>.className td</tt>. Например, чтобы выровнять все ячейки по левому краю, нужно добавить на страницу следующий текст: <pre><html><style>.classname td { text-align: right; }</style></html></pre>
 
;border: Толщина границ, попадает в HTML-атрибут таблицы. Подобные границы выглядят убого, лучше используйте класс simpletable.
 
;border: Толщина границ, попадает в HTML-атрибут таблицы. Подобные границы выглядят убого, лучше используйте класс simpletable.
 
;cellpadding: Ширина поля между значениями ячеек и границами ячеек.
 
;cellpadding: Ширина поля между значениями ячеек и границами ячеек.
  
−
И наконец, используя <tt>class="sortable"</tt>, можно делать динамически сортируемые таблицы:
+
И наконец, добавляя к <tt>class</tt> слово <tt>sortable</tt>, можно делать динамически сортируемые таблицы:
  
−
<tab cellpadding="5" border=1 class="sortable" sep=spaces  head=top>
+
<tab class="wikitable sortable" sep=spaces  head=top>
 
EMP_NO    DEPT_NO    PRO_NO    EMP_BDATE    EMP_SAL    EMP_BONUS
 
EMP_NO    DEPT_NO    PRO_NO    EMP_BDATE    EMP_SAL    EMP_BONUS
 
2441    1    155    1955    16000.00    14000.00
 
2441    1    155    1955    16000.00    14000.00
Line 72: Line 62:
 
</tab>
 
</tab>
  
−
Кстати, если вы хотите видеть что-то посимпатичнее уродливых стандартных HTML-рамочек, пропишите <tt>class="simpletable"</tt>. Его также можно комбинировать с другими классами (например <tt>sortable</tt>):
+
== Таблицы в стандартном синтаксисе MediaWiki ==
−
<tab cellpadding="5" border=1 class="sortable simpletable" sep=spaces  head=top>
+
−
EMP_NO    DEPT_NO    PRO_NO    EMP_BDATE    EMP_SAL    EMP_BONUS
+
−
2441    1    155    1955    16000.00    14000.00
+
−
2442    1    20    1960    14000.00    NULL
+
−
2443    1    NULL    1960    16000.00    13000.00
+
−
2452    1    155    NULL    15000.00    14000.00
+
−
2453    1    234    NULL    17000.00    NULL
+
−
2444    2    177    1970    17000.00    16000.00
+
−
</tab>
+
  
−
=== Простейшая таблица ===
 
 
Любая таблица в wiki-стиле начинается с фигурной скобки '''{''' с последующей вертикальной чертой '''<nowiki>|</nowiki>''' и заканчивается вертикальной чертой '''<nowiki>|</nowiki>''' с закрывающей фигурной скобкой '''}'''. Каждая ячейка строки начинается вертикальной черточки '''<nowiki>|</nowiki>''', после которой пишется ее содержание.
 
Любая таблица в wiki-стиле начинается с фигурной скобки '''{''' с последующей вертикальной чертой '''<nowiki>|</nowiki>''' и заканчивается вертикальной чертой '''<nowiki>|</nowiki>''' с закрывающей фигурной скобкой '''}'''. Каждая ячейка строки начинается вертикальной черточки '''<nowiki>|</nowiki>''', после которой пишется ее содержание.
 
   
 
   
−
'''Пример:'''
+
'''Пример:'''
−
Таблица с одной строкой пишется так:
+
Таблица с одной строкой пишется так:
 +
 
 
  <nowiki>{|
 
  <nowiki>{|
 
  |Ячейка 1
 
  |Ячейка 1
Line 93: Line 74:
 
  |Ячейка 3
 
  |Ячейка 3
 
  |}</nowiki>
 
  |}</nowiki>
 +
 
В [[{{SITENAME}}]] это будет выглядеть так:
 
В [[{{SITENAME}}]] это будет выглядеть так:
 +
 
  {|
 
  {|
 
  |Ячейка 1
 
  |Ячейка 1
Line 102: Line 85:
 
Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.
 
Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.
 
   
 
   
−
'''Пример:'''
+
'''Пример:'''
−
Таблица в две строки пишется так:
+
Таблица в две строки пишется так:
 +
 
 
  <nowiki>{|
 
  <nowiki>{|
 
  |Ячейка 1*1
 
  |Ячейка 1*1
Line 115: Line 99:
  
 
В [[{{SITENAME}}]] это будет выглядеть так:
 
В [[{{SITENAME}}]] это будет выглядеть так:
 +
 
{|
 
{|
 
  |Ячейка 1*1
 
  |Ячейка 1*1
Line 125: Line 110:
 
  |}
 
  |}
  
−
Таблица в три строки пишется так:
+
Таблица в три строки пишется так:
 +
 
 
  <nowiki>{|
 
  <nowiki>{|
 
  |Ячейка 1*1
 
  |Ячейка 1*1
Line 141: Line 127:
  
 
А в [[{{SITENAME}}]] это будет выглядеть так:
 
А в [[{{SITENAME}}]] это будет выглядеть так:
 +
 
{|
 
{|
 
  |Ячейка 1*1
 
  |Ячейка 1*1
Line 158: Line 145:
  
 
=== Табличные рамки ===
 
=== Табличные рамки ===
−
Вид рамки описывается в первой строке, сразу после '''{|'''. Не забудьте, что между ними и атрибутом должен быть пробел. В настоящее время возможно устанавливать лишь толщину рамки атрибутом '''border=n''', где «n» — толщина линии рамки.
+
 
−
'''Пример:'''
+
Вид рамки, как и другие параметры таблицы, можно указать сразу после '''{|'''. Не забудьте, что между ними и атрибутом должен быть пробел.
−
Для последней таблицы рамку можно создать так:
+
 
−
<nowiki>{| border=1
+
Однако, вместо <tt>border=1</tt> рекомендуется опять-таки просто использовать <tt>class=wikitable</tt> — выглядит куда симпатичнее.
 +
 
 +
'''Пример:'''
 +
Для последней таблицы рамку можно создать так:
 +
 
 +
{| cellpadding=4
 +
!
 +
! border=1
 +
! class=wikitable
 +
|-
 +
! Код
 +
|
 +
<pre>
 +
{| border=1
 
  |Ячейка 1*1
 
  |Ячейка 1*1
 
  |Ячейка 2*1
 
  |Ячейка 2*1
Line 173: Line 173:
 
  |Ячейка 2*3
 
  |Ячейка 2*3
 
  |Ячейка 3*3
 
  |Ячейка 3*3
−
  |}</nowiki>
+
  |}
−
 
+
</pre>
−
В [[{{SITENAME}}]] это будет выглядеть следующим образом:
+
|
−
{| border=1
+
<pre>
 +
{| class=wikitable
 
  |Ячейка 1*1
 
  |Ячейка 1*1
 
  |Ячейка 2*1
 
  |Ячейка 2*1
Line 189: Line 190:
 
  |Ячейка 3*3
 
  |Ячейка 3*3
 
  |}
 
  |}
 +
</pre>
 +
|-
 +
! Результат
 +
|
 +
{| border=1
 +
|Ячейка 1*1
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
|
 +
{| class=wikitable
 +
|Ячейка 1*1
 +
|Ячейка 2*1
 +
|Ячейка 3*1
 +
|-
 +
|Ячейка 1*2
 +
|Ячейка 2*2
 +
|Ячейка 3*2
 +
|-
 +
|Ячейка 1*3
 +
|Ячейка 2*3
 +
|Ячейка 3*3
 +
|}
 +
|}
  
 
=== Заголовки ===
 
=== Заголовки ===
 +
 
Чтобы содержание ячейки выделялись жирным шрифтом и отцентрированны, вместо вертикальных чёрточек ставятся восклицательные знаки. Это можно применять для выделения заголовков.
 
Чтобы содержание ячейки выделялись жирным шрифтом и отцентрированны, вместо вертикальных чёрточек ставятся восклицательные знаки. Это можно применять для выделения заголовков.
 
   
 
   
 
'''Пример:'''  
 
'''Пример:'''  
 +
 
Для последней таблицы можно написать так:
 
Для последней таблицы можно написать так:
−
  <nowiki>{| border=1
+
 
 +
  <nowiki>{| class=wikitable
 
  !Первый столбец
 
  !Первый столбец
 
  !Второй столбец
 
  !Второй столбец
Line 214: Line 250:
  
 
В [[{{SITENAME}}]] это будет выглядеть следующим образом:
 
В [[{{SITENAME}}]] это будет выглядеть следующим образом:
−
{| border=1
+
 
 +
{| class=wikitable
 
  !Первый столбец
 
  !Первый столбец
 
  !Второй столбец
 
  !Второй столбец
Line 233: Line 270:
  
 
=== Запись в одну строчку ===
 
=== Запись в одну строчку ===
 +
 
Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку (если записи в них не очень длинные), отделяя их вертикальной чертой.
 
Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку (если записи в них не очень длинные), отделяя их вертикальной чертой.
  
 
'''Пример:'''
 
'''Пример:'''
 
Для последней таблицы можно написать так:
 
Для последней таблицы можно написать так:
−
  <nowiki>{| border=1
+
  <nowiki>{| class=wikitable
 
  !Первый столбец||Второй столбец||Третий столбец
 
  !Первый столбец||Второй столбец||Третий столбец
 
  |-
 
  |-
Line 248: Line 286:
  
 
В [[{{SITENAME}}]] это будет выглядеть следующим образом:
 
В [[{{SITENAME}}]] это будет выглядеть следующим образом:
−
{| border=1
+
{| class=wikitable
 
  !Первый столбец||Второй столбец||Третий столбец
 
  !Первый столбец||Второй столбец||Третий столбец
 
  |-
 
  |-
Line 258: Line 296:
 
  |}
 
  |}
  
−
=== Rowspanning и Colspanning ===
+
=== Выравнивание содержимого ячейки ===
 +
 
 +
Выравнивание содержимого ячейки может управляться двумя разными CSS-свойствами: <tt>text-align</tt> и <tt>vertical-align</tt>.
 +
<tt>text-align</tt> можно указать в таблице, строке или отдельных ячейках, тогда как <tt>vertical-align</tt> можно задать только отдельным строкам или ячейкам.
 +
 
 +
{| style="width:100%"
 +
! style="width: 50%;"|Вы вводите
 +
! style="width: 50%;"|Вы получаете
 +
|-
 +
| style="padding: 5px;"|
 +
<pre>
 +
{| class="wikitable"
 +
|- style="vertical-align:top;"
 +
| style="height:100px; width:100px; text-align:left;" | A
 +
| style="height:100px; width:100px; text-align:center;" | B
 +
| style="height:100px; width:100px; text-align:right;" | C
 +
|- style="vertical-align:middle;"
 +
| style="height:100px; width:100px; text-align:left;" | D
 +
| style="height:100px; width:100px; text-align:center;" | E
 +
| style="height:100px; width:100px; text-align:right;" | F
 +
|- style="vertical-align:bottom;"
 +
| style="height:100px; width:100px; text-align:left;" | G
 +
| style="height:100px; width:100px; text-align:center;" | H
 +
| style="height:100px; width:100px; text-align:right;" | I
 +
|}
 +
</pre>
 +
| style="padding: 5px;"|
 +
{| class="wikitable"
 +
|- style="vertical-align:top;"
 +
| style="height:100px; width:100px; text-align:left;" | A
 +
| style="height:100px; width:100px; text-align:center;" | B
 +
| style="height:100px; width:100px; text-align:right;" | C
 +
|- style="vertical-align:middle;"
 +
| style="height:100px; width:100px; text-align:left;" | D
 +
| style="height:100px; width:100px; text-align:center;" | E
 +
| style="height:100px; width:100px; text-align:right;" | F
 +
|- style="vertical-align:bottom;"
 +
| style="height:100px; width:100px; text-align:left;" | G
 +
| style="height:100px; width:100px; text-align:center;" | H
 +
| style="height:100px; width:100px; text-align:right;" | I
 +
|}
 +
|}
 +
 
 +
=== Объединённые ячейки ===
 +
 
 
В wiki-стиле, как и в HTML, имеется возможность «растягивать» ячейки как по вертикали, так и по горизонтали.
 
В wiki-стиле, как и в HTML, имеется возможность «растягивать» ячейки как по вертикали, так и по горизонтали.
−
Для «растягивания» по вертикали применяется атрибут ''rowspan=n'', где «n» — число ячеек, на которые должна «тянуться» данная ячейка. Этот атрибут вписывается перед содержанием «растягиваемой» ячейки.
+
 
 +
Для слияния ячеек по вертикали применяется атрибут ''rowspan=n'', где «n» — число ячеек, на которые должна «тянуться» данная ячейка. Этот атрибут вписывается перед содержанием «растягиваемой» ячейки.
  
 
'''Пример:'''
 
'''Пример:'''
−
Вертикальное «растягивание» на две ячейки пишется так:
+
Вертикальное слияние двух ячеек пишется так:
−
  <nowiki>{| border=1
+
 
 +
  <nowiki>{| class=wikitable
 
  |Ячейка 1
 
  |Ячейка 1
 
  |rowspan=2 |Ячейка 2, растянута
 
  |rowspan=2 |Ячейка 2, растянута
Line 272: Line 356:
 
  |Ячейка 5
 
  |Ячейка 5
 
  |}</nowiki>
 
  |}</nowiki>
 +
 
Выглядеть это будет так:
 
Выглядеть это будет так:
−
  {| border=1
+
 
 +
  {| class=wikitable
 
  |Ячейка 1
 
  |Ячейка 1
 
  |rowspan=2 |Ячейка 2, растянута
 
  |rowspan=2 |Ячейка 2, растянута
Line 282: Line 368:
 
  |}
 
  |}
  
−
Для «растягивания» по горизонтали используется атрибут ''colspan=n''.
+
Для горизонтального слияния используется атрибут ''colspan=n''.
 +
 
 
'''Пример:'''
 
'''Пример:'''
−
  <nowiki>{| border=1
+
  <nowiki>{| class=wikitable
 
  |Ячейка 1
 
  |Ячейка 1
 
  |colspan=2 |Ячейка 2, растянута
 
  |colspan=2 |Ячейка 2, растянута
Line 294: Line 381:
  
 
Выглядит это так:
 
Выглядит это так:
−
{| border=1
+
 
 +
{| class=wikitable
 
  |Ячейка 1
 
  |Ячейка 1
 
  |colspan=2 |Ячейка 2, растянута
 
  |colspan=2 |Ячейка 2, растянута
Line 304: Line 392:
  
 
=== «Раскраска» таблиц ===
 
=== «Раскраска» таблиц ===
 +
 
'''Текст''', находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
 
'''Текст''', находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
 
* для отдельного слова — <nowiki><font color="#ABCDEF">Teкст</font></nowiki>;
 
* для отдельного слова — <nowiki><font color="#ABCDEF">Teкст</font></nowiki>;
 
* для длинного текста — <nowiki><div style="color:#ABCDEF">Текст, текст.</div></nowiki>,
 
* для длинного текста — <nowiki><div style="color:#ABCDEF">Текст, текст.</div></nowiki>,
−
где «ABCDEF» — индекс цвета в [[RuPedia:Википедия:Таблица цветов|Таблице цветов]].
+
где «ABCDEF» — индекс цвета в [[WikiHelp:Таблица цветов (фон)|Таблице цветов]].
 +
 
 
  '''Пример:'''
 
  '''Пример:'''
 
  Для "раскраски" текста пишут так:
 
  Для "раскраски" текста пишут так:
−
  <nowiki>{| border=1
+
  <nowiki>{| class=wikitable
 
  |Ячейка 1*1
 
  |Ячейка 1*1
 
  |Здесь цветное только <font color="#FF00FF">одно</font> слово.
 
  |Здесь цветное только <font color="#FF00FF">одно</font> слово.
Line 323: Line 413:
 
  |Ячейка 3*3
 
  |Ячейка 3*3
 
  |}</nowiki>
 
  |}</nowiki>
 +
 
В [[{{SITENAME}}]] это будет выглядеть следующим образом:
 
В [[{{SITENAME}}]] это будет выглядеть следующим образом:
−
  {| border=1
+
 
 +
  {| class=wikitable
 
  |Ячейка 1*1
 
  |Ячейка 1*1
 
  |Здесь цветное только <font color="#FF00FF">одно</font> слово.
 
  |Здесь цветное только <font color="#FF00FF">одно</font> слово.
Line 338: Line 430:
 
  |}
 
  |}
  
−
Сделать '''цветную ячейку''' можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» обозначает, как вы уже, наверное, догадались, индекс цвета в [[RuPedia:Википедия:Таблица цветов|Таблице цветов]].
+
Сделать '''цветную ячейку''' можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» обозначает, как вы уже, наверное, догадались, индекс цвета в [[WikiHelp:Таблица цветов (фон)|Таблице цветов]].
 +
 
 
  '''Пример:'''
 
  '''Пример:'''
 
  Для "раскраски" одной ячейки пишется так:
 
  Для "раскраски" одной ячейки пишется так:
−
  <nowiki>{| border=1
+
  <nowiki>{| class=wikitable
 
  |Ячейка 1*1
 
  |Ячейка 1*1
 
  |bgcolor=#FFCC00|Ячейка 2*1
 
  |bgcolor=#FFCC00|Ячейка 2*1
Line 355: Line 448:
 
  |}</nowiki>
 
  |}</nowiki>
 
В [[{{SITENAME}}]] это будет выглядеть следующим образом:
 
В [[{{SITENAME}}]] это будет выглядеть следующим образом:
−
  {| border=1
+
  {| class=wikitable
 
  |Ячейка 1*1
 
  |Ячейка 1*1
 
  |bgcolor=#FFCC00|Ячейка 2*1
 
  |bgcolor=#FFCC00|Ячейка 2*1
Line 370: Line 463:
  
 
=== Вложенные таблицы ===
 
=== Вложенные таблицы ===
 +
 
Для создания таблицы внутри уже имеющейся, надо вписать в нужном месте фигурную скобку с вертикальной черточкой, как при написании обычной таблицы. Обратите внимание, что горизонтальной черточки в начале строки '''не должно''' быть. Не забудьте также закрыть внутреннюю таблицу.
 
Для создания таблицы внутри уже имеющейся, надо вписать в нужном месте фигурную скобку с вертикальной черточкой, как при написании обычной таблицы. Обратите внимание, что горизонтальной черточки в начале строки '''не должно''' быть. Не забудьте также закрыть внутреннюю таблицу.
 +
 
  '''Пример:'''
 
  '''Пример:'''
 
  <nowiki>{| border=1
 
  <nowiki>{| border=1
Line 395: Line 490:
  
 
=== Название таблицы ===
 
=== Название таблицы ===
 +
 
Чтобы название таблицы было отцентрировано по ее ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными wiki-атрибутами.
 
Чтобы название таблицы было отцентрировано по ее ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными wiki-атрибутами.
 
  '''Пример:'''
 
  '''Пример:'''
Line 453: Line 549:
 
  |}
 
  |}
  
−
=== Импорт таблиц из внешних приложений ===
+
=== Импорт таблиц из внешних приложений в вики-синтаксис ===
−
Иногда возникает задача импорта
+
−
сложных таблиц из Office-приложений
+
−
(MS Word, MS Excel, Open Office).
+
  
−
В таком случае, надо:
+
Иногда возникает задача импорта сложных таблиц из Office-приложений (MS Word, MS Excel, Open Office).
 +
 
 +
«Сложные» таблицы — это таблицы, имеющие различные стили ячеек и/или объединённые ячейки.
 +
 
 +
==== С помощью wikEd — просто, но некрасиво ====
 +
 
 +
# Используем Firefox, Chrome или Safari.
 +
# Включаем wikEd, если оный выключен (кнопочка с карандашом в правом верхнем углу страницы).
 +
# Делаем Copy-Paste таблицы в статью.
 +
# Нажимаем кнопку [W] — Wikify, выглядит она так: [[File:WikEd_wikify.png]].
 +
 
 +
==== Ручками — сложнее, но красивее ====
 +
 
 +
Нужно:
 
* добиться сохранения таблицы в [[HTML]]-формате (например, скопировать таблицу из MS Excel в MS Word, сохранить в формате «web-page filtered»).
 
* добиться сохранения таблицы в [[HTML]]-формате (например, скопировать таблицу из MS Excel в MS Word, сохранить в формате «web-page filtered»).
 
* «Почистить» таблицу от лишних тэгов и атрибутов с помощью программы [[Tidy]]. Примерный вызов [[Tidy]] для HTML таблицы из сохраненной из «MS Word» следующий:
 
* «Почистить» таблицу от лишних тэгов и атрибутов с помощью программы [[Tidy]]. Примерный вызов [[Tidy]] для HTML таблицы из сохраненной из «MS Word» следующий:
Line 464: Line 570:
 
* Вставить полученную (очищенную и отформатированную) [[HTML]]-таблицу в статью.
 
* Вставить полученную (очищенную и отформатированную) [[HTML]]-таблицу в статью.
  
−
{{replicate-from-custiswiki-to-lib}}
+
== Таблицы в машинописном стиле без форматирования ==
−
{{replicate-from-custiswiki-to-all}}
+
 
−
{{replicate-from-custiswiki-to-tools}}
+
Последний способ создать таблицу — это написать ее в машинописном стиле, с помощью преформатированных блоков. Столбцы и общий вид форматируются визуально. Например:
 +
 
 +
                                        Климатическая таблица
 +
 +
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
 +
--------------------------------------------------------------------------------------------------
 +
Дневная температура  21    21      22    23  25  27    29    28    26      24      22    20
 +
Ночная температура  15    15      15    16  17  17    18    17    16      15      15    14
 +
Солнечные часы/день  6      6      7    8  9    9    9    8      7      7      6      6
 +
Дождливые дни/месяц  6      4      3    2  2    1    0    0      2      5      6      7
 +
Температура воды    19    18      18    18  19  20    21    23    20      18      18    18
 +
 
 +
<noinclude>[[Category:Справка]]</noinclude>

Latest revision as of 10:38, 27 October 2016

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

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

Расширение SimpleTable

Простейший способ с минимумом «шумовых» символов и с соблюдением модели «строка таблицы=строка текста» — это использование расширения SimpleTable и тега «tab».

Note.svg Этот же способ удобно применять для копипасты простых таблиц из Excel’я и подобных программ — нужно только написать <tab sep=tab>. Если, однако, таблица содержит объединённые ячейки или специфичные стили ячеек, то способ не подходит, и нужно смотреть в сторону #Импорт таблиц из внешних приложений в вики-синтаксис.

Например, 

<tab class=wikitable sep=spaces head=top>
Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
Дневная_температура  21     21      22    23  25   27    29    28     26      24      22     20
Ночная_температура   15     15      15    16  17   17    18    17     16      15      15     14
Солнечные_часы/день   6      6       7     8   9    9     9     8      7       7       6      6
Дождливые_дни/месяц   6      4       3     2   2    1     0     0      2       5       6      7
Температура_воды     19     18      18    18  19   20    21     23    20      18      18     18
</tab>
Месяцы:январьфевральмартапрельмайиюньиюльавгустсентябрьоктябрьноябрьдекабрь
Дневная_температура212122232527292826242220
Ночная_температура151515161717181716151514
Солнечные_часы/день667899987766
Дождливые_дни/месяц643221002567
Температура_воды191818181920212320181818

Атрибуты тега «tab», обрабатываемые самим SimpleTable:

sep
Символ-сепаратор колонок:
tab
символ табуляции
space
пробел
spaces
один или несколько пробелов или символов табуляции
comma
запятая
bar
вертикальная черта «|»
Другие
Есть возможность определить как разделитель любую последовательность символов. Скажем, sep="%%" разобьёт строчку по двойному символу процента.
head
этот атрибут, если есть, указывает, где распологается заголовок таблицы.
top
верхняя запись
left
первая колонка
topleft
и верхняя запись и первая (левая) колонка таблицы.

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

class
Название CSS-стиля таблицы. Стиль применяется к самой таблице, а не к её ячейкам.
Чтобы не видеть убогие стандартные HTML-рамочки, рекомендуется всегда использовать class="wikitable".
Чтобы применить стиль к ячейкам, нужно определить класс .className td. Например, чтобы выровнять все ячейки по левому краю, нужно добавить на страницу следующий текст: 
<html><style>.classname td { text-align: right; }</style></html>
border
Толщина границ, попадает в HTML-атрибут таблицы. Подобные границы выглядят убого, лучше используйте класс simpletable.
cellpadding
Ширина поля между значениями ячеек и границами ячеек.

И наконец, добавляя к class слово sortable, можно делать динамически сортируемые таблицы:

EMP_NODEPT_NOPRO_NOEMP_BDATEEMP_SALEMP_BONUS
24411155195516000.0014000.00
2442120196014000.00NULL
24431NULL196016000.0013000.00
24521155NULL15000.0014000.00
24531234NULL17000.00NULL
24442177197017000.0016000.00

Таблицы в стандартном синтаксисе MediaWiki

Любая таблица в wiki-стиле начинается с фигурной скобки { с последующей вертикальной чертой | и заканчивается вертикальной чертой | с закрывающей фигурной скобкой }. Каждая ячейка строки начинается вертикальной черточки |, после которой пишется ее содержание.

Пример: Таблица с одной строкой пишется так: 

{|
 |Ячейка 1
 |Ячейка 2
 |Ячейка 3
 |}

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

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

Для введения следующей строки после вертикальной черточки ставится штрих «-». Таким образом можно вводить любое количество строк.

Пример: Таблица в две строки пишется так: 

{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |}

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

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

Таблица в три строки пишется так: 

{|
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

А в Wiki4Intranet это будет выглядеть так:

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

И так далее.

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

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

Однако, вместо border=1 рекомендуется опять-таки просто использовать class=wikitable — выглядит куда симпатичнее.

Пример: Для последней таблицы рамку можно создать так:

border=1 class=wikitable
Код 
{| border=1
 |Ячейка 1*1
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

{| class=wikitable
 |Ячейка 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
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Заголовки

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

Пример:

Для последней таблицы можно написать так: 

{| class=wikitable
 !Первый столбец
 !Второй столбец
 !Третий столбец
 |-
 !Первая строчка
 |Ячейка 2*1
 |Ячейка 3*1
 |-
 !Вторая строчка
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 !Третья строчка
 |Ячейка 2*3
 |Ячейка 3*3
 |}

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

Первый столбец Второй столбец Третий столбец
Первая строчка Ячейка 2*1 Ячейка 3*1
Вторая строчка Ячейка 2*2 Ячейка 3*2
Третья строчка Ячейка 2*3 Ячейка 3*3

Запись в одну строчку

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

Пример: Для последней таблицы можно написать так: 

{| class=wikitable
 !Первый столбец||Второй столбец||Третий столбец
 |-
 |Ячейка 1*1||Ячейка 2*1||Ячейка 3*1
 |-
 |Ячейка 1*2||Ячейка 2*2||Ячейка 3*2
 |-
 |Ячейка 1*3||Ячейка 2*3||Ячейка 3*3
 |}

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

Первый столбец Второй столбец Третий столбец
Ячейка 1*1 Ячейка 2*1 Ячейка 3*1
Ячейка 1*2 Ячейка 2*2 Ячейка 3*2
Ячейка 1*3 Ячейка 2*3 Ячейка 3*3

Выравнивание содержимого ячейки

Выравнивание содержимого ячейки может управляться двумя разными CSS-свойствами: text-align и vertical-align. text-align можно указать в таблице, строке или отдельных ячейках, тогда как vertical-align можно задать только отдельным строкам или ячейкам.

Вы вводите Вы получаете 
{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}
A B C
D E F
G H I

Объединённые ячейки

В wiki-стиле, как и в HTML, имеется возможность «растягивать» ячейки как по вертикали, так и по горизонтали.

Для слияния ячеек по вертикали применяется атрибут rowspan=n, где «n» — число ячеек, на которые должна «тянуться» данная ячейка. Этот атрибут вписывается перед содержанием «растягиваемой» ячейки.

Пример: Вертикальное слияние двух ячеек пишется так: 

{| class=wikitable
 |Ячейка 1
 |rowspan=2 |Ячейка 2, растянута
 |Ячейка 3
 |-
 |Ячейка 4
 |Ячейка 5
 |}

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

Ячейка 1 Ячейка 2, растянута Ячейка 3
Ячейка 4 Ячейка 5

Для горизонтального слияния используется атрибут colspan=n.

Пример: 

{| class=wikitable
 |Ячейка 1
 |colspan=2 |Ячейка 2, растянута
 |-
 |Ячейка 3
 |Ячейка 4
 |Ячейка 5
 |}

Выглядит это так:

Ячейка 1 Ячейка 2, растянута
Ячейка 3 Ячейка 4 Ячейка 5

«Раскраска» таблиц

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

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

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

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

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

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

Сделать цветную ячейку можно с помощью атрибута «bgcolor=#ABCDEF», где «ABCDEF» обозначает, как вы уже, наверное, догадались, индекс цвета в Таблице цветов. 

Пример:
Для "раскраски" одной ячейки пишется так:
{| class=wikitable
 |Ячейка 1*1
 |bgcolor=#FFCC00|Ячейка 2*1
 |Ячейка 3*1
 |-
 |Ячейка 1*2
 |Ячейка 2*2
 |Ячейка 3*2
 |-
 |bgcolor=#CCFF00|Ячейка 1*3
 |Ячейка 2*3
 |Ячейка 3*3
 |}

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

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

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

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

Пример:
{| border=1
 |Ячейка 1
 |
 {| border=2
 |Ячейка A
 |-
 |Ячейка B
 |}
 |Ячейка 3
 |}

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

Ячейка 1
Ячейка A
Ячейка B
Ячейка 3

Название таблицы

Чтобы название таблицы было отцентрировано по ее ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными wiki-атрибутами. 

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

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

Очень длинное-длинное название таблицы.
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Ширина таблицы

Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой, не зависимо от их содержания. Для фиксации ширины таблицы применяется атрибут 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

Импорт таблиц из внешних приложений в вики-синтаксис

Иногда возникает задача импорта сложных таблиц из Office-приложений (MS Word, MS Excel, Open Office).

«Сложные» таблицы — это таблицы, имеющие различные стили ячеек и/или объединённые ячейки.

С помощью wikEd — просто, но некрасиво

  1. Используем Firefox, Chrome или Safari.
  2. Включаем wikEd, если оный выключен (кнопочка с карандашом в правом верхнем углу страницы).
  3. Делаем Copy-Paste таблицы в статью.
  4. Нажимаем кнопку [W] — Wikify, выглядит она так: WikEd wikify.png.

Ручками — сложнее, но красивее

Нужно:

  • добиться сохранения таблицы в HTML-формате (например, скопировать таблицу из MS Excel в MS Word, сохранить в формате «web-page filtered»).
  • «Почистить» таблицу от лишних тэгов и атрибутов с помощью программы Tidy. Примерный вызов Tidy для HTML таблицы из сохраненной из «MS Word» следующий:
tidy -raw -i -m -wrap 256 -bare --word-2000 yes %1
  • Вставить полученную (очищенную и отформатированную) HTML-таблицу в статью.

Таблицы в машинописном стиле без форматирования

Последний способ создать таблицу — это написать ее в машинописном стиле, с помощью преформатированных блоков. Столбцы и общий вид форматируются визуально. Например: 

                                       Климатическая таблица

Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
--------------------------------------------------------------------------------------------------
Дневная температура  21     21      22    23  25   27    29    28     26      24      22     20
Ночная температура   15     15      15    16  17   17    18    17     16      15      15     14
Солнечные часы/день   6      6       7     8   9    9     9     8      7       7       6      6
Дождливые дни/месяц   6      4       3     2   2    1     0     0      2       5       6      7
Температура воды     19     18      18    18  19   20    21     23    20      18      18     18
Retrieved from "https://wiki.4intra.net/index.php?title=Help:Таблицы&oldid=7746"