HTML táblázat generátor

Hogyan generálj HTML táblázatot

1. Töltsd ki a rácsot. Használd a Sor hozzáadása, Oszlop hozzáadása, Utolsó sor eltávolítása és Utolsó oszlop eltávolítása gombokat, vagy az egyes sorok és oszlopok melletti × gombokat. Az Új üres táblázat egy üres 3 × 3-as rácsról indul újra.
2. Meglévő adatok újrafelhasználásához illessz be CSV-t vagy Excelből, LibreOffice-ból vagy Google Táblázatokból másolt cellákat a CSV vagy táblázatkezelő adatainak importálása részbe, ellenőrizd az Elválasztó beállítását, és kattints az Importálás gombra. Egy táblázatkezelő-cellablokkot közvetlenül bármelyik rácscellába is beilleszthetsz.
3. Adj meg Felirat értéket, és válaszd ki, hogy Az első sor fejlécsor és Az első oszlop fejlécoszlop legyen-e.
4. A Stílus alatt válassz Nincs stílus, CSS-osztály vagy Soron belüli stílusok közül, és ha szeretnéd, állítsd be a Szegély színe, a Fejléc háttere és a Csíkozott sorok opciót.
5. Nézd meg az Előnézetet, majd kattints a HTML másolása gombra, vagy töltsd le a kódot .html fájlként.

Akadálymentes táblázat-jelölés

A táblázat csak akkor akadálymentes, ha a képernyőolvasók meg tudják mondani, mely cellák fejlécek, és mit írnak le. Ez az eszköz azt a szerkezetet írja, amelyet a HTML-szabvány és a WCAG-technikák javasolnak:

• A <caption> nevet ad a táblázatnak. A képernyőolvasók bejelentik, amikor a táblázatba lépnek, és minden olvasónak segít megérteni, mit lát. Tartsd rövidnek és leíró jellegűnek.
• A <thead> és a <tbody> elválasztja a fejlécsort az adatsoroktól. A böngészők minden nyomtatott oldalon megismételhetik a <thead> részt.
• A <th scope="col"> megjelöli az egyes oszlopfejléceket, az Az első oszlop fejlécoszlop opcióval pedig a <th scope="row"> az egyes sorok első celláját. Amikor a képernyőolvasót használó felhasználó egy adatcellára lép, az felolvashatja a hozzá tartozó fejléceket, például „Pro, Ár, 12 €”.

A táblázatokat csak táblázatos adatokhoz használd, soha ne oldalelrendezéshez. Kerüld az összevont cellákat, ha lehet: az egy fejlécsoros és szükség esetén egy fejlécoszlopos egyszerű rácsok olvashatók a legkönnyebben a segítő technológiákkal.

Stílusbeállítások

• A Nincs stílus sima jelölést ír, amely örökli az oldalad táblázatstílusait. Ez a legjobb választás CMS-hez vagy tervezési rendszerrel rendelkező oldalhoz.
• A CSS-osztály egy class="…" attribútumot ad a <table> elemhez, és megjelenít egy hozzá illő CSS-blokkot, amelyet beilleszthetsz a stíluslapodba. Az Osztálynév betűkre, számjegyekre, kötőjelekre és aláhúzásokra tisztul, így mindig érvényes szelektor.
• A Soron belüli stílusok minden elemre style attribútumokat tesz. Bőbeszédű, de ezt kívánják a HTML-e-mailek, mert sok e-mail-kliens figyelmen kívül hagyja a <style> blokkokat. A Letöltés gomb a CSS-t <style> elembe teszi, ha osztályt használsz.

A CSS-be csak a színválasztókból származó valódi hexadecimális színek kerülnek, így semmi váratlan nem kerülhet a stílusaidba.

Escape-elés és biztonság

Minden cella escape-elve van: a <, a > és az & <, > és & lesz, így az olyan szöveg, mint a <b> vagy az a < b, pontosan úgy jelenik meg, ahogy beírtad, ahelyett hogy jelölésként értelmeződne. Az importált cellákban lévő sortörések <br> elemekké válnak. Az előnézet kizárólag ebből az escape-elt jelölésből épül, és egy olyan tisztítón megy át, amely csak a táblázatelemeket tartja meg, így egy beillesztett szkript soha nem futhat le.