HTML tabulas ģenerators

Kā izveidot HTML tabulu

1. Aizpildiet režģi. Izmantojiet Pievienot rindu, Pievienot kolonnu, Noņemt pēdējo rindu un Noņemt pēdējo kolonnu vai pogas × blakus katrai rindai un kolonnai. Jauna tukša tabula sāk no jauna ar tukšu 3 × 3 režģi.
2. Lai izmantotu esošus datus, ielīmējiet CSV vai šūnas, kas nokopētas no Excel, LibreOffice vai Google Sheets, laukā Importēt CSV vai izklājlapas datus, pārbaudiet Atdalītājs un noklikšķiniet uz Importēt. Varat arī ielīmēt izklājlapas šūnu bloku tieši jebkurā režģa šūnā.
3. Pievienojiet Parakstvirsraksts un izvēlieties, vai Pirmā rinda ir galvenes rinda un Pirmā kolonna ir galvenes kolonna.
4. Sadaļā Stils izvēlieties Bez stiliem, CSS klase vai Iekļauti stili un, ja vēlaties, pielāgojiet Apmales krāsa, Galvenes fons un Svītrotas rindas.
5. Pārbaudiet Priekšskatījums un tad noklikšķiniet uz Kopēt HTML vai lejupielādējiet kodu kā .html failu.

Pieejams tabulas marķējums

Tabula ir pieejama tikai tad, ja ekrāna lasītāji var noteikt, kuras šūnas ir galvenes un ko tās apraksta. Šis rīks raksta struktūru, ko iesaka HTML standarts un WCAG metodes:

• <caption> dod tabulai nosaukumu. Ekrāna lasītāji to paziņo, ieejot tabulā, un tas palīdz katram lasītājam saprast, ko viņš skata. Turiet to īsu un aprakstošu.
• <thead> un <tbody> nošķir galvenes rindu no datu rindām. Pārlūkprogrammas var atkārtot <thead> katrā izdrukātajā lapā.
• <th scope="col"> atzīmē katru kolonnas galveni, un ar Pirmā kolonna ir galvenes kolonna <th scope="row"> atzīmē katras rindas pirmo šūnu. Kad ekrāna lasītāja lietotājs pāriet uz datu šūnu, tas var nolasīt atbilstošās galvenes, piemēram, „Pro, Cena, 12 €“.

Izmantojiet tabulas tikai tabulāriem datiem, nekad lapas izkārtojumam. Ja iespējams, izvairieties no apvienotām šūnām: vienkāršus režģus ar vienu galvenes rindu un, ja vajag, vienu galvenes kolonnu palīgtehnoloģijām ir vieglāk lasīt.

Stila opcijas

• Bez stiliem raksta vienkāršu marķējumu, kas manto jūsu vietnes tabulu stilus. Tā ir labākā izvēle CMS vai vietnei ar dizaina sistēmu.
• CSS klase pievieno class="…" elementam <table> un parāda atbilstošu CSS bloku, ko ielīmēt savā stilu lapā. Klases nosaukums tiek notīrīts līdz burtiem, cipariem, defisēm un pasvītrojumiem, tāpēc tas vienmēr ir derīgs selektors.
• Iekļauti stili liek style atribūtus uz katra elementa. Tas ir plaši, taču tieši to vajag HTML e-pastiem, jo daudzi e-pasta klienti ignorē <style> blokus. Poga Lejupielādēt pievieno CSS elementā <style>, kad izmantojat klasi.

CSS tiek ierakstītas tikai īstas heksadecimālās krāsas no krāsu izvēlnēm, tāpēc jūsu stilos nevar nonākt nekas negaidīts.

Pārveidošana un drošība

Katra šūna tiek pārveidota: <, > un & kļūst par <, > un &, tāpēc teksts, piemēram, <b> vai a < b, parādās tieši tā, kā ierakstīts, nevis tiek interpretēts kā marķējums. Rindu pārnesumi importētajās šūnās kļūst par <br>. Priekšskatījums tiek veidots tikai no šī pārveidotā marķējuma un iet cauri sanitizatoram, kas atstāj tikai tabulas elementus, tāpēc ielīmēts skripts nekad nevar tikt izpildīts.