1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: Таблицы
slug: MDN/Editor/Tables
tags:
- Guide
- MDN
- MDN Meta
- Редактор
- Руководство
translation_of: MDN/Editor/Tables
---
<div>{{MDNSidebar}}</div>
<p><span class="seoSummary">Таблицы полезны для представления информации; в этой статье описано, как создавать и обслуживать таблицы на MDN и когда стоит и не стоит использовать их.</span></p>
<p>В MDN, в основном, мы используем таблицы для представления перечня информации из более чем двух участков информации, приходящихся на один пункт. Если вы создаёте лист из названия элементов и их значений, то лучше создать список описаний вместо таблицы; это потому что мы стараемся по возможности реже использовать таблицы из двух колонок, так как возникают трудности их отображения при чтении на мобильных устройствах.</p>
<p>Пожалуйста, прочтите <a href="https://developer.mozilla.org/ru/docs/Project:Writer's_guide">Руководство по оформлению материалов MDN</a>, чтобы лучше узнать об использовании таблиц и их правильном оформлении; всё же давайте посмотрим, как вставлять и редактировать таблицы.</p>
<h2 id="Создание_таблицы">Создание таблицы</h2>
<p>Чтобы вставить таблицу, нажмите кнопку <strong>Таблица</strong> на панели инструментов, которая выглядит так: <img alt="as of Aug-2017" src="https://mdn.mozillademos.org/files/15297/table%20icon.png" style="height: 14px; width: 15px;"></p>
<p>Откроется окно <strong>Свойства таблицы</strong>:</p>
<p><img alt='Скриншот окна "Свойства таблицы"' src="https://mdn.mozillademos.org/files/17047/Table_properties_dialog_box_-_ru.JPG" style="border-style: solid; border-width: 1px; height: 402px; width: 332px;"></p>
<p>В окне две вкладки: <strong>Свойства таблицы</strong> и <strong>Дополнительно</strong>.</p>
<h3 id="Вкладка_Свойства_таблицы">Вкладка <strong>Свойства таблицы</strong></h3>
<p>В этой вкладке вы будете выполнять бо́льшую часть настроек, потому что во вкладке <strong>Дополнительно</strong> гораздо меньше настроек, которые мы рекомендуем использовать. Опции:</p>
<dl>
<dt>Строки</dt>
<dd>Число строк в вашей таблице. Вы также можете добавить строки непосредственно в редакторе, но так будет быстрее.</dd>
<dt>Колонки</dt>
<dd>Число колонок в таблице.</dd>
<dt>Заголовки</dt>
<dd>Позволяет вам обозначить заголовки, если это необходимо. По умолчанию в таблице нет заголовков; однако мы предпочитаем использовать заголовки, поэтому советуем вам использовать их в большинстве случаев. Возможные значения: <strong>Без заголовков</strong>, <strong>Первая строка</strong>, <strong>Левая колонка</strong> и <strong>Сверху и слева</strong>.</dd>
<dt>Выравнивание</dt>
<dd>Позволяет выравнивать таблицу в левой, правой или центральной части страницы. <strong>Пожалуйста, не используйте эту опцию.</strong> В нашем руководстве по оформлению указано, что таблицы всегда должны нахадиться слева. (Из этого правила есть исключения.)</dd>
<dt>Заголовок</dt>
<dd>Вы можете выбрать заголовок к таблице; однако мы редко делаем это в MDN, поэтому лучше не использовать эту опцию.</dd>
<dt>Итоги</dt>
<dd>Просто пропустите этот пункт, потому что рядом с таблицей вам придётся писать объяснение.</dd>
</dl>
<h3 id="Вкладка_Дополнительно">Вкладка <strong>Дополнительно</strong></h3>
<p>Вкладка <strong>Дополнительно</strong> предоставляет несколько возможностей, большую часть которых мы не используем на MDN и в будущем уберём.</p>
<p><img alt='Скриншот вкладки "Дополнительно"' src="https://mdn.mozillademos.org/files/17048/Table_proprties_Advanced_tab_-_ru.JPG" style="border-style: solid; border-width: 1px; height: 405px; width: 334px;"></p>
<p>Как видите, тут немного опций:</p>
<dl>
<dt>Идентификатор</dt>
<dd>Идентификатор (<code>id</code>) элемента {{HTMLElement("table")}}. Мы в принципе не используем идентификаторы в таблицах на MDN.</dd>
<dt>Направление текста</dt>
<dd>Позволяет настроить направление текста в таблице. Используется только при локализации контента.</dd>
<dt>Стиль</dt>
<dd>В этом поле вы можете применить собственный стиль CSS к таблице. <strong>Вообще не используйте это поле! В таком случае мы просто удалим вашу таблицу. </strong>Мы стараемся избавляться от пользовательских стилей там, где применяются наши.</dd>
<dt>CSS классы</dt>
<dd>Добавляет класс к стилю таблицы. Значение всегда должно быть <em>standard-table</em>, явдяющееся нашим стандартным классом для таблиц.</dd>
</dl>
<p>Как только вы завершите настройку, нажмите кнопку <strong>OK</strong> для создания таблицы.</p>
<h2 id="Обслуживание_таблиц">Обслуживание таблиц</h2>
<p>Работа с таблицей очень похожа на работу в любом редакторе таблиц — надо просто заполнить ячейки. Клавиша <kbd>Tab</kbd> переместит вас на следующую ячейку таблицы или создаст новую строку, если следующей клетки нет.</p>
<p><span style="">Кликните правой кнопкой мыши по таблице, чтобы появился ряд опций для регулировки самих ячеек, строчек и колонок таблицы, а ткаже самой таблицы:</span></p>
<p><img alt="Скриншот контекстного меню" src="https://mdn.mozillademos.org/files/17049/Table_context_menu_-_ru.jpg" style="border-style: solid; border-width: 1px; height: 199px; width: 166px;"></p>
<dl>
<dt>Вставить</dt>
<dd>В браузерах поддерживается вставка через скрипт (в некоторых браузерах, в том числе в Firefox, это не поддерживается из соображений безопасности). Эта опция вставляет содержимое буфера обмена в текущую ячейку таблицы.</dd>
<dt>Ячейка</dt>
<dd>Открывает подменю для работы с ячейками.</dd>
<dt>Строка</dt>
<dd>Открывает подменю для работы со строками.</dd>
<dt>Колонка</dt>
<dd>Открывает подменю для работы с колонками.</dd>
<dt>Удалить таблицу</dt>
<dd>Удаляет текущую таблицу.</dd>
<dt>Сортировка (Sort Table)</dt>
<dd>Открывает диалоговое окно для сортировки данных в таблице.</dd>
<dt>Свойства таблицы</dt>
<dd>Открывает то же окно для создания таблицы.</dd>
</dl>
<h3 id="Подменю_Ячейка">Подменю <strong>Ячейка</strong></h3>
<p>Подменю предоставляет опции для манипуляций с ячейками вашей таблицы, и оно выглядит так:</p>
<p><img alt='Скриншот подменю "Ячейка" в контекстном меню' src="https://mdn.mozillademos.org/files/17050/Table_context_menu_-_cell_submenu_-_ru.jpg" style="border-style: solid; border-width: 1px; height: 252px; width: 378px;"></p>
<p>Названия опций говорят сами за себя, но стоит оговориться, что <strong>Объединить ячейки</strong> доступно, только если вы выбрали несколько ячеек. Опции <strong>Объединить с правой</strong> и <strong>Объединить с нижней</strong> объединяют текущую ячейку с той, что находится справа или снизу соответственно.</p>
<h3 id="Окно_Свойства_ячейки">Окно <strong>Свойства ячейки</strong></h3>
<p>Опция <strong>Свойства ячейки</strong> открывает диалоговое окно для детальной настройки ячейки. Окно выглядит вот так:</p>
<p><img alt='Скриншот окна "Свойства ячейки"' src="https://mdn.mozillademos.org/files/17051/Cell_Properties_dialog_box_-_ru.JPG" style="border-style: solid; border-width: 1px; height: 333px; width: 432px;"></p>
<p>Опции:</p>
<dl>
<dt>Ширина</dt>
<dd>Изменяет ширину клетки; вы можете выбрать единицу изменения в выпадающем меню рядом. <strong>Пожалуйста, не используете эту опцию.</strong> Вам не понадобится изменять ширину клетки, за исключением случаев, когда надо вставить изображение или пример кода в таблицу.</dd>
<dt>Высота</dt>
<dd>Устанавливает высоту клетки (всегда в пикселах). <strong>Пожалуйста, не используете эту опцию.</strong> Высота клетки определяется автоматически.</dd>
<dt>Перенос по словам</dt>
<dd>Определяет, будет переноситься содержимое ячейки или нет. Всегда должно быть установлено значение по умолчанию, <em>Да</em>.</dd>
<dt>Горизонтальное выравнивание</dt>
<dd>Позволяет устанавливать выравнивание текста по горизонтали. Следует всегда оставлять значение по умолчанию, <em>По левому краю</em>.</dd>
<dt>Вертикальное выравнивание</dt>
<dd>Позволяет устанавливать выравнивание текста по вертикали.</dd>
<dt>Тип ячейки</dt>
<dd>Позволяет вам определить, какой тип у ячейки — <em>Заголовок</em> или <em>Данные</em>. Если установлено значение <em>Заголовок</em>, то будет применена соответствующая стилизация.</dd>
<dt>Объединяет строк</dt>
<dd>Позволяет определить, сколько строк необходимо объединить. Используется редко, но в некоторых таблицах очень полезно.</dd>
<dt>Объединяет колонок</dt>
<dd>Определяет, сколько колонок необходимо объединить.</dd>
<dt>Цвет фона</dt>
<dd>Определяет цвет фона ячейки. Старайтесь не использовать эту фунцию; редкие случаи, когда смена цвета ячейки приемлема, прописаны в классах CSS.</dd>
<dt>Цвет границ</dt>
<dd>Определяет цвет границы ячейки. Старайтесь не использовать эту фунцию; редкие случаи, когда смена цвета границы ячейки приемлема, прописаны в классах CSS.</dd>
</dl>
<h3 id="Подменю_Строка">Подменю <strong>Строка</strong></h3>
<p>Подменю <strong>Строка</strong> предоставляет опции, используя которые вы можете корректировать строки:</p>
<p><img alt='Скриншот подменю "Строка" в контекстном меню' src="https://mdn.mozillademos.org/files/17052/Table_context_menu_-_row_submenu_-_ru.jpg" style="border-style: solid; border-width: 1px; height: 181px; width: 326px;"></p>
<p>Опции подменю по порядку:</p>
<ul>
<li><strong>Вставить строку сверху</strong> добавляет новую строку перед той, в которой находится курсор</li>
<li><strong>Вставить строку снизу</strong> добавляет строку ниже текущей</li>
<li><strong>Удалить строки</strong> удаляет текущую строку или выделенные строки</li>
</ul>
<h3 id="Подменю_Колонка">Подменю <strong>Колонка</strong></h3>
<p>Подменю позволяет вам изменять колонки в вашей таблице:</p>
<p><img alt='Скриншот подменю "Колонка" в контекстном меню' src="https://mdn.mozillademos.org/files/17053/Table_context_menu_-_column_submenu_-_ru.jpg" style="border-style: solid; border-width: 1px; height: 180px; width: 333px;"></p>
<p>Опции похожи на опции подменю <strong>Строка</strong>:</p>
<ul>
<li><strong>Вставить колонку слева</strong> вставляет новую колонку слева</li>
<li><strong>Вставить колонку справа</strong> вставляет новую колонку справа</li>
<li><strong>Удалить колонки</strong> удаляет текущую колонку или выделенные колонки</li>
</ul>
<p>{{EditorGuideQuicklinks}}</p>
|
