Как создать HTML-таблицу

Если у вас есть доступ к редактору WYSIWYG, например Dreamweaver, вы можете легко создать таблицу HTML с помощью встроенных мастеров, но я предпочитаю использовать Markdown для создания таблиц, поскольку он не требует тегов. Перейдите на сайт gist.github.com (здесь вам даже не нужна учетная запись) и введите таблицу в следующем формате:
Column A | Column B
-------- | -------
Cell A1 | Cell B1
Cell A2 | Cell B2
Каждый столбец разделен вертикальной чертой (|), а дефис (-) обозначает заголовки таблицы. Назовите gist table.md (.md указывает на язык разметки) и нажмите кнопку «Создать секретную таблицу», чтобы отобразить уценку в виде таблицы.
После того, как вы нажмете кнопку Сохранить , вы увидите визуальную таблицу, которую вы можете скопировать и вставить в любой редактор форматированного текста, например в окно создания сообщения Gmail. Кроме того, вы можете щелкнуть правой кнопкой мыши таблицу в Github и выбрать Проверить элемент , чтобы просмотреть фактические теги HTML для этой таблицы.

Tableizer — еще один простой инструмент для преобразования данных электронной таблицы в код таблицы HTML. Создайте таблицу в Excel или приложении Numbers на рабочем столе, скопируйте ячейки и вставьте их в Tableizer. Он сгенерирует HTML-код, который можно использовать в вашем блоге или на веб-сайте.

Добавьте Google Таблицы на свой веб-сайт

Популярный вариант для встраивания табличных данных на веб-странице находится через Google Docs (электронные таблицы). Преимущество с таким подходом состоит в том, что вы можете изменить данные в таблице электронной таблицы, а встроенная таблица будет обновляться, чтобы отразить редактировать. Нет необходимости редактировать веб-страницу, содержащую таблицу.
Перейдите на spreadsheets.google.com, введите данные в таблицу и выберите параметр Опубликовать в Интернете в меню «Файл». Выберите Начать публикацию , и Google Диск предложит вам код внедрения IFRAME для этого конкретного листа.
Встроенный лист — см. Живую версию — сохранит исходное форматирование ячеек, но по-прежнему будет статическим HTML-документом — нет возможности для сортировки или фильтрации данных в HTML-таблице.

Встраивать таблицы Excel в веб-страницы

Это мой любимый метод встраивания данных электронной таблицы на веб-страницу, и скоро я объясню почему.
Перейдите на office.live.com и создайте новую пустую книгу. Введите табличные данные в лист Excel, а затем выберите «Файл» -> «Поделиться» -> «Вставить» -> «Создать HTML».
Excel, в отличие от Google Docs, позволяет вставлять выбранный диапазон ячеек, а не всю электронную таблицу. Вы также можете включить ссылку для загрузки во встроенные ячейки, чтобы посетителю вашего веб-сайта было проще загрузить и открыть таблицу в своем локальном приложении для работы с электронными таблицами. Встроенная электронная таблица также предлагает лучшее копирование и вставку, чем Документы Google.
Вот живая версия HTML-таблица, встроенного, используя веб-приложение Excel.
Связанный: Захват веб-таблиц в Excel

Сделайте статические таблицы HTML интерактивными

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

Этот код добавит небольшую кнопку Excel рядом с вашей HTML-таблицей, и когда кто-то щелкнет эту кнопку, он создаст красивое и интерактивное представление таблицы с поддержкой сортировки и фильтрации. Вы даже можете визуализировать таблицу HTML в виде графиков, не покидая страницы.

HTML-таблицы или электронные таблицы?

Преимущество статических HTML-таблиц в том, что они оптимизированы для SEO (поисковые системы могут читать вашу HTML-таблицу), а таблицы на основе электронных таблиц — нет. Последние, однако, обеспечивают лучшие параметры форматирования и относительно легко обновляются.
Если вы хотите получить лучшее из обоих миров, воспользуйтесь таблицей HTML и интерактивным представлением Excel, которое позволит зрителям взаимодействовать с таблицей по запросу.
Соответствующее руководство: как встроить что-либо на сайт