Строительные инструменты для Toolz.dev означает, что я пишу много HTML-таблиц, в документации, в электронных письмах пользователям, в случайных простых целевых страницах. И таблица - это один бит HTML, который никто не любит писать вручную. Десять строк и пять столбцов - это более пятидесяти тегов ячеек, все из которых должны открываться и закрываться в правильном порядке, а один отсутствует </td> тихо разбивает всю верстку. у меня была куча данных в электронной таблице, и я хотел разметку, поэтому я встроил генератор в сайт. это руководство к нему.
TL;DR: Инструмент Генератор таблиц HTML берет данные, разделенные запятыми или вкладками, и записывает полные и доступные данные
<table>с<thead>,<tbody>и правильные ячейки заголовка. Первая строка может стать<th scope="col">и первая колонна<th scope="row">итак, читатели экрана объявляют правильные заголовки. Добавьте подпись, полосатые строки и границы и выберите CSS на основе классов, встроенные стили для электронной почты или простой семантический HTML. Каждая ячейка экранирована. Он работает полностью на стороне клиента: нет загрузки, нет регистрации, работает в автономном режиме.
Что такое генератор таблиц HTML?
Генератор таблиц HTML превращает строки данных в разметку HTML, которая отображает их в виде таблицы в браузере. вы вставляете значения, разделенные запятыми или вкладками, выбираете, как должна выглядеть таблица, и инструмент записывает полное <table> элемент с <thead>, <tbody>, и ряды и ячейки внутри них. Вместо того, чтобы вручную печатать каждый <tr>, <th>, и <td> а подсчитывая ячейки, чтобы столбцы оставались выстроенными, вы вставляете данные один раз и копируете резервную разметку, готовую к размещению на странице, шаблоне электронной почты или файле Markdown, который позволяет использовать необработанный HTML.
Причина, по которой генератор зарабатывает свое место, заключается в том, что таблица HTML многословна и повторяется, а повторение - это то, где скрываются ошибки. Каждой ячейке нужен открывающий и закрывающий тег, ячейки заголовка отличаются от ячеек данных, и все это должно оставаться прямоугольным, или браузер создает рваный беспорядок. Делать это вручную для чего-либо за пределами крошечной таблицы медленно и подвержено ошибкам. Инструмент делает это детерминированно: вы даете ему значения, он создает действительную, экранированную, правильно вложенную разметку.
Есть слой доступности поверх необработанной разметки, который рукописный стол часто пропускает, и это часть, которая меня волнует больше всего. правильно построенная таблица использует <th> для ячеек заголовка с a scope атрибут, поэтому вспомогательная технология может объявить, какому заголовку принадлежит данная ячейка данных, и она может нести a <caption> описание того, что содержится в таблице.WHATWG HTML Living Standard's раздел о табличных данных описывает эти элементы, и генератор применяет их для вас, а не оставляет вам a <div> сетка, которая выглядит как таблица, но читается как шум для устройства чтения с экрана.
Почему бы просто не написать таблицу от руки?
Для таблицы два на два, почерк это быстрее, чем открыть инструмент, и вы должны. генератор зарабатывает свою держать на столах, которые на самом деле болезненны: те, с реальными данными, много строк, и заголовок. на тех, почерк имеет три повторяющихся режима отказа.
Первый - сломанная структура Пропустить один закрывающий тег среди пятидесяти и браузер's восстановление ошибок делает что-то непредсказуемое, и вы теряете минуты охоты за клеткой, которая начала его. второй - противоречивые столбцы. если в одной строке четыре ячейки, а в остальных - пять, таблица делает кривой, и обнаружить короткий ряд в стене тегов действительно сложно. третий убегает: вставить данные, содержащие a <, ан &или заблудший " прямо в камеру, и вы либо сломали наценку, либо открыли небольшое отверстие для инъекции.
Генератор удаляет все три. Он заполняет короткие строки, поэтому каждая строка имеет одинаковое количество ячеек, и таблица остается прямоугольной. Он всегда закрывает то, что открывает. И он HTML-ускользает от каждого значения ячейки, поэтому a < становиться < и отображается как текст вместо того, чтобы быть прочитанным как тег. то, что вы вставляете, то и получаете, визуализируя безопасно.
Вот решение в одной таблице.
| положение | обычай | почему |
|---|---|---|
| Крошечный стол два на два | Напишите это от руки | Быстрее, чем что-либо открывать |
| Реальные данные с множеством строк и заголовком | Генератор таблиц HTML | Побег, гнездование и выравнивание - это место, где ручные столы ломаются |
| Вместо этого вам нужна таблица Markdown | Генератор таблицы разметки | Та же идея, вывод Markdown со вкусом GitHub |
| Вы просто хотите просмотреть или проверить CSV | Просмотрщик CSV | Прочтите данные, не создавая разметку |
Как сделать стол доступным?
Это вопрос, который отделяет таблицу, которая просто выглядит правильно от той, которая работает для всех, поэтому она получает свой собственный раздел. имеют значение две вещи: ячейки заголовка и подпись.
Ячейки заголовка сначала. в реальной таблице ячейки, которые маркируют строки или столбцы должны быть <th>, не <td>и каждый <th> должен нести а scope атрибут, говорящий, возглавляет ли он столбец (scope="col") или ряд (scope="row"). Использование считывателей экрана scope чтобы объявить соответствующий заголовок перед каждой ячейкой данных, слушатель слышит & quot;Роль: Engineer& quot; а не голое & quot;Engineer& quot; без контекста. генератор и #39;s опция заголовка первого ряда излучает <th scope="col"> для верхней строки и параметра заголовка первого столбца излучается <th scope="row"> для ведущей ячейки каждого строки тела. W3C's Учебник WAI на таблицах рекомендует именно этот шаблон для простых таблиц данных.
Подпись - вторая часть. А <caption> элемент, который находится непосредственно внутри таблицы, дает таблице заголовок, который вспомогательная технология считывает и что зрячие пользователи видят над сеткой, Это доступный эквивалент предложения вы бы написали над таблицей в любом случае Генератор добавляет один, когда вы заполните поле подписи, и он выходит из него, как любой другой текст Между заголовком и скопированные заголовки, выход является таблицей, по которой может перемещаться экранное считыватель, а не форма, через которую он спотыкается.
В чем разница между режимами укладки?
Инструмент предлагает три способа создания стиля, поскольку то, куда движется стол, меняет то, что работает.
Режим класса добавляет имена классов в таблицу и выводит соответствующий блок CSS, который вы можете зайти в таблицу стилей. это правильный выбор для веб-сайта: разметка остается чистой, стиль живет в одном месте и такие функции, как полосатость зебры tbody tr:nth-child(even), который работает только из таблицы стилей. встроенный режим вместо этого записывает стили непосредственно на каждый элемент с style атрибуты. это более уродливая разметка, но это то, что вам нужно для электронной почты HTML, куда удаляется большинство клиентов <style> блоки и внешний CSS, поэтому стиль должен ездить вдоль на каждом элементе Ни один режим выводит простой семантический HTML без классов и вообще без стилей, что вы хотите, когда у вас есть ваша собственная система дизайна и просто нужна правильная, доступная структура, чтобы повесить его на.
Я достигаю режима класса по умолчанию, встроенный режим только тогда, когда я вставляю в электронное письмо, и никакого режима, когда я опускаю таблицу на сайт, который уже стилизует свои таблицы глобально. инструмент позволяет переключаться между ними без повторного ввода данных, поэтому попытка всех трех увидеть, что подходит, - это пара кликов.
Как мне использовать генератор?
Поток состоит из четырех шагов. вставьте строки, разделенные запятыми или вкладками, в поле ввода; разделитель обнаруживается автоматически, и вы можете переопределить его, если ваши данные неоднозначны. Решите, является ли первая строка заголовком столбца и является ли первый столбец каждой строки заголовком строки. Добавьте подпись, включите полосатые строки, границы или компактный макет и выберите CSS на основе классов, встроенные стили или простой HTML. Затем нажмите "Создать и скопировать HTML", а также соответствующий CSS в режиме класса.
Анализ следует RFC 4180, неофициальному стандарту для CSV, поэтому поле, завернутое в двойные кавычки, может содержать разделитель, а удвоенная кавычка внутри поля кавычек становится одной кавычкой. Это означает, что ячейка похожа "Doe, Jane" остается одной ячейкой, а не разделяется в запятой. и поскольку все работает в вашем браузере, вы можете вставлять данные, которые включают имена клиентов, внутренние цифры или что-то еще, что вы не хотели бы на сервере, и это никогда не покидает вашу машину. эта модель на стороне клиента такая же, как и за остальным сайтом, описанная в онлайн-инструменты конфиденциальности данных гид.
Как это сочетается с другими инструментами?
Генератор таблиц HTML находится в небольшой группе инструментов, которые берут структурированные данные и обратную разметку. Его ближайшим соседом является Генератор таблицы разметки, который выполняет ту же работу, но выводит GitHub-ароматизированную Markdown для READMEs и проблемы вместо HTML для веб-страниц. Когда ваша сгенерированная таблица 's разметка хочет привести в порядок, или у вас есть куча рукописной таблицы HTML для повторного отступа, Форматировщик HTML украшает его. И когда вы перемещаетесь между документами HTML и Markdown, Конвертер HTML в Markdown обслуживает поездку туда и обратно, включая столы.
Связующая идея заключается в том, что данные живут в одной форме, а вам нужны в другой, и детерминированный инструмент делает перевод лучше, чем человек, редактирующий теги вручную. Если вы создаете для Интернета, Набор инструментов для веб-разработчиков обзор показывает, как они сочетаются друг с другом и Инструменты повышения производительности разработчик руководство охватывает более широкий набор небольших коммунальных услуг, которые экономят несколько минут каждое, много раз в день.
Работающий пример из написания документации
Позвольте мне конкретизировать. много документации вокруг сайта - это набор сравнений функций и справочных таблиц: какой инструмент что делает, какие ограничения применяются где, что означает данный вариант. большая часть этих данных начинает жизнь в электронной таблице, потому что электронная таблица - это то, где ее легко редактировать и сортировать. Получение ее на странице, используемой для обозначения либо экспорта в Markdown, который некоторые из моих страниц не отображают, либо ручной типизации таблицы HTML, что для двадцатирядной ссылки является действительно несчастным десяти минут.
Теперь я копирую столбцы прямо из электронной таблицы, которая помещает разделенные вкладками значения в буфер обмена, вставляю их в генератор и позволяю автоматически определять разделитель вкладок. Я сохраняю первую строку в качестве заголовка, добавляю подпись, описывающую таблицу, включаю полосатые строки и границы в режиме класса и копирую как HTML, так и CSS. Разметка падает на страницу, CSS входит в таблицу стилей один раз и после этого повторно используется каждой таблицей, и все это занимает меньше минуты. Ячейки заголовка выходят как <th scope="col">, таким образом, таблица доступна, и я не думаю об этом, и каждое значение экранировано, поэтому строка, содержащая a < в коде ссылка не взрывает страницу.
Причина, по которой я использую генератор, а не рукописный текст этих таблиц, не в том, что HTML является сложным, это то, что HTML скучен, а скучные части - это то, где я введу ошибки. разгрузка типа тегов, выход и атрибуты доступности к инструменту означает, что таблица правильная на первой вставке, и я трачу свое внимание на содержимое таблицы вместо ее сантехники. для электронной почты я восстанавливаю те же данные в режиме inline, потому что инструмент рассылки новостей полоски <style> блоки, и встроенная версия пережила поездку в целости и сохранности.
О каких пределах стоит знать?
Несколько честных рёбер. первый заключается в том, что этот инструмент строит данные таблицы, вид с заголовками и строками значений. это не инструмент верстки, и он не делает colspan или rowspan, трюки с объединенными ячейками, которые вы иногда видите в сложных таблицах.Объединенные ячейки делают таблицу намного сложнее для читателей экрана, чтобы ориентироваться в любом случае, и для подавляющего большинства табличных данных вы не нуждаетесь в них. если вам действительно нужен объединенный заголовок, охватывающий несколько столбцов, то это ручное редактирование сгенерированной разметки, и Форматировщик HTML после этого будет в порядке.
Второй - генератор читает ваши данные как текст и не пытается быть умным в отношении типов Столбец чисел излучается как текст в каждой ячейке, что совершенно правильно для отображения; он не выравнивает числа по правильному краю и не добавляет тысячи разделителей, потому что это решения по стилю и форматированию, которые принадлежат вам. Что это гарантирует, так это то, что вставленное вами значение является значением в ячейке, вырвавшимся и неизмененным.
Третий - двусмысленность разделителя. автоматическое обнаружение работает путем поиска разделителя, который дает наиболее согласованное количество столбцов в ваших строках, и это надежно для чистого CSV и TSV. Если ваши данные действительно неоднозначны, например значения, которые содержат некотируемые запятые в некоторых строках, обнаружение может угадать неправильно, поэтому разделитель представляет собой ручное переопределение, а не фиксированное решение. Установите это явно, и анализ будет детерминированным.
Наконец, сгенерированный CSS в режиме класса является разумной, нейтральной отправной точкой: светлый фон заголовка, тонкие границы, удобная заполнение. Он предназначен для редактирования. Измените цвета в соответствии с вашим брендом, отрегулируйте заполнение, опустите полоску; это обычный CSS с четкими названиями классов, а работа инструмента и № 39;s - сохранить вам первый черновик, а не диктовать окончательный вид.
Часто задаваемые вопросы
Что такое генератор таблиц HTML? Генератор таблиц HTML преобразует строки данных в разметку HTML, которая отображает их в виде таблицы. Вы вставляете значения CSV или разделенные вкладками, и он записывает полное элемент с , , и ячейки, поэтому вам не нужно вводить каждый тег вручную.
Как конвертировать CSV в таблицу HTML? Вставьте свой CSV в поле ввода, сохраните первую строку в качестве заголовка, если она содержит имена столбцов, выберите стиль, затем нажмите "Генерировать". Инструмент обнаруживает разделитель, строит таблицу и дает вам HTML, который вы можете скопировать прямо на страницу.
Как сделать стол доступным? Используйте ячейки заголовка и подпись. Включите заголовок первого ряда, чтобы заголовки столбцов стали , включить заголовок первого столбца для меток строк, и добавить подпись, описывающую таблицу. затем программы чтения экрана объявляют правильный заголовок для каждой ячейки.В чем разница между режимами укладки? В режиме класса добавляются имена классов и отдельный блок CSS, что лучше всего подходит для веб-сайта. встроенный режим записывает стили непосредственно на каждом элементе, который выживает после вставки в электронное письмо. Ни один режим не выводит простой семантический HTML, чтобы вы могли применить свою собственную таблицу стилей.
Специальные персонажи в моих данных ускользнули? Да. каждое значение ячейки является HTML-эскейпом, поэтому такие символы, как & lt;, & gt;, & amp; и & quot; записываются как сущности и отображаются как текст, а не интерпретируются как разметка. Это удерживает таблицу от разрыва, когда данные содержат угловые скобки или амперсанды.
Может ли он обрабатывать запятые внутри ячейки? Да. синтаксический анализатор следует RFC 4180, поэтому поле, завернутое в двойные кавычки, может содержать разделитель, а удвоенная кавычка внутри поля кавычек становится одной кавычкой. Цитируемые запятые остаются частью ячейки, а не начинают новый столбец.
Мои данные куда-нибудь загружены? Нет. Преобразование происходит полностью в вашем браузере с использованием JavaScript на вашем устройстве. ваши данные никогда не загружаются, не регистрируются и не сохраняются, и инструмент продолжает работать с отключенной сетью после загрузки страницы.
Бесплатен ли генератор таблиц HTML? Да. это совершенно бесплатно без регистрации, водяных знаков и ограничений использования. Создавайте столько HTML-таблиц, сколько вам нужно для личных или коммерческих проектов.
