Создание таблиц — различия между версиями

Материал из wiki-энциклопедии игры Karos
Страница загружается. Перейти к:навигация, поиск
[досмотренная версия][досмотренная версия]
 
Строка 81: Строка 81:
 
  |}
 
  |}
  
Изменять оформление рамки таблицы также можно с помощью атрибута '''class'''. Подробнее об этом см. «[[Классы таблиц]]».  
+
Изменять оформление рамки таблицы также можно с помощью атрибута '''class'''. Подробнее об этом см. «Классы таблиц».  
  
 
Исходный код:
 
Исходный код:

Текущая версия на 14:58, 23 августа 2016

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

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

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

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

Любая таблица в 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="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

Заголовки

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

Пример:


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

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

Первый столбец Второй столбец Третий столбец
Первая строчка Ячейка 2*1 Ячейка 3*1
Вторая строчка Ячейка 2*2 Ячейка 3*2
Третья строчка Ячейка 2*3 Ячейка 3*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

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

Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в 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:#33CC66">А здесь выделен цветом длинный-длинный абзац.</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

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

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


Пример:
{| 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

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


Пример:
{| 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
На сайте работает система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Также открыть окошко отправки сообщения можно, кликнув по ссылке:
Отправить сообщение об ошибке