Utilia
Kategorijos ▾
Kalba: lt ▾

HTML lentelės generatorius

Sukurk HTML lentelės kodą iš redaguojamo tinklelio ar įklijuoto CSV su antrašte, th scope, CSS klase ar įterptais stiliais ir gyva peržiūra.

Paspausk Enter, kad nueitum eilute žemyn. Įklijuok iš skaičiuoklės nukopijuotus langelius į bet kurį langelį, kad tinklelis būtų užpildytas nuo jo.

Stilius

Peržiūra

Importuoti CSV ar skaičiuoklės duomenis

Kaip sukurti HTML lentelę

  1. Užpildyk tinklelį. Naudok Pridėti eilutę, Pridėti stulpelį, Šalinti paskutinę eilutę ir Šalinti paskutinį stulpelį arba mygtukus × šalia kiekvienos eilutės ir stulpelio. Nauja tuščia lentelė pradeda iš naujo nuo tuščio 3 × 3 tinklelio.
  2. Norint pakartotinai panaudoti turimus duomenis, įklijuok CSV arba iš Excel, LibreOffice ar Google Sheets nukopijuotus langelius į Importuoti CSV ar skaičiuoklės duomenis, patikrink Skirtukas ir spustelėk Importuoti. Skaičiuoklės langelių bloką taip pat gali įklijuoti tiesiai į bet kurį tinklelio langelį.
  3. Pridėk Lentelės pavadinimas ir pasirink, ar Pirma eilutė yra antraštės eilutė ir Pirmas stulpelis yra antraštės stulpelis.
  4. Skiltyje Stilius pasirink Be stilių, CSS klasė arba Įterpti stiliai ir, jei nori, pakoreguok Rėmelio spalva, Antraštės fonas bei Dryžuotos eilutės.
  5. Peržiūrėk Peržiūra, tada spustelėk Kopijuoti HTML arba atsisiųsk kodą kaip .html failą.

Prieinamas lentelės žymėjimas

Lentelė yra prieinama tik tada, kai ekrano skaitytuvai gali atskirti, kurie langeliai yra antraštės ir ką jie apibūdina. Šis įrankis rašo struktūrą, kurią rekomenduoja HTML standartas ir WCAG metodai:

  • <caption> suteikia lentelei pavadinimą. Ekrano skaitytuvai jį paskelbia įėję į lentelę, ir jis padeda kiekvienam skaitytojui suprasti, į ką žiūri. Rašyk trumpai ir aprašomai.
  • <thead> ir <tbody> atskiria antraštės eilutę nuo duomenų eilučių. Naršyklės gali kartoti <thead> kiekviename spausdintame puslapyje.
  • <th scope="col"> pažymi kiekvieną stulpelio antraštę, o su Pirmas stulpelis yra antraštės stulpelis <th scope="row"> pažymi pirmą kiekvienos eilutės langelį. Kai ekrano skaitytuvo naudotojas pereina prie duomenų langelio, jis gali garsiai perskaityti atitinkamas antraštes, pavyzdžiui, „Pro, Kaina, 12 €“.

Lenteles naudok tik lentelių duomenims, niekada puslapio maketavimui. Kai gali, venk sujungtų langelių: paprastus tinklelius su viena antraštės eilute ir, jei reikia, vienu antraštės stulpeliu lengviausia skaityti pagalbinėmis technologijomis.

Stiliaus parinktys

  • Be stilių rašo paprastą žymėjimą, kuris paveldi tavo svetainės lentelių stilius. Tai geriausias pasirinkimas TVS ar svetainei su dizaino sistema.
  • CSS klasė prideda class="…" prie <table> ir parodo atitinkamą CSS bloką, kurį reikia įklijuoti į stilių lapą. Klasės pavadinimas išvalomas iki raidžių, skaitmenų, brūkšnelių ir pabraukimų, todėl visada yra tinkamas selektorius.
  • Įterpti stiliai deda style atributus ant kiekvieno elemento. Tai daug žodžių reikalaujantis būdas, bet jo reikia HTML el. laiškams, nes daugelis el. pašto klientų ignoruoja <style> blokus. Mygtukas Atsisiųsti prideda CSS į <style> elementą, kai naudoji klasę.

Į CSS įrašomos tik tikros šešioliktainės spalvos iš spalvų parinkiklių, todėl į tavo stilius negali patekti nieko netikėto.

Simbolių apsauga ir saugumas

Kiekvienas langelis apsaugomas: <, > ir & tampa &lt;, &gt; ir &amp;, todėl tekstas, pavyzdžiui, <b> ar a < b, rodomas tiksliai taip, kaip įvestas, o ne interpretuojamas kaip žymėjimas. Eilučių lūžiai importuotuose langeliuose tampa <br>. Peržiūra kuriama tik iš šio apsaugoto žymėjimo ir praeina per valymo įrankį, paliekantį vien lentelės elementus, todėl įklijuotas scenarijus niekada negali būti vykdomas.

Dažnai užduodami klausimai

Ar galiu įdėti nuorodų ar paryškinto teksto į langelį?

Iš tinklelio ne: langelio turinys visada apsaugomas, todėl kodas išlieka tinkamas ir saugus. Jei reikia, nuorodas ar formatavimą pridėk prie sugeneruoto kodo vėliau.

Kodėl naudoti `<caption>`, o ne pavadinimą virš lentelės?

<caption> prieinamumo medyje susieta su lentele, todėl ekrano skaitytuvai ją paskelbia kartu su lentele. Pavadinimas virš lentelės su ja nesusietas.

Ar įrankis palaiko sujungtus langelius (colspan ir rowspan)?

Ne. Tinklelis kuria vieną langelį kiekvienai pozicijai. Sujungti langeliai apsunkina lentelių skaitymą pagalbinėmis technologijomis, todėl palik juos atvejams, kai jų tikrai reikia, ir pridėk rankomis.

Ar mano duomenys įkeliami?

Ne. Tinklelis, importas, kodas ir peržiūra kuriami tavo naršyklėje. Nieko, ką įklijuoji, nesiunčiame į serverį.

Kokio dydžio gali būti lentelė?

Tinklelis talpina iki 500 eilučių ir 30 stulpelių. Didesniems duomenų rinkiniams rūšiuojamas duomenų tinklelis ar atsisiunčiamas CSV failas paprastai naudingesnis nei statinė HTML lentelė.

Susiję įrankiai