Генератор на HTML таблица

Как да генерирате HTML таблица

1. Попълнете мрежата. Използвайте Добави ред, Добави колона, Премахни последния ред и Премахни последната колона или бутоните × до всеки ред и колона. Нова празна таблица започва отначало от празна мрежа 3 × 3.
2. За да използвате съществуващи данни, поставете CSV или клетки, копирани от Excel, LibreOffice или Google Sheets, в Внос на CSV или данни от електронна таблица, проверете Разделител и щракнете Внеси. Можете да поставите блок клетки от електронна таблица и направо в коя да е клетка на мрежата.
3. Добавете Заглавие на таблицата и изберете дали Първият ред е заглавен и Първата колона е заглавна.
4. Под Стилове изберете Без стилове, CSS клас или Вградени стилове и настройте Цвят на рамката, Фон на заглавието и Ивичести редове, ако желаете.
5. Проверете Преглед, после щракнете Копирай HTML или изтеглете кода като файл .html.

Достъпна разметка на таблица

Таблицата е достъпна само когато екранните четци могат да разберат кои клетки са заглавия и какво описват. Този инструмент записва структурата, препоръчвана от стандарта HTML и техниките на WCAG:

• <caption> дава име на таблицата. Екранните четци го обявяват при влизане в таблицата и то помага на всеки читател да разбере какво гледа. Дръжте го кратко и описателно.
• <thead> и <tbody> разделят заглавния ред от редовете с данни. Браузърите могат да повторят <thead> на всяка отпечатана страница.
• <th scope="col"> отбелязва всяко заглавие на колона, а при Първата колона е заглавна <th scope="row"> отбелязва първата клетка на всеки ред. Когато потребител на екранен четец премине към клетка с данни, четецът може да прочете съответните заглавия, например „Про, Цена, 12 €“.

Използвайте таблици само за табличните данни, никога за оформление на страницата. Избягвайте слети клетки, когато можете: простите мрежи с един заглавен ред и при нужда една заглавна колона са най-лесни за четене с помощни технологии.

Опции за стил

• Без стилове записва чиста разметка, която наследява стиловете на таблиците на вашия сайт. Това е най-добрият избор за CMS или сайт с дизайн система.
• CSS клас добавя class="…" към <table> и показва съответен блок CSS, който да поставите в стила си. Име на класа се почиства до букви, цифри, тирета и долни черти, така че винаги е валиден селектор.
• Вградени стилове поставя атрибути style на всеки елемент. Многословно е, но е това, което трябва на HTML имейлите, тъй като много имейл клиенти игнорират блоковете <style>. Бутонът Изтегли добавя CSS в елемент <style>, когато използвате клас.

В CSS се записват само истински шестнадесетични цветове от избирателите на цвят, така че нищо неочаквано не може да попадне в стиловете ви.

Ескейпване и безопасност

Всяка клетка се ескейпва: <, > и & стават <, > и &, така че текст като <b> или a < b се появява точно както е въведен, а не се тълкува като разметка. Новите редове във внесените клетки стават <br>. Прегледът се изгражда само от тази ескейпната разметка и минава през почистваща програма, която пази само елементите на таблицата, така че поставен скрипт никога не може да се изпълни.