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>. Прегледот се гради само од овие ескејпирани ознаки и поминува низ санитајзер што задржува само елементи на табела, па залепена скрипта никогаш не може да се изврши.