Generador de taules HTML

Com generar una taula HTML

1. Omple la quadrícula. Fes servir Afegeix una fila, Afegeix una columna, Elimina l’última fila i Elimina l’última columna, o els botons × que hi ha al costat de cada fila i columna. Nova taula buida torna a començar des d’una quadrícula en blanc de 3 × 3.
2. Per reutilitzar dades existents, enganxa CSV o cel·les copiades d’Excel, LibreOffice o Fulls de càlcul de Google a Importa dades CSV o d’un full de càlcul, comprova el Delimitador i fes clic a Importa. També pots enganxar un bloc de cel·les d’un full de càlcul directament en qualsevol cel·la de la quadrícula.
3. Afegeix un Títol de la taula i tria si La primera fila és una fila de capçalera i La primera columna és una columna de capçalera.
4. A Estil, tria Sense estils, Classe CSS o Estils en línia, i ajusta el Color de la vora, el Fons de la capçalera i les Files ratllades si vols.
5. Revisa la Previsualització i després fes clic a Copia l’HTML o baixa el codi com a fitxer .html.

Marcatge de taula accessible

Una taula només és accessible quan els lectors de pantalla poden saber quines cel·les són capçaleres i què descriuen. Aquesta eina escriu l’estructura que recomanen l’estàndard HTML i les tècniques WCAG:

• <caption> dona un nom a la taula. Els lectors de pantalla l’anuncien en entrar a la taula, i ajuda tots els lectors a entendre què estan mirant. Fes-lo curt i descriptiu.
• <thead> i <tbody> separen la fila de capçalera de les files de dades. Els navegadors poden repetir el <thead> a cada pàgina impresa.
• <th scope="col"> marca cada capçalera de columna i, amb La primera columna és una columna de capçalera, <th scope="row"> marca la primera cel·la de cada fila. Quan una persona que fa servir un lector de pantalla passa a una cel·la de dades, aquest pot llegir en veu alta les capçaleres corresponents, com ara «Pro, Preu, 12 €».

Fes servir les taules només per a dades tabulars, mai per a la maquetació de la pàgina. Evita les cel·les combinades sempre que puguis: les quadrícules simples amb una fila de capçalera i, si cal, una columna de capçalera són les més fàcils de llegir amb tecnologies de suport.

Opcions d’estil

• Sense estils escriu marcatge net que hereta els estils de taula del teu lloc. És la millor opció per a un CMS o un lloc amb un sistema de disseny.
• Classe CSS afegeix class="…" al <table> i mostra un bloc de CSS corresponent per enganxar al teu full d’estils. El Nom de la classe es neteja a lletres, dígits, guions i guions baixos perquè sempre sigui un selector vàlid.
• Estils en línia posa atributs style a cada element. És verbós, però és el que necessiten els correus HTML, ja que molts clients de correu ignoren els blocs <style>. El botó Baixa afegeix el CSS en un element <style> quan fas servir una classe.

Al CSS només s’hi escriuen colors hexadecimals reals dels selectors de color, de manera que res d’inesperat no pot acabar als teus estils.

Escapament i seguretat

Cada cel·la s’escapa: <, > i & es converteixen en <, > i &, de manera que un text com <b> o a < b apareix exactament tal com s’ha escrit en lloc d’interpretar-se com a marcatge. Els salts de línia dins de les cel·les importades es converteixen en <br>. La previsualització es construeix només a partir d’aquest marcatge escapat i passa per un sanejador que només conserva els elements de taula, de manera que un script enganxat no es pot executar mai.