HTML Table Generator

Paano gumawa ng HTML table

1. Punan ang grid. Gamitin ang Magdagdag ng hilera, Magdagdag ng column, Alisin ang huling hilera at Alisin ang huling column, o ang mga × na button sa tabi ng bawat hilera at column. Ang Bagong walang laman na table ay nagsisimula ulit sa blangkong 3 × 3 na grid.
2. Para gamitin muli ang umiiral na data, i-paste ang CSV o mga cell na kinopya mula sa Excel, LibreOffice o Google Sheets sa Mag-import ng CSV o data ng spreadsheet, tingnan ang Delimiter at i-click ang I-import. Maaari ka ring mag-paste ng bloke ng mga cell ng spreadsheet diretso sa anumang cell ng grid.
3. Magdagdag ng Caption at piliin kung Header row ang unang hilera at Header column ang unang column.
4. Sa ilalim ng Styling, piliin ang Walang style, CSS class o Inline style, at ayusin ang Kulay ng border, Background ng header at May guhit-guhit na mga hilera kung gusto mo.
5. Tingnan ang Preview, saka i-click ang Kopyahin ang HTML o i-download ang code bilang .html file.

Accessible na table markup

Accessible lang ang table kapag nasasabi ng mga screen reader kung aling mga cell ang header at kung ano ang inilalarawan ng mga ito. Isinusulat ng tool na ito ang istrukturang inirerekomenda ng HTML standard at ng mga WCAG technique:

• Ang <caption> ay nagbibigay ng pangalan sa table. Ipinapahayag ito ng mga screen reader pagpasok sa table, at tinutulungan nito ang bawat mambabasa na maintindihan kung ano ang tinitingnan nila. Panatilihin itong maikli at naglalarawan.
• Pinaghihiwalay ng <thead> at <tbody> ang header row sa mga hilera ng data. Maaaring ulitin ng mga browser ang <thead> sa bawat naka-print na pahina.
• Minamarkahan ng <th scope="col"> ang bawat header ng column, at kapag naka-check ang Header column ang unang column, minamarkahan ng <th scope="row"> ang unang cell ng bawat hilera. Kapag lumipat sa data cell ang user ng screen reader, mababasa nito nang malakas ang katugmang mga header, gaya ng “Pro, Presyo, ₱12”.

Gumamit ng mga table para sa tabular na data lamang, hindi kailanman para sa layout ng page. Iwasan ang mga pinagsamang cell hangga’t maaari: ang mga simpleng grid na may isang header row at, kung kailangan, isang header column ang pinakamadaling basahin gamit ang assistive technology.

Mga opsyon sa styling

• Ang Walang style ay nagsusulat ng payak na markup na namamana ang mga table style ng iyong site. Ito ang pinakamainam para sa CMS o site na may design system.
• Ang CSS class ay nagdaragdag ng class="…" sa <table> at nagpapakita ng katugmang bloke ng CSS na ipe-paste sa iyong stylesheet. Nililinis ang Pangalan ng class hanggang sa mga letra, digit, gitling at underscore para laging valid na selector.
• Ang Inline style ay naglalagay ng mga attribute na style sa bawat elemento. Mahaba ito, pero ito ang kailangan ng mga HTML email, dahil binabalewala ng maraming email client ang mga bloke ng <style>. Idinaragdag ng button na I-download ang CSS sa elementong <style> kapag gumamit ka ng class.

Mga totoong hexadecimal na kulay lang mula sa mga color picker ang isinusulat sa CSS, kaya walang hindi inaasahang makakapasok sa iyong mga style.

Pag-escape at kaligtasan

Ine-escape ang bawat cell: ang <, > at & ay nagiging <, > at &, kaya ang text gaya ng <b> o a < b ay lumilitaw nang eksakto kung paano na-type sa halip na bigyang-kahulugan bilang markup. Ang mga line break sa loob ng mga na-import na cell ay nagiging <br>. Ang preview ay binubuo lang mula sa na-escape na markup na ito at dumadaan sa sanitizer na table element lang ang pinananatili, kaya hindi kailanman tatakbo ang na-paste na script.