Справочник по редактированию — различия между версиями

Материал из База данных ДЮО "Остров Сокровищ"
Перейти к:навигация, поиск
(Таблицы и колонки)
(Таблицы и колонки)
Строка 1094: Строка 1094:
 
<center>'''Пример таблицы со свойствами'''</center>
 
<center>'''Пример таблицы со свойствами'''</center>
  
<nowiki>{|  border="2" style="min-height: 150px;"</nowiki><br>::''для всей таблицы задана минимальная ширина и границы ячеек в 2 пикселя<br>
+
<nowiki>{|  border="2" style="min-height: 150px;"</nowiki><br>
<nowiki>|- style="vertical-align: bottom;"</nowiki><br>::''первая строка имеет вертикальное выравнивания снизу<br>
+
::''Для всей таблицы задана минимальная высота в 150 пикселей и границы ячеек в 2 пикселя<br>
<nowiki>| Ячейка || colspan="2" style="background: #FFFFF0; color: green; vertical-align: middle; width: 400px;" | Объединённая ячейка<br>с фоном и цветом</nowiki><br>::''вторая ячейка имеет фон, цвет и вертикально выровнена по нижнему краю<br>
+
<nowiki>|- style="vertical-align: bottom;"</nowiki><br>
<nowiki>|- style="vertical-align: top;"</nowiki><br>::''вторая строка вертикально выровнена по верхнему краю<br>
+
::''Первая строка имеет вертикальное выравнивания снизу<br>
<nowiki>| style="text-align: center; width: 200px; padding: 10px;" | По центру || Ячейка || Ячейка</nowiki> — ''первая ячейка выровнена по центру, имеет ширину в 200 пикселей и отступ от границы ячейки в 10 пикселей<br>
+
<nowiki>| Ячейка || colspan="2" style="background: #FFFFF0; color: green; vertical-align: middle; width: 400px;" | Объединённая ячейка<br>с фоном и цветом</nowiki><br>
 +
::''Вторая ячейка имеет фон, цвет и вертикально выровнена по нижнему краю<br>
 +
<nowiki>|- style="vertical-align: top;"</nowiki><br>
 +
::''Вторая строка вертикально выровнена по верхнему краю<br>
 +
<nowiki>| style="text-align: center; width: 200px; padding: 10px;" | По центру || Ячейка || Ячейка</nowiki>
 +
::''Первая ячейка выровнена по центру, имеет ширину в 200 пикселей и отступ от границы ячейки в 10 пикселей<br>
 
<nowiki>|}</nowiki>
 
<nowiki>|}</nowiki>
 
</td>
 
</td>

Версия 17:40, 1 мая 2022

Разделы

Разбиение на Разделы и создание Оглавления


Для задания структуры текста используют Разделы и подразделы. Каждый новый подраздел является частью более крупного раздела.
Что необходимо сделать Как это выглядит Что следует набрать
Разделы

Для создания раздела используются знаки равно (=).

Заголовок раздела первого уровня


=Заголовок раздела первого уровня=

Заголовок раздела второго уровня


==Заголовок раздела второго уровня==

Заголовок раздела третьего уровня

===Заголовок раздела третьего уровня===

Заголовок раздела четвертого уровня
И так далее.

====Заголовок раздела четвертого уровня====

Разделительная линия

Для создания разделительной линии необходимо поставить четыре дефиса подряд (----).

После этого текста идет разделительная линия.


После разделительной линии можно начать другой абзац.

После этого текста идет разделительная линия.
----
После разделительной линии можно начать другой абзац.

Что необходимо сделать Как это выглядит Что следует набрать
Оглавление

На wiki-страницах оглавление создается автоматически в начале страницы, если на этой странице использовано разделение на разделы.
Каждый пункт оглавления является ссылкой на соотвествующий раздел.
Для того, чтобы поместить оглавление в другое место, необходимо набрать латинскими символами два подчеркивания TOC два подчеркивания (__TOC__).
Примечание: нельзя создать два оглавления на одной странице.

Содержание
1 Первый раздел
1.1 Первый подраздел
1.2 Второй подраздел
2 Второй раздел
__TOC__



Абзацы

Разбиение на абзацы и Перенос строки


Описание Как это выглядит

При отображении текста в Википедии разные строчки сольются в одну, если специально не указать, что они относятся к разным абзацам или не поставить разрыв строки в одном абзаце.

Пример:
Первая строка.
И вторая строка.
Сольются в один абзац, несмотря на то, что набраны в разных строках.
Пример:
Первая строка. И вторая строка. Сольются в один абзац, несмотря на то, что набраны в разных строках.
Что необходимо сделать Как это выглядит Что следует набрать
Абзац

Чтобы разделить два абзаца необходимо каждый из них заключить в тег <p>…</p>.

Это первый абзац.

Это второй абзац.

<p>Это первый абзац.</p>
<p>Это второй абзац.</p>

Разрыв строки

Чтобы разделить один абзац на две строки необходимо в конце первой строки поставить тег <br> или <br />.

Это первая строка абзаца.
Это вторая строка абзаца.

Это первая строка абзаца.<br> Это вторая строка абзаца.

Абзац

Можно разбить текст на абзацы если оставить между ними пустую строку.

Это первая строка абзаца.

Это вторая строка абзаца.

Это первая строка абзаца.

Это вторая строка абзаца.

Абзац с отступом

Также можно разбить текст на абзацы добавлением отступа. Для этого в начале каждого абзаца необходимо набрать двоеточие (:).

Это первый абзац, начатый с двоеточия. Текст всего абзаца сдвигается вправо.
Если второй абзац тоже начать с двоеточия, то и и у него образуется отступ слева.

:Это первый абзац, начатый с двоеточия. Текст всего абзаца сдвигается вправо.
:Если второй абзац тоже начать с двоеточия, то и и у него образуется отступ слева.

Примечание:
Не начинайте строку с пробела!
Если начать строку с пробела, то она будет выведена без учета форматирования и все теги, которые в ней используются будут видны.



Форматирование символов

Жирность, курсивность, подчёркивание верхний и нижний индексы и другие свойства символов


Для выделения тех или иных символов, слов или словосочетаний можно использовать параметры форматирования символов. Для этого используются одинарные кавычки или теги HTML.
Что необходимо сделать Как это выглядит Что следует набрать
Жирность

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

Полужирное начертание.
В этом предложении эти слова выделены полужирным.

'''Полужирное начертание'''.
В этом предложении '''эти слова''' выделены полужирным.

Курсивность

Чтобы выделить часть текста курсивным начертанием необходимо заключить текст в две одинарные кавычки (''Выделяемый текст'').

Курсивное начертание.
В этом предложении эти слова выделены курсивом.

''Курсивное начертание''.
В этом предложении ''эти слова'' выделены курсивом.

Курсивная жирность

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

Полужирный курсив.
В этом предложении эти слова выделены полужирным курсивом.

'''''Полужирный курсив'''''.
В этом предложении '''''эти слова''''' выделены Полужирный курсивом.

Верхний индекс

Для установки верхнего индекса для символов используют HTML-тег (<sup>Символ</sup>).

y(x) = ax2

y(x) = ax<sup>2</sup>

Нижний индекс

Для установки нижнего индекса для символов используют HTML-тег (<sub>Символ</sub>).

b = a1 + a1 + … + ai

b = a<sub>1</sub> + a<sub>1</sub> + … + a<sub>i</sub>

Подчёркивание

Для подчёркивания символов используют HTML-тег (<u>Символ</u>).

Подчёркнутый текст.
В этом предложении эти слова подчёркнуты.

<u>Подчёркнутый текст</u>.
В этом предложении <u>эти слова</u> подчёркнуты.

Зачёркивание

Для подчёркивания символов используют HTML-тег (<strike>Символ</strike>).

Задчёркнутый текст.
В этом предложении эти слова зачёркнуты.

<strike>Зачёркнутый текст</strike>.
В этом предложении <strike>эти слова</strike> зачёркнуты.

Сложное оформление

    Для задания большого количества свойств тексту можно использовать свойства CSS для HTML-тега <span style="свойства текста";>…<span>.
    Это удобно, когда необходимо задать несколько свойств для одного фрагмента.
    Для более подробного знакомства с CSS можно посмотреть учебник. Все свойства перечислены в справочнике свойств CSS.

Красный
С жёлтым фоном
Жирность
Курсив
Подчёркивание
Размер 14 pt
Синий, подчёркнутый, полужирный

<span style="color: red;">Красный</span>
<span style="background-color: yellow;">С жёлтым фоном</span>
<span style="font-weight:bold">Жирность</span>
<span style="font-style: italic;">Курсив</span>
<span style="text-decoration: underline;">Подчёркивание</span>
<span style="font-size: 14pt;">Размер 14 pt</span> 
<span style="color: blue; text-decoration: underline; font-weight:bold">Синий, подчёркнутый, полужирный</span>

Форматирование абзацев

Выравнивание, межстрочный интервал, красная строка


Для задания свойств абзацев необходимо воспользоваться тегами HTML и свойствами CSS.
Что необходимо сделать Как это выглядит Что следует набрать
Центральное выравнивание

Чтобы расположить абзац по центру необходимо воспользоваться тегами (<center>…</center>).

Текст по центру

<center>Текст по центру</center>

Центральное выравнивание

Также для центрального выравнивания можно задать свойство text-align: center; для тега <p> (<p style="text-align: center;">…</p>).

Текст по центру

<p style="text-align: center;">Текст по центру</p>

Левое выравнивание

Для задания выравнивания текста по левому краю можно задать свойство text-align: left; для тега <p> (<p style="text-align: left;">…</p>).

Текст слева

<p style="text-align: left;">Текст слева</p>

Правое выравнивание

Для задания выравнивания текста по правому краю можно задать свойство text-align: right; для тега <p> (<p style="text-align: right;">…</p>).

Текст справа      

<p style="text-align: right;">Текст справа</p>

Основное выравнивание

Для того, чтобы абзац выглядел ровно и слева и справа можно задать свойство text-align: justify; для тега <p> (<p style="text-align: justify;">…</p>).

Этот текст выровнен и справа, и слева. Но для того, чтобы это увидеть необходимо, чтобы в абзаце было достаточно много слов: как минимум три строки, иначе такое выравнивание будет незаметно.

<p style="text-align: justify;">Этот текст выровнен и справа, и слева. Но для того, чтобы это увидеть необходимо, чтобы в абзаце было достаточно много слов: как минимум три строки, иначе такое выравнивание будет незаметно.</p>

Межстрочный интервал

Для задания расстояния между строк можно использовать свойство line-height: значение; для тега <p> (<p style="line-height: значение">…</p>).

У этого абзаца задан межстроный интервал (интерльяж) в 11 pt, но для того, чтобы это увидеть в абзаце должно быть не менее двух строк.

У этого абзаца задан межстроный интервал (интерльяж) в 22 pt, но для того, чтобы это увидеть в абзаце должно быть не менее двух строк.

<p style="line-height: 11pt">У этого абзаца задан межстроный интервал (интерльяж) в 11 pt, но для того, чтобы это увидеть в абзаце должно быть не менее двух строк.</p>

<p style="line-height: 22pt">У этого абзаца задан межстроный интервал (интерльяж) в 22 pt, но для того, чтобы это увидеть в абзаце должно быть не менее двух строк.</p>

Отступы от абзаца

Для задания расстояния между абзацами или от края страницы или таблицы до абзаца можно использовать семейство свойств margin (margin-top, margin-bottom, margin-left, margin-right) для тега <p> (<p style="margin: значение">…</p>).

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

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

У этого и следующего абзаца заданы отступы сверху и снизу по 25 пикселей.

У этого и предыдущего абзаца заданы отступы сверху и снизу по 25 пикселей.

<p style="margin-left: 70px">У этого абзаца задан отступ слева в 70 пикселей, но для того, чтобы это увидеть в абзаце должно быть не менее двух строк.</p>

<p style="margin-right: 175px">У этого абзаца задан отступ справа в 175 пикселей, но для того, чтобы это увидеть в абзаце должно быть не менее двух строк.</p>

<p style="margin-top: 25px; margin-bottom: 25px;">У этого и следующего абзаца заданы отступы сверху и снизу по 25 пикселей.</p>

<p style="margin-top: 25px; margin-bottom: 25px;">У этого и предыдущего абзаца заданы отступы сверху и снизу по 25 пикселей.</p>

Красная строка

Для задания расстояния отступа красной строки можно использовать свойство text-indent: "значение" (<p style="text-indent: значение">…</p>).

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

<p style="text-indent: 20px">У этого абзаца отступ красной строки составляет 20 пикселей, но чтобы это увидеть в абзаце должно быть не менее двух строк.</p>

Ссылки


Ссылки являются важным элементом любой wiki-системы, так как позволяют связывать страницы между собой и с другими страницами в Интернете.
Что необходимо сделать Как это выглядит Что следует набрать
Ссылка на статью данной Википедии

Чтобы создать ссылку на статью необходимо взять её название в двойные квадратные скобки ([[Название статьи]]).

Статья о XX Театральный фестиваль.

Статья про [[XX Театральный фестиваль]].

Ссылка на статью с изменённым названием

Если есть необходимость сослаться на стать так, чтобы текст ссылки выглядел иначе, чем название статьи, то набирают открывающие двойные квадратные скобки, далее пишут название статьи, ставят знак вертикальной линии , пишут текст, который должен отображаться, после чего закрывают двойные квадратные скобки ([[Название статьи | Отображаемый текст]]).

Статья про XX Театральном фестивале.

Статья о [[XX Театральный фестиваль | XX Театральном фестивале]].

Ссылка на статью с добавлением окончания

Можно к ссылке добавить окончание, для этого необходимо дописать окончание прямо после последней закрывающей скобки (([[Название статьи]]-окончание)

Хроника Видео отряда.

Хроника [[Видео отряд]]а.

Ссылки на разделы

Можно ссылаться на разделы статьи, для этого после названия статьи ставится решётка и название раздела (([[Название статьи#Название раздела]])

Ссылки на подразделы лучше «маскировать» заменяющим текстом (([[Название статьи#Название раздела | Отображаемый текст]])

Справочник по редактированию#Абзацы

Справочник по абзацам

[[Справочник по редактированию#Абзацы]]

[[Справочник по редактированию#Абзацы | Справочник по абзацам]]

Ссылка на категорию

Для организации ссылки не на статью, а на категорию необходимо взять её название в двойные квадратные скобки поставив перед названием двоеточие, потом написав слово «Категория» и добавив двоеточие. ([[:Категория:Название категории]], [[:Категория:Название категории | Отображаемый текст]]).

Категория:Летописи

Наши летописи

[[:Категория:Летописи]]

[[:Категория:Летописи | Наши летописи]]

Ссылка на внешние страницы

    Для организации ссылок на внешние web-страницы необходимо взять URL-адрес в одинарные квадратные скобки (["Протокол://адрес сайта/путь к странице"]), в этом случае ссылка отобразиться как её номер на странице.
    Чтобы ссылка выглядела как текст, после URL ставится пробел и пишется отображаемый текст (["Протокол://адрес сайта/путь к странице" "Отображаемый текст"]).
    Если вы хотите, чтобы URL-адрес стал ссылкой, то достаточно его просто поместить в текст. (Протокол://адрес сайта/путь к странице).

Мы рады привет вас на сайте «Острова» [1]

Познакомьтесь с нашими книгами.

И загляните в раздел с нашими песнями по адресу: http://music.vostrove.ru

Мы рады привет вас на сайте «Острова» [http://vostrove.ru]

Познакомьтесь с нашими [http://vostrove.ru/books/index.htm книгами]

И загляните в раздел с нашими песнями по адресу: http://music.vostrove.ru

Ссылка на файлы

    Для организации ссылок на медиа-файлы, загруженные в данную Википедию без отображения их содержания достаточно в двойных квадратных скобках написать слово «Медиа», поставить двоеточие и указать имя файла. ([[Медиа:Имя файла]]).
    Чтобы ссылка выглядела на файл выглядела как текст, после имени файла ставится вертикальная черта и пишется отображаемый текст ([[Медиа:Имя файла | Отображаемый текст]]).
    Для организации ссылок на другие типы файлов, загруженные в данную Википедию необходимо действовать аналогично.
    Примечание: Вставку ссылок на картинки и другие отображаемые форматы смотри в разделе «Изображения».
    Примечание: Вставка ссылок на файлы, расположенных на внешних ресурсах осуществляется также, как и вставка ссылок на внешние страницы.

Это ссылка на общую фотографию весеннего сбора 2022 Медиа:Osen22_all.jpg

А это эмблема этого сбора.

Здесь можно познакомиться с памяткой организатору дела.

Это ссылка на общую фотографию весеннего сбора 2022 [[Медиа:Osen22_all.jpg]]

А это [[Медиа:Osen22znak.png | эмблема]] этого сбора.

Здесь можно познакомиться с [[Медиа:Org_info21schema.pdf | памяткой организатору дела]].

Перенаправление ссылки

    Для организации перенаправления ссылки на другую статью необходимо создать новую статью, написать в ней #Redirect и в двойных квадратных скобках указать название статьи (#Redirect [[Название статьи]]).
    Это бывает необходимо, когда пользователь ищет статью, но не всегда точно знает её название.
    Также, это бывает удобно, чтобы не указывать отображаемый текст для часто используемых ссылок.
    К примеру, вместо того, чтобы писать [[Маннин Александр|Саша Маннин]] создать статью под названием «Саша Маннин» и написать в ней [[Маннин Александр]], тогда все обращения к статье «Саша Маннин» будут автоматически перенаправленны на статью «Маннин Александр».

На странице «Виталий Лебедев» указано #Redirect [[Лебедев Виталий]]

Redirect lv.png


Изображения

Вставка изображений, создание галлерей


Перед тем, как вставить изображение в статью, необходимо загрузить её в Википедию.
Что необходимо сделать Как это выглядит
Загрузка изображений

     Чтобы загрузить изображение необходимо в левом меню выбрать «Загрузить файл», дать ему имя на латинице и описание.
     Перед загрузкой файла обязательно ознакомьтесь с правилами задания имён файлов и описаний.

Loadfile.png
Что необходимо сделать Как это выглядит Что следует набрать
Вставка изображения на страницу

Для вставки полноразмерного изображения на страницу необходимо написать слово «Файл», поставить двоеточие и указать имя файла. [[Файл:Имя файла]]

Осень13 1.JPG

[[Файл:osen13_1.jpg]]

Вставка изображения с параметрами

     В Википедии можно задать параметры отображения изображения. Это бывает нужно, когда исходный размер изображения очень большой или необходимо разместить изображение слева или справа от текста.
     Для вставки вставки изображения и задания ему параметров необходимо в двойных квадратных скобках указать через вертикальную черту слово «Файл:Имя файла», размер изображения, выравнивание относительно обтекаемого текста (left, center, right). [[Файл:Имя файла | Размер | Выравнивание ]]

Osen22znak.png

[[Файл:Osen22znak.png | 200px | center ]]

Вставка миниатюры изображения

     В Википедии можно вставить миниатюру изображения и задать ей параметры. Это бывает нужно не только чтобы задать изображению нужный размер и выравнивание, но и для создания подписи под изображением.
     Для вставки миниатюры необходимо в двойных квадратных скобках указать через вертикальную черту слово «Файл:Имя файла», размер миниатюры, слово «thumb», выравнивание относительно обтекаемого текста (left, center, right) и подпись под изображением. [[Файл:Имя файла | Размер | thumb | Выравнивание | Подпись]]

Значок сбора «Весна 22»

[[Файл:Osen22znak.png | 200px | thumb | center | Значок сбора «Весна 22»]]

Обтекание текстом

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

Osen22znak.png

Это эмблема сбора «Весна 2022». Она расположена на значке, который получает каждый участник сбора.

[[Файл:Osen22znak.png | 150px | left ]]
Это эмблема сбора «Весна 2022». Она расположена на значке, который получает каждый участник сбора.

Галлерея изображений

     Для создания галлереи из нескольких объединенных изображений можно воспользоваться HTML-тегом gallery, указав ему в качестве параметров количество изображений в строке, ширину и высоту миниатюр в галерее.
     Все ссылки на изображения (Файл:Имя файла) в галерее должны располагаться внутри тега gallery.
<gallery perrow="Количество картинок в строке" widths="Ширина миниатюры" heights="Высота миниатюры">…</gallery>
     В галерее в качестве подписей к изображениям можно использовать ссылки.

<gallery perrow="3" widths="100px" heights="100px">
Файл:Chechov20.jpg | [[Вы так далеко]]…
Файл:Kinggame20.jpg | [[Королевские игры]]
Файл:Eshelon1.jpg | [[Эшелон]]
</gallery>

Списки

Нумерованные, ненумерованные, вложенные списки


Что необходимо сделать Как это выглядит Что следует набрать
Ненумерованный список

Для организации ненумерованного списка необходимо перед каждой строкой списка вставить символ звёздочки (*).

  • Первый пункт списка
  • Второй пункт списка
  • Третий пункт списка

* Первый пункт списка
* Второй пункт списка
* Третий пункт списка

Нумерованный список

Для организации нумерованного списка необходимо перед каждой строкой списка вставить символ решётки (#).

  1. Первый пункт списка
  2. Второй пункт списка
  3. Третий пункт списка

# Первый пункт списка
# Второй пункт списка
# Третий пункт списка

Многоуровневые списки

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

  • Пункт списка
    • Вложенный пункт списка
      • Вложенный пункт списка
    • Вложенный пункт списка
  1. Пункт списка
    1. Вложенный пункт списка
    2. Вложенный пункт списка

* Пункт списка
** Вложенный пункт списка
*** Вложенный пункт списка
** Вложенный пункт списка
# Пункт списка
## Вложенный пункт списка
## Вложенный пункт списка

Смешанные многоуровневые списки

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

  • Пункт списка
    1. Вложенный пункт списка
    2. Вложенный пункт списка
  1. Пункт списка
    • Вложенный пункт списка
      1. Вложенный пункт списка

* Пункт списка
*# Вложенный пункт списка
*# Вложенный пункт списка
# Пункт списка
#* Вложенный пункт списка
#*# Вложенный пункт списка

Таблицы и колонки

Организация текста и других элементов в несколько колонок и в таблицу


Что необходимо сделать Как это выглядит Что следует набрать
Простые колонки

    Фактически многоколонный текст является таблицей в которой она строка.
    Для организации нескольких колонок необходимо перед текстом колонок поставить открывающую фигурную скобку и вертикальную черту ( {| ), в конце ставится вертикальная черти и закрывающая фигурная скобка ( |} ), колонки располагаются внутри указанных символов и каждая колонка начинается в вертикальной черты ( | ).

Текст первой колонки.

Вторая строка первой колонки.

Текст второй колонки

Вторая строка второй колонки.

Текст третьей колонки

Вторая строка третьей колонки.

{|
| Текст первой колонки<br>
Вторая строка первой колонки.
| Текст второй колонки<br>
Вторая строка второй колонки.
| Текст третьей колонки<br>
Вторая строка третьей колонки.
|}

Простая таблица

    В Википедии предусмотрено оформление таблицы по умолчанию. Для того, чтобы использовать это оформление необходимо после открывающей фигурной скобки и вертикальной черты добавить class="wikitable".
    Для организации строки необходимо добавить одну вертикальную черту и дефис ( |- ), первая ячейка в этой строке начинается в одной вертикальной черты ( | ), каждая следующая ячейка с двух вертикальных чёрточек ( || ).

Таблица без использования class="wikitable"

Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка


Таблица с использованием class="wikitable"

Первая ячейка Вторая ячейка
Третья ячейка Четвертая ячейка

{| class="wikitable"
|-
| Первая ячейка || Вторая ячейка
|-
| Третья ячейка || Четвертая ячейка
|}

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

    Для объединения нескольких ячеек одной строки в одну необходимо перед объединяемыми ячейками поставить colspan="Количество объединяемых ячеек".
    Для объединения нескольких ячеек одного столбца в одну необходимо перед объединяемыми ячейками поставить rowspan="Количество объединяемых ячеек".
    Для объединения нескольких ячеек, объединяющих ячейки нескольких столбцов и строк в одну необходимо перед объединяемыми ячейками поставить colspan="Количество объединяемых ячеек" и rowspan="Количество объединяемых ячеек".
    Важно: при объединении нескольких ячеек одной строки в одну, количество ячеек в строке должно уменьшиться на количество объединяемых; аналогично для вертикального объединения.

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

{| class="wikitable"
|-
| Ячейка || colspan="2" | Объединённая ячейка
|-
| Ячейка || Ячейка || Ячейка
|-
| rowspan="2" | Объединённая ячейка || Ячейка || Ячейка
|-
| Ячейка || Ячейка
|-
| Ячейка || Ячейка || Ячейка
|-
| Ячейка || colspan="2" rowspan="2" | Объединённая ячейка
|-
| Ячейка
|}

Заголовки таблицы, строк и столбцов

    Для установки ячейки, как заголовка необходимо перед ней вместо вертикальной черты поставить восклицательный знак ( ! ).
    Для задания названия таблицы необходимо в начале таблицы второй строкой вставить вертикальную черту, знак плюса и текст заголовка ( |+ Заголовок таблицы ).

Заголовок таблицы
Заголовок столбца Заголовок столбца Заголовок столбца
Заголовок строки Первая ячейка Вторая ячейка
Заголовок строки Третья ячейка Четвертая ячейка

{| class="wikitable"
|+ Заголовок таблицы
! Заголовок столбца ! Заголовок столбца ! Заголовок столбца
|-
! Заголовок строки | Первая ячейка || Вторая ячейка
|-
! Заголовок строки | Третья ячейка || Четвертая ячейка
|}

Параметры таблиц

    В Википедии можно задать множество параметров для оформления таблиц. Для этого необходимо вставить второй строкой таблицы вертикальную черту, дефис и список параметров ( |- "список параметров" ), а для оформления строк или ячейки перед началом строки или ячейки необходимо вставить вертикальную черту и список параметров ( | "список параметров" ).
    Список параметров удобнее всего задать через стили CSS ( style="параметры оформления" ).

Свойство
Пример использования

Вертикальное выравнивание содержимого ячеек (top, bootom, middle)

style="vertical-align: top;"

Ширина ячейки

style="width: 100px;"

Высота ячейки

style="height: 50px;"

Максимальная ширина ячейки

style="max-width: 100px;"

Максимальная высота ячейки

style="max-height: 50px;"

Минимальная ширина ячейки

style="min-width: 70px;"

Минимальная высота ячейки

style="min-height: 30px;"

Выравнивание текста

style="text-align: justify;"

Отступ от края ячейки

style="padding: 10px;"

Толщина обводки ячейки

border="2"

Цвет фона

style="background: yellow;"

Цвет текста

style="color: blue;"

Пример таблицы со свойствами

{| border="2" style="min-height: 150px;"

Для всей таблицы задана минимальная высота в 150 пикселей и границы ячеек в 2 пикселя

|- style="vertical-align: bottom;"

Первая строка имеет вертикальное выравнивания снизу

| Ячейка || colspan="2" style="background: #FFFFF0; color: green; vertical-align: middle; width: 400px;" | Объединённая ячейка<br>с фоном и цветом

Вторая ячейка имеет фон, цвет и вертикально выровнена по нижнему краю

|- style="vertical-align: top;"

Вторая строка вертикально выровнена по верхнему краю

| style="text-align: center; width: 200px; padding: 10px;" | По центру || Ячейка || Ячейка

Первая ячейка выровнена по центру, имеет ширину в 200 пикселей и отступ от границы ячейки в 10 пикселей

|}

Ячейка Объединённая ячейка
с фоном и цветом
По центру Ячейка Ячейка


Краткий справочник по разметке таблицы
Элемент Разметка Необходимость Расположение
Начало таблицы
{|
Обязательно
Заголовок таблицы
|+
Не обязательно Только после первой строки таблицы (Начала таблицы).
Задание свойств
|-
Не обязательно В этой строке прописываются свойства оформления таблицы.
Начало строки
|-
Не обязательно
Ячейка заголовка
!
Не обязательно Последовательные ячейки заголовка таблицы могут быть добавлены в одну строку, разделенные двойными метками (!!); или начать с новых строк, каждая со своей одиночной меткой (!).
Объединение вертикальных ячеек
rowspan="…"
Не обязательно Важно, что при объединении ячеек вертикально в каждой следующей строке должно быть на одну меньше ячеек, чем в той, где стоит это свойство.
Объединение горизонтальных ячеек
colspan="…"
Не обязательно Важно, что при объединении ячеек горизонтально в строке, где стоит это свойство должно быть меньше ячеек на величину объединяемых.
Ячейка таблицы
| или ||
Не обязательно Последовательные ячейки данных таблицы могут быть добавлены в одну строку, разделенную двойными метками (||), или начинаться с новых строк, каждая со своей одиночной меткой (|).
Окончание таблицы
|
Обязательно

Спецсимволы

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


ИмяКодВидОписание
&nbsp;&#160; неразрывный пробел
&pound;&#163;£фунт стерлингов
&euro;&#8364;знак евро
&para;&#182;символ параграфа
&sect;&#167;§параграф
&copy;&#169;©знак copyright
&reg;&#174;®знак зарегистрированной торговой марки
&trade;&#8482;знак торговой марки
&deg;&#176;°градус
&plusmn;&#177;±плюс-минус
&frac14;&#188;¼дробь - одна четверть
&frac12;&#189;½дробь - одна вторая
&frac34;&#190;¾дробь - три четверти
&times;&#215;×знак умножения
&divide;&#247;÷знак деления
&fnof;&#402;ƒзнак функции
Прочие символы
ИмяКодВидОписание
&spades;&#9824; знак масти "пики"
&clubs;&#9827;знак масти "трефы"
&hearts;&#9829;знак масти "червы"
&diams;&#9830;знак масти "бубны"
&quot;&#34;"двойная кавычка
&amp;&#38;&амперсанд
&lt;&#60;<знак "меньше"
&gt;&#62;>знак "больше"


Знаки пунктуации
ИмяКодВидОписание
&hellip;&#8230;многоточие ...
&prime;&#8242;одиночный штрих - минуты и футы
&Prime;&#8243;двойной штрих - секунды и дюймы




Общая пунктуация
ИмяКодВидОписание
&ndash;&#8211;тире
&mdash;&#8212;длинное тире
&lsquo;&#8216;левая одиночная кавычка
&rsquo;&#8217;правая одиночная кавычка
&sbquo;&#8218;нижняя одиночная кавычка
&ldquo;&#8220;левая двойная кавычка
&rdquo;&#8221;правая двойная кавычка
&bdquo;&#8222;нижняя двойная кавычка
&laquo;&#171;«левая двойная угловая скобка
&raquo;&#187;»правая двойная угловая скобка
Стрелки
ИмяКодВидОписание
&larr;&#8592;стрелка влево
&uarr;&#8593;стрелка вверх
&rarr;&#8594;стрелка вправо
&darr;&#8595;стрелка вниз
&harr;&#8596;стрелка влево-вправо












Греческие буквы
ИмяКодВидОписание
&Alpha;&#913;Αгреческая заглавная буква альфа
&Beta;&#914;Βгреческая заглавная буква бета
&Gamma;&#915;Γгреческая заглавная буква гамма
&Delta;&#916;Δгреческая заглавная буква дельта
&Epsilon;&#917;Εгреческая заглавная буква эпсилон
&Zeta;&#918;Ζгреческая заглавная буква дзета
&Eta;&#919;Ηгреческая заглавная буква эта
&Theta;&#920;Θгреческая заглавная буква тета
&Iota;&#921;Ιгреческая заглавная буква иота
&Kappa;&#922;Κгреческая заглавная буква каппа
&Lambda;&#923;Λгреческая заглавная буква лямбда
&Mu;&#924;Μгреческая заглавная буква мю
&Nu;&#925;Νгреческая заглавная буква ню
&Xi;&#926;Ξгреческая заглавная буква кси
&Omicron;&#927;Οгреческая заглавная буква омикрон
&Pi;&#928;Πгреческая заглавная буква пи
&Rho;&#929;Ρгреческая заглавная буква ро
&Sigma;&#931;Σгреческая заглавная буква сигма
&Tau;&#932;Τгреческая заглавная буква тау
&Upsilon;&#933;Υгреческая заглавная буква ипсилон
&Phi;&#934;Φгреческая заглавная буква фи
&Chi;&#935;Χгреческая заглавная буква хи
&Psi;&#936;Ψгреческая заглавная буква пси
&Omega;&#937;Ωгреческая заглавная буква омега
Греческие буквы
ИмяКодВидОписание
&alpha;&#945;αгреческая строчная буква альфа
&beta;&#946;βгреческая строчная буква бета
&gamma;&#947;γгреческая строчная буква гамма
&delta;&#948;δгреческая строчная буква дельта
&epsilon;&#949;εгреческая строчная буква эпсилон
&zeta;&#950;ζгреческая строчная буква дзета
&eta;&#951;ηгреческая строчная буква эта
&theta;&#952;θгреческая строчная буква тета
&iota;&#953;ιгреческая строчная буква иота
&kappa;&#954;κгреческая строчная буква каппа
&lambda;&#955;λгреческая строчная буква лямбда
&mu;&#956;μгреческая строчная буква мю
&nu;&#957;νгреческая строчная буква ню
&xi;&#958;ξгреческая строчная буква кси
&omicron;&#959;οгреческая строчная буква омикрон
&pi;&#960;πгреческая строчная буква пи
&rho;&#961;ρгреческая строчная буква ро
&sigmaf;&#962;ςгреческая строчная буква сигма
&sigma;&#963;σгреческая строчная буква сигма
&tau;&#964;τгреческая строчная буква тау
&upsilon;&#965;υгреческая строчная буква ипсилон
&phi;&#966;φгреческая строчная буква фи
&chi;&#967;χгреческая строчная буква хи
&psi;&#968;ψгреческая строчная буква пси
&omega;&#969;ωгреческая строчная буква омега