Как добавить таблицу на сайт

Часто бывает необходимо представить на сайте данные в виде таблицы. Можно даже встретить страницы, где авторы выкладывают скриншоты таблиц. Этот способ имеет несколько минусов. Главный из них — эти данные не индексируются и их невозможно найти по запросу.

К счастью в сети есть несколько различных онлайн-сервисов для создания html-таблиц. Лучший из них, на мой взгляд, tablesgenerator.com. Очень продуманный и многофункциональный генератор таблиц. Итак, всё подробно по шагам.

Заходим на сайт и выбираем в меню пункт HTML tables. Именно этот тип таблиц предназначен для отображения данных на сайте.

Выбираем параметры таблицы: File -> New Table
В открывшемся окне выбираем количество рядов () и столбцов (Columns, по вертикали) . Если ячеек окажется недостаточно, таблицу можно будет масштабировать в процессе наполнения. Как это сделать, я расскажу ниже.

select_rowsПрежде, чем заполнять нашу таблицу, давай-те рассмотрим некоторые полезные свойства ячеек. Их можно объединять (сливать вместе) и разделять как по горизонтали, так и по вертикали. Для этого нужно выделить интересующие нас ячейки курсором мыши, как текст. После чего нажать клавишу:
merge_cells
ячейки будут объединены. Для разделения ячеек используется аналогичная клавиша:

split_cells

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

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

добавление рядов и столбцов

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

Любое неверное действие можно отменить комбинацией клавиш  «Ctrl z».

Когда наша таблица заполнена, её нужно сохранить для сайта. Обратите внимание на галочку Compact mode. Нам нужен именно этот режим, так как он объединяет таблицу и стили. При использовании систем управления контентом этот вариант позволит встраивать таблицы вместе с выбранными стилями.

compact_mode

 
Когда всё готово, нажимаем generate. Убеждаемся, что полученная таблица соответствует нашим ожиданиям (голубая кнопка Preview) и копируем нашу таблицу в буфер обмена Copy to clipboard (Это действие аналогично действию «копировать» или «Ctrl C»). Теперь вставляем в наш сайт/блог («Ctrl V» или «Вставить»). Публикуем, смотрим результат:

 

Пробная таблица
ячейка 1 ячейка 2

 

Кнопка Theme позволяет выбирать различные стили отображения таблиц:

 

Пробная таблица
ячейка 1 ячейка 2

 

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

 

Понравилась статья? Поделитесь с друзьями!