Помощь:Таблицы

Из проекта Викизнание

Оглавление

Простейшая таблица

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


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

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


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

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

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

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

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

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

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

Рамки

Вид рамки описывается в первой строке, сразу после {|. Не забудьте, что между ними и атрибутом должен быть пробел. В настоящее время возможно устанавливать лишь толщину рамки атрибутом 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


Выравнивание

{| border=1
 !Длинный заголовок 1
 !Длинный заголовок 2
 !заголовок 3
 |-
 !Без выравнивания
 |Яч 2,2
 |Яч 3,2
 |-
 !С выравниванием
 |align="center"|Яч 2,3
 |align="right"|Ячейка 3,3
 |}

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

Длинный заголовок 1 Длинный заголовок 2 заголовок 3
Без выравнивания Яч 2,2 Яч 3,2
С выравниванием Яч 2,3 Яч 3,3

Цвета

См. также: Таблица цветов

Раскрасим таблицу и заодно выравняем ее по центру:

{| border=1 align="center"
 !Длинный <br/> заголовок 1
 !Длинный <br/> заголовок 2
 !Заголовок 3
 |-
 !Цвета фона для отдельных ячеек
 |bgcolor=#CCFF00|Яч 2, 2
 |bgcolor=#99aabb|Яч 3, 2
 |- bgcolor=#ffeedd
 !Цвет фона всей строки
 |align="center"|Яч 2,3
 | align="right"|<span style="color:#ff00ff">Яч 3,3</span>
 |- 
 |}
Длинный
заголовок 1
Длинный
заголовок 2
Заголовок 3
Цвета фона для отдельных ячеек Яч 2, 2 Яч 3, 2
Цвет фона всей строки Яч 2,3 Яч 3,3

Заголовки

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

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

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

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

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

Tables

An example table
First header Second header Third header
upper left upper middle right side
lower left lower middle
bottom row
<table border="1">
<caption>An example table</caption>
<tr>
<th>First header</th>
<th>Second header</th>
<th>Third header</th>
</tr>
<tr>
<td>upper left</td>
<td>upper middle</td>
<td rowspan=2>right side</td>
</tr>
<tr>
<td>lower left</td>
<td>lower middle</td>
</tr>
<tr>
<td colspan="3" align="center">bottom row</td>
</tr>
</table>

If your table doesn't look right, make sure that all <tr> and <td> tags are closed with corresponding </tr> and </td> tags. Do not indent lines, and do not include empty lines within a table. Otherwise, you will get spurious space above the table or even a browser crash. See HTML tag for explanations of what all these tags mean.

Here's a more advanced example, showing some more options available for making up tables. You can play with these settings in your own table to see what effect they have. Keep in mind that though colors are possible, it's best to use them sparingly. You can't use the <thead>, <tfoot> and <tbody> elements. Check the above tables to see what can be done to the text inside the cells.

An example table
First header Second header
upper left   right side
lower left lower middle
A table in a table
Файл:Wiki.png Файл:Wiki.png
Two Wikipedia logos
<table border="1" cellpadding="5" cellspacing="0" align="center">
<caption>'''An example table'''</caption>
<tr>
<th style="background:#efefef;">First header</th>
<th colspan="2" style="background:#ffdead;">Second header</th>
</tr>
<tr>
<td>upper left</td>
<td> </td>
<td rowspan=2 style="border-bottom:3px solid grey;" valign="top">
right side</td>
</tr>
<tr>
<td style="border-bottom:3px solid grey;">lower left</td>
<td style="border-bottom:3px solid grey;">lower middle</td>
</tr>
<tr>
<td colspan="3" align="center">
<table border="0">
<caption>''A table in a table''</caption>
<tr>
<td align="center">[[Image:wiki.png]]</td>
<td align="center">[[Image:wiki.png]]</td>
</tr>
<tr>
<td align="center" colspan="2" style="border-top:1px solid red; 
border-right:1px solid red; border-bottom:2px solid red; 
border-left:1px solid red;">
Two Wikipedia logos</td>
</tr>
</table>
</td>
</tr>
</table>

См. также