Таблицы

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

В MDN, в основном, мы используем таблицы для представления перечня информации из более чем двух участков информации, приходящихся на один пункт. Если вы создаёте лист из названия элементов и их значений, то лучше создать список описаний вместо таблицы; это потому что мы стараемся по возможности реже использовать таблицы из двух колонок, так как возникают трудности их отображения при чтении на мобильных устройствах.

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

Создание таблицы

Чтобы вставить таблицу, нажмите кнопку Таблица на панели инструментов, которая выглядит так: as of Aug-2017

Откроется окно Свойства таблицы:

Скриншот окна "Свойства таблицы"

В окне две вкладки: Свойства таблицы и Дополнительно.

Вкладка Свойства таблицы

В этой вкладке вы будете выполнять бо́льшую часть настроек, потому что во вкладке Дополнительно гораздо меньше настроек, которые мы рекомендуем использовать. Опции:

Строки
Число строк в вашей таблице. Вы также можете добавить строки непосредственно в редакторе, но так будет быстрее.
Колонки
Число колонок в таблице.
Заголовки
Позволяет вам обозначить заголовки, если это необходимо. По умолчанию в таблице нет заголовков; однако мы предпочитаем использовать заголовки, поэтому советуем вам использовать их в большинстве случаев. Возможные значения: Без заголовков, Первая строка, Левая колонка и Сверху и слева.
Выравнивание
Позволяет выравнивать таблицу в левой, правой или центральной части страницы. Пожалуйста, не используйте эту опцию. В нашем руководстве по оформлению указано, что таблицы всегда должны нахадиться слева. (Из этого правила есть исключения.)
Заголовок
Вы можете выбрать заголовок к таблице; однако мы редко делаем это в MDN, поэтому лучше не использовать эту опцию.
Итоги
Просто пропустите этот пункт, потому что рядом с таблицей вам придётся писать объяснение.

Вкладка Дополнительно

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

Скриншот вкладки "Дополнительно"

Как видите, тут немного опций:

Идентификатор
Идентификатор (id) элемента <table>. Мы в принципе не используем идентификаторы в таблицах на MDN.
Направление текста
Позволяет настроить направление текста в таблице. Используется только при локализации контента.
Стиль
В этом поле вы можете применить собственный стиль CSS к таблице. Вообще не используйте это поле! В таком случае мы просто удалим вашу таблицу. Мы стараемся избавляться от пользовательских стилей там, где применяются наши.
CSS классы
Добавляет класс к стилю таблицы. Значение всегда должно быть standard-table, явдяющееся нашим стандартным классом для таблиц.

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

Обслуживание таблиц

Работа с таблицей очень похожа на работу в любом редакторе таблиц — надо просто заполнить ячейки. Клавиша Tab переместит вас на следующую ячейку таблицы или создаст новую строку, если следующей клетки нет.

Кликните правой кнопкой мыши по таблице, чтобы появился ряд опций для регулировки самих ячеек, строчек и колонок таблицы, а ткаже самой таблицы:

Скриншот контекстного меню

Вставить
В браузерах поддерживается вставка через скрипт (в некоторых браузерах, в том числе в Firefox, это не поддерживается из соображений безопасности). Эта опция вставляет содержимое буфера обмена в текущую ячейку таблицы.
Ячейка
Открывает подменю для работы с ячейками.
Строка
Открывает подменю для работы со строками.
Колонка
Открывает подменю для работы с колонками.
Удалить таблицу
Удаляет текущую таблицу.
Сортировка (Sort Table)
Открывает диалоговое окно для сортировки данных в таблице.
Свойства таблицы
Открывает то же окно для создания таблицы.

Подменю Ячейка

Подменю предоставляет опции для манипуляций с ячейками вашей таблицы, и оно выглядит так:

Скриншот подменю "Ячейка" в контекстном меню

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

Окно Свойства ячейки

Опция Свойства ячейки открывает диалоговое окно для детальной настройки ячейки. Окно выглядит вот так:

Скриншот окна "Свойства ячейки"

Опции:

Ширина
Изменяет ширину клетки; вы можете выбрать единицу изменения в выпадающем меню рядом. Пожалуйста, не используете эту опцию. Вам не понадобится изменять ширину клетки, за исключением случаев, когда надо вставить изображение или пример кода в таблицу.
Высота
Устанавливает высоту клетки (всегда в пикселах). Пожалуйста, не используете эту опцию. Высота клетки определяется автоматически.
Перенос по словам
Определяет, будет переноситься содержимое ячейки или нет. Всегда должно быть установлено значение по умолчанию, Да.
Горизонтальное выравнивание
Позволяет устанавливать выравнивание текста по горизонтали. Следует всегда оставлять значение по умолчанию, По левому краю.
Вертикальное выравнивание
Позволяет устанавливать выравнивание текста по вертикали.
Тип ячейки
Позволяет вам определить, какой тип у ячейки — Заголовок или Данные. Если установлено значение Заголовок, то будет применена соответствующая стилизация.
Объединяет строк
Позволяет определить, сколько строк необходимо объединить. Используется редко, но в некоторых таблицах очень полезно.
Объединяет колонок
Определяет, сколько колонок необходимо объединить.
Цвет фона
Определяет цвет фона ячейки. Старайтесь не использовать эту фунцию; редкие случаи, когда смена цвета ячейки приемлема, прописаны в классах CSS.
Цвет границ
Определяет цвет границы ячейки. Старайтесь не использовать эту фунцию; редкие случаи, когда смена цвета границы ячейки приемлема, прописаны в классах CSS.

Подменю Строка

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

Скриншот подменю "Строка" в контекстном меню

Опции подменю по порядку:

  • Вставить строку сверху добавляет новую строку перед той, в которой находится курсор
  • Вставить строку снизу добавляет строку ниже текущей
  • Удалить строки удаляет текущую строку или выделенные строки

Подменю Колонка

Подменю позволяет вам изменять колонки в вашей таблице:

Скриншот подменю "Колонка" в контекстном меню

Опции похожи на опции подменю Строка:

  • Вставить колонку слева вставляет новую колонку слева
  • Вставить колонку справа вставляет новую колонку справа
  • Удалить колонки удаляет текущую колонку или выделенные колонки