Generator de tabele HTML

Cum generezi un tabel HTML

1. Completează grila. Folosește Adaugă rând, Adaugă coloană, Șterge ultimul rând și Șterge ultima coloană, sau butoanele × de lângă fiecare rând și coloană. Tabel nou, gol reia de la o grilă goală de 3 × 3.
2. Pentru a refolosi date existente, lipește CSV sau celule copiate din Excel, LibreOffice ori Google Sheets în Importă date CSV sau dintr-o foaie de calcul, verifică Delimitator și apasă Importă. Poți lipi un bloc de celule dintr-o foaie de calcul direct în orice celulă a grilei.
3. Adaugă un Titlu tabel și alege dacă Primul rând este rând de antet și dacă Prima coloană este coloană de antet.
4. La Stilizare, alege Fără stiluri, Clasă CSS sau Stiluri inline și ajustează Culoarea bordurii, Fundalul antetului și Rânduri alternante, dacă vrei.
5. Verifică Previzualizare, apoi apasă Copiază HTML sau descarcă codul ca fișier .html.

Marcaj accesibil pentru tabele

Un tabel este accesibil doar când cititoarele de ecran pot spune care celule sunt antete și ce descriu ele. Instrumentul scrie structura recomandată de standardul HTML și de tehnicile WCAG:

• <caption> dă tabelului un nume. Cititoarele de ecran îl anunță la intrarea în tabel și îi ajută pe toți cititorii să înțeleagă la ce se uită. Păstrează-l scurt și descriptiv.
• <thead> și <tbody> separă rândul de antet de rândurile de date. Browserele pot repeta <thead> pe fiecare pagină tipărită.
• <th scope="col"> marchează fiecare antet de coloană, iar cu Prima coloană este coloană de antet, <th scope="row"> marchează prima celulă din fiecare rând. Când un utilizator de cititor de ecran ajunge la o celulă de date, aceasta poate citi cu voce tare antetele corespunzătoare, de exemplu „Pro, Preț, 12”.

Folosește tabelele doar pentru date tabulare, niciodată pentru aranjarea paginii. Evită celulele îmbinate când poți: grilele simple, cu un rând de antet și, la nevoie, o coloană de antet, sunt cele mai ușor de citit cu tehnologii asistive.

Opțiuni de stilizare

• Fără stiluri scrie un marcaj simplu, care moștenește stilurile de tabel ale site-ului tău. Este cea mai bună alegere pentru un CMS sau pentru un site cu sistem de design.
• Clasă CSS adaugă class="…" la <table> și afișează un bloc CSS corespunzător, de lipit în foaia ta de stil. Numele clasei este curățat la litere, cifre, cratime și liniuțe de subliniere, ca să fie mereu un selector valid.
• Stiluri inline pune atribute style pe fiecare element. Este mai voluminos, dar de asta au nevoie e-mailurile HTML, deoarece multe clienți de e-mail ignoră blocurile <style>. Butonul Descarcă adaugă CSS-ul într-un element <style> când folosești o clasă.

În CSS sunt scrise doar culori hexazecimale reale, din selectoarele de culoare, așa că nimic neașteptat nu poate ajunge în stilurile tale.

Escapare și siguranță

Fiecare celulă este escapată: <, > și & devin <, > și &, așa că un text precum <b> sau a < b apare exact cum a fost scris, în loc să fie interpretat ca marcaj. Rândurile noi din celulele importate devin <br>. Previzualizarea este construită doar din acest marcaj escapat și trece printr-un sanitizator care păstrează numai elementele de tabel, deci un script lipit nu poate rula niciodată.