Справка:Как делать таблицы — различия между версиями

Материал из энциклопедии "Вики-Поляны"
Перейти к: навигация, поиск
м (Admin переименовал страницу Вики-Поляны:Как делать таблицы в Справка:Как делать таблицы без оставления перенаправления)
Строка 1: Строка 1:
{{Правило}}
+
{{UserTOC}} __NOTOC__
{{UserTOC}}__NOTOC__
+
  
 
Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою роль, когда между строчками и столбцами имеется смысловая связь, то есть информацию в них можно рассортировать неким образом, например, по дате или алфавиту.
 
Таблицы являются удобной формой для отображения информации. Но таблицы выполняют лишь тогда свою роль, когда между строчками и столбцами имеется смысловая связь, то есть информацию в них можно рассортировать неким образом, например, по дате или алфавиту.
Строка 6: Строка 5:
 
С другой стороны, таблицы сложнее обычного текста. Так что применять их имеет смысл лишь там, где они действительно улучшают восприятие материала, поэтому предварительно обдумывайте: не лучше ли использовать обычный список.
 
С другой стороны, таблицы сложнее обычного текста. Так что применять их имеет смысл лишь там, где они действительно улучшают восприятие материала, поэтому предварительно обдумывайте: не лучше ли использовать обычный список.
  
=== Простейшая таблица ===
+
== Простейшая таблица ==
 
Любая таблица в wiki-стиле начинается с фигурной скобки '''{''' с последующей вертикальной чертой '''<nowiki>|</nowiki>''' и заканчивается вертикальной чертой '''<nowiki>|</nowiki>''' с закрывающей фигурной скобкой '''}'''. Каждая ячейка строки начинается с вертикальной черточки '''<nowiki>|</nowiki>''', после которой пишется её содержание.
 
Любая таблица в wiki-стиле начинается с фигурной скобки '''{''' с последующей вертикальной чертой '''<nowiki>|</nowiki>''' и заканчивается вертикальной чертой '''<nowiki>|</nowiki>''' с закрывающей фигурной скобкой '''}'''. Каждая ячейка строки начинается с вертикальной черточки '''<nowiki>|</nowiki>''', после которой пишется её содержание.
  
Строка 110: Строка 109:
  
  
=== Табличные рамки ===
+
== Табличные рамки ==
 
Вид рамки описывается в первой строке, сразу после '''{|'''. Не забудьте, что между ними и атрибутом должен быть пробел.  
 
Вид рамки описывается в первой строке, сразу после '''{|'''. Не забудьте, что между ними и атрибутом должен быть пробел.  
  
Строка 154: Строка 153:
 
|}
 
|}
  
=== Заголовки ===
+
== Заголовки ==
 
Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных чёрточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков.  
 
Чтобы содержимое ячейки выделялось жирным шрифтом и центрировалось, вместо вертикальных чёрточек ставятся восклицательные знаки. Обычно это применяется для выделения заголовков.  
  
Строка 206: Строка 205:
 
|}
 
|}
  
=== Запись в одну строчку ===
+
== Запись в одну строчку ==
 
Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку (если записи в них не очень длинные), отделяя их дополнительной вертикальной чертой.
 
Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку (если записи в них не очень длинные), отделяя их дополнительной вертикальной чертой.
  
Строка 241: Строка 240:
 
|}
 
|}
  
=== Объединение ячеек ===
+
== Объединение ячеек ==
 
В wiki-стиле, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали.
 
В wiki-стиле, как и в HTML, имеется возможность объединять несколько ячеек как по вертикали, так и по горизонтали.
 
Для объединения по вертикали применяется атрибут ''rowspan=n'', где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.
 
Для объединения по вертикали применяется атрибут ''rowspan=n'', где «n» — число ячеек, которые должна объединить данная ячейка. Этот атрибут вписывается перед содержанием объединяющей ячейки.
Строка 291: Строка 290:
 
  |}
 
  |}
  
=== «Раскраска» таблиц ===
+
== «Раскраска» таблиц ==
 
* См. '''"Использование цвета в вики-разметке"''' - '''[[Шаблон:Цвета HTML|Таблицу «Цвета HTLM»]]'''
 
* См. '''"Использование цвета в вики-разметке"''' - '''[[Шаблон:Цвета HTML|Таблицу «Цвета HTLM»]]'''
 
  
 
'''Текст''', находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
 
'''Текст''', находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в HTML:
Строка 391: Строка 389:
 
-->
 
-->
  
=== Название таблицы ===
+
== Название таблицы ==
 
Чтобы название таблицы было отцентрировано по её ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными wiki-атрибутами.
 
Чтобы название таблицы было отцентрировано по её ширине, нужно после вертикальной чёрточки поставить знак «+». Само название можно форматировать обычными wiki-атрибутами.
 
  '''Пример:'''
 
  '''Пример:'''
Строка 412: Строка 410:
 
  |}
 
  |}
  
=== С возможностью сортировки данных ===
+
== С возможностью сортировки данных ==
 
+
  
 
{| class="standard sortable" border=1
 
{| class="standard sortable" border=1
Строка 434: Строка 431:
 
  |}</nowiki>
 
  |}</nowiki>
  
=== Ширина таблицы и столбцов ===
+
== Ширина таблицы и столбцов ==
 
Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой не зависимо от их содержания. Для фиксации ширины таблицы применяется атрибут ''width''.
 
Если, например, подряд идут несколько отдельных таблиц, то желательно, чтобы ширина их была одинаковой не зависимо от их содержания. Для фиксации ширины таблицы применяется атрибут ''width''.
 
  '''Пример:'''
 
  '''Пример:'''
Строка 497: Строка 494:
 
  |}
 
  |}
  
=== Таблицы в машинописном стиле без форматирования ===
+
== Таблицы в машинописном стиле без форматирования ==
 
Существует простой и быстрый способ создать таблицу — это написать её в машинописном стиле. Столбцы и общий вид форматируются визуально.
 
Существует простой и быстрый способ создать таблицу — это написать её в машинописном стиле. Столбцы и общий вид форматируются визуально.
 
  '''Пример:'''
 
  '''Пример:'''
Строка 512: Строка 509:
 
Однако подобный примитивный способ форматирования таблиц является нежелательным, следует избегать его широкого использования в статьях. Повстречав таблицу, оформленную подобным образом, полезно будет привести её к стандартному вики-формату.
 
Однако подобный примитивный способ форматирования таблиц является нежелательным, следует избегать его широкого использования в статьях. Повстречав таблицу, оформленную подобным образом, полезно будет привести её к стандартному вики-формату.
  
=== Сравнение ===
+
== Сравнение ==
  
 
{| border="1" cellspacing="0" cellpadding="3"
 
{| border="1" cellspacing="0" cellpadding="3"

Версия 19:32, 17 ноября 2014

Справочное руководство
Правила сайта
Регистрация
Страница участника
Личные данные
Авторские права
Первоисточники
Защита страниц
Загрузка файлов
Справочник по
редактированию статей
Создание статьи
Именование статьи
Викификация
Вики-разметка
Изображения
Таблицы
Цвета HTML
Библиографический список

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

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

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

Любая таблица в 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
Таблица в три строки пишется так:   Это будет выглядеть так:
{|
 |Ячейка 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=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

Заголовки

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

Пример:

Для последней таблицы можно написать так:   Это будет выглядеть так:
{| 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

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

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

Пример:

Исходный код:   Это будет выглядеть так:
{| 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

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

В 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:

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

где «ABCDEF» — индекс цвета (см. Таблицу «Цвета HTLM».

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

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

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

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

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

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

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

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

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

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

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

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

С возможностью сортировки данных

Учитель Студент Школьник
Иван Иванович Иванов 1 2
Петров Иванович Иванов 2 1

Пример:

{| class="standard sortable" border=1 
 |- 
 |Учитель||Студент||Школьник
 |-
 |Иван Иванович Иванов|| 1 || 2 
 |-
 |Петров Иванович Иванов|| 2 || 1
 |}

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

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

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

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

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

Месяцы:            январь февраль март апрель май июнь июль август сентябрь октябрь ноябрь декабрь
--------------------------------------------------------------------------------------------------
Дневная температура  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

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

Сравнение

Сравнение синтаксиса для таблиц
  XHTML HTML & Wiki-td Wiki-pipe
Таблица <table></table> <table></table>
{| параметры 
 |}
Название <caption></caption> <caption></caption>
|+ название
Строка <tr></tr> <tr>
|- параметры 
Ячейка с данными

<td>ячейка1</td>
<td>ячейка2</td>

<td>ячейка1
<td>ячейка2

| ячейка1
| ячейка2
Ячейка с данными <td>ячейка1</td> <td>ячейка2</td> <td>ячейка3</td> <td>ячейка1 <td>ячейка2 <td>ячейка3
|ячейка1||ячейка2||ячейка3
Ячейка-заголовок <th></th> <th>
! заголовок
Пример
1 2
3 4
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
</table>
{| 
 | 1 || 2
 |- 
 | 3 || 4
 |}
Пример
1 2
3 4
5 6
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
   <tr>
      <td> 5 <td> 6
</table>
{| 
 | 1 || 2 
 |- 
 | 3 || 4 
 |- 
 | 5 || 6 
 |}
Плюсы

Возможность предварительного просмотра и отладки в любом XHTML-редакторе


Может быть отформатирован для наибольшей удобочитаемости


Широко известен

Возможность предварительного просмотра и отладки в любом HTML-редакторе


Может быть отформатирован для наибольшей удобочитаемости


Широко известен


Занимает меньше места, чем XHTML-код

Легко писать


Легко читать


Занимает мало места

Минусы

Утомителен


Занимает много места


Сложно быстро читать

Непривычен, особенно для людей, мало знакомых с HTML


Плохо формируется


Плохо разграничивается


Зачастую странно выглядит


Возможно, не будет поддерживаться браузерами

Непривычный синтаксис


Строгая структура


Нельзя делать отступы


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

  XHTML HTML & Wiki-td Wiki-pipe