Ġeneratur tat-tabelli HTML

Kif tiġġenera tabella HTML

1. Imla l-grilja. Uża Żid ringiela, Żid kolonna, Neħħi l-aħħar ringiela u Neħħi l-aħħar kolonna, jew il-buttuni × ħdejn kull ringiela u kolonna. Tabella ġdida vojta tibda mill-ġdid minn grilja vojta ta’ 3 × 3.
2. Biex terġa’ tuża data eżistenti, waħħal CSV jew ċelloli kkupjati minn Excel, LibreOffice jew Google Sheets f’Importa data CSV jew ta’ spreadsheet, iċċekkja s-Separatur u ikklikkja Importa. Tista’ wkoll twaħħal blokk ta’ ċelloli ta’ spreadsheet direttament f’kwalunkwe ċellola tal-grilja.
3. Żid Intestatura (caption) u agħżel jekk L-ewwel ringiela hija ringiela tal-intestatura u L-ewwel kolonna hija kolonna tal-intestatura.
4. Taħt Stil, agħżel Bla stili, Klassi CSS jew Stili inline, u aġġusta l-Kulur tal-bordura, l-Sfond tal-intestatura u Ringieli bi strixxi jekk trid.
5. Iċċekkja l-Previżjoni, imbagħad ikklikkja Ikkopja HTML jew niżżel il-kodiċi bħala fajl .html.

Markup aċċessibbli tat-tabella

Tabella hija aċċessibbli biss meta qarrejja tal-iskrin ikunu jistgħu jgħidu liema ċelloli huma intestaturi u x’jiddeskrivu. Din l-għodda tikteb l-istruttura li jirrakkomandaw l-istandard HTML u t-tekniki WCAG:

• <caption> jagħti isem lit-tabella. Il-qarrejja tal-iskrin jħabbruha meta jidħlu fit-tabella, u jgħin lil kull qarrej jifhem x’qed iħares lejh. Żommha qasira u deskrittiva.
• <thead> u <tbody> jifirdu r-ringiela tal-intestatura mir-ringieli tad-data. Il-brawżers jistgħu jirrepetu <thead> fuq kull paġna stampata.
• <th scope="col"> jimmarka kull intestatura ta’ kolonna, u b’L-ewwel kolonna hija kolonna tal-intestatura, <th scope="row"> jimmarka l-ewwel ċellola ta’ kull ringiela. Meta utent ta’ qarrej tal-iskrin jaqbeż għal ċellola tad-data, jista’ jaqra l-intestaturi korrispondenti b’vuċi għolja, bħal “Pro, Prezz, €12”.

Uża t-tabelli għal data tabulari biss, qatt għal tfassil tal-paġna. Evita ċelloli magħquda meta tista’: grilji sempliċi b’ringiela waħda tal-intestatura u, jekk meħtieġ, kolonna waħda tal-intestatura huma l-aktar faċli biex jinqraw bit-teknoloġija assistiva.

Għażliet tal-istil

• Bla stili jikteb markup sempliċi li jirtu l-istili tat-tabelli tas-sit tiegħek. Hija l-aħjar għażla għal CMS jew sit b’sistema tad-disinn.
• Klassi CSS iżid class="…" mat-<table> u juri blokk CSS korrispondenti biex twaħħal fl-istylesheet tiegħek. L-Isem tal-klassi jiġi mnaddaf għal ittri, ċifri, trattini u underscores biex dejjem ikun selettur validu.
• Stili inline iqiegħed attributi style fuq kull element. Huwa twil, imma huwa dak li l-emails HTML jeħtieġu, għax ħafna klijenti tal-email jinjoraw il-blokki <style>. Il-buttuna Niżżel iżżid is-CSS f’element <style> meta tuża klassi.

Biss kuluri eżadeċimali veri mill-għażla tal-kuluri jinkitbu fis-CSS, biex xejn mhux mistenni ma jista’ jispiċċa fl-istili tiegħek.

Escape u sigurtà

Kull ċellola tgħaddi minn escape: <, > u & isiru <, > u &, għalhekk test bħal <b> jew a < b jidher eżattament kif inkiteb minflok ma jiġi interpretat bħala markup. It-tmiem tal-linji ġewwa ċelloli importati jsiru <br>. Il-previżjoni tinbena biss minn dan il-markup bl-escape u tgħaddi minn sanitizer li jżomm l-elementi tat-tabella biss, għalhekk script imwaħħal ma jista’ qatt jaħdem.