Справка:Как делать таблицы — различия между версиями
Admin (обсуждение | вклад) м (Admin переименовал страницу Вики-Поляны:Как делать таблицы в Справка:Как делать таблицы без оставления перенаправления) |
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*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 |} |
|
|
Табличные рамки
Вид рамки описывается в первой строке, сразу после {|. Не забудьте, что между ними и атрибутом должен быть пробел.
Толщина линий рамки задаётся атрибутом border=n
, где «n» — толщина линии:
Исходный код: | Это будет выглядеть так: | ||||||||||||
{| border=1 |Ячейка 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 |} |
|
|
Запись в одну строчку
Чтобы сделать записываемую в таблицу информацию более читабельной, можно писать ряды в одну строчку (если записи в них не очень длинные), отделяя их дополнительной вертикальной чертой.
Пример:
Исходный код: | Это будет выглядеть так: | |||||||||||||||
{| border=1 !Первый столбец||Второй столбец||Третий столбец |- |Ячейка 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 |} |
|
Для объединения по горизонтали используется атрибут colspan=n.
Пример: {| border=1 |Ячейка 1 |colspan=2 |Ячейка 2, объединяет два столбца |- |Ячейка 3 |Ячейка 4 |Ячейка 5 |}
Выглядит это так:
Ячейка 1 | Ячейка 2, объединяет два столбца | |
Ячейка 3 | Ячейка 4 | Ячейка 5 |
«Раскраска» таблиц
- См. "Использование цвета в вики-разметке" - Таблицу «Цвета HTLM»
Текст, находящийся в таблице, можно сделать цветным. С этой целью применяются те же тэги, что и в 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 - long - long- long- long- long | Ячейка 1*2 |
Ячейка 1*3 | Ячейка 1*4 |
Ячейка 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 - 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>ячейка1 |
| ячейка1 | ячейка2 | ||||||
Ячейка с данными | <td>ячейка1</td> <td>ячейка2</td> <td>ячейка3</td> | <td>ячейка1 <td>ячейка2 <td>ячейка3 | |ячейка1||ячейка2||ячейка3 | ||||||
Ячейка-заголовок | <th></th> | <th> | ! заголовок | ||||||
Пример |
| ||||||||
<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 |} | |||||||
Пример |
| ||||||||
<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 |