diff options
Diffstat (limited to 'files/ru/orphaned/mdn/editor/tables')
| -rw-r--r-- | files/ru/orphaned/mdn/editor/tables/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/files/ru/orphaned/mdn/editor/tables/index.html b/files/ru/orphaned/mdn/editor/tables/index.html new file mode 100644 index 0000000000..50f6c4b373 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/tables/index.html @@ -0,0 +1,163 @@ +--- +title: Таблицы +slug: orphaned/MDN/Editor/Tables +tags: + - Guide + - MDN + - MDN Meta + - Редактор + - Руководство +translation_of: MDN/Editor/Tables +original_slug: 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> |