Torna a l'inici Desenvolupador Generador de taules HTML

Generador de taules HTML

Converteix CSV/TSV a taules HTML

Com usar Generador de taules HTML

Converteix CSV/TSV a taules HTML Eina gratuïta en línia, sense registre, sense anuncis intrusius. Utilitza-la ara.

Quan necessiteu un generador de taules HTML?

Les taules HTML mostren dades tabulars — files i columnes amb capçaleres. Escriure manualment el codi HTML d'una taula és verbós i propens a errors, especialment per a taules amb moltes columnes. Un generador converteix dades estructurades en marcat de taula vàlid i formatat instantàniament.

Accessibilitat de les taules HTML: Les taules HTML ben formades inclouen capçaleres <th> amb atributs scope, un element <caption> descriptiu i utilitzen les seccions <thead>/<tbody>/<tfoot>. Els lectors de pantalla depenen d'aquesta estructura per comunicar les dades tabulars de manera significativa als usuaris amb discapacitat visual.

Frequently Asked Questions

Quan he de fer servir una taula en lloc de CSS Grid/Flexbox?

Feu servir taules per a les dades genuïnament tabulars — dades amb files i columnes significatives, on el significat de cada cel·la depèn de les seves capçaleres de fila i columna. Feu servir CSS Grid i Flexbox per a la maquetació — fins i tot si el resultat visual sembla una graella, els layouts no tabulars no haurien de fer servir elements <table> per raons semàntiques i d'accessibilitat.

Quina diferència hi ha entre <th> i <td>?

<th> és una cel·la de capçalera de taula — en negreta i centrada per defecte, i marca semànticament la cel·la com a capçalera de la seva fila o columna. Els lectors de pantalla fan servir <th> per anunciar el context de columna o fila. <td> és una cel·la de dades sense significat semàntic especial. Feu servir sempre <th> per a les capçaleres de columnes i files.

Com faig que una taula sigui responsive en mòbil?

Les taules HTML pures no responen als pantalles estretes — desborden o comprimeixen el contingut. Solucions habituals: afegiu overflow-x:auto a un div contenidor per activar el desplaçament horitzontal. O feu servir CSS per apilar les cel·les verticalment en mòbil, amb atributs data-label per mostrar les capçaleres de columna al costat de cada valor.

Qué és la propietat CSS border-collapse?

Per defecte, les cel·les de taula adjacents tenen vores separades, creant línies dobles entre les cel·les. border-collapse:collapse fusiona les vores adjacents en una sola línia — l'aparença estàndard per a la majoria de taules de dades. border-collapse:separate manté les vores separades i permet border-spacing entre les cel·les.

Puc generar taules amb cel·les fusionades (colspan/rowspan)?

Aquest generador crea taules regulars a partir de dades CSV — totes les cel·les tenen la mateixa mida. Per a les taules amb cel·les fusionades (colspan, rowspan), cal l'edició manual de l'HTML. Feu servir aquesta eina per a la taula base i afegiu els atributs de fusió en un editor de codi.

Taula HTML vs taula Markdown vs full de càlcul

Una taula HTML ofereix control total de l'estil i la renderitzen els navegadors i la majoria de clients de correu. Una taula Markdown (separada per barres verticals) la renderitzen GitHub, GitLab i la majoria de plataformes de documentació — més senzilla d'escriure, però amb estil limitat. Un full de càlcul (Excel, Google Sheets, LibreOffice) és millor per a l'anàlisi de dades amb fórmules, ordenació i filtratge interactiu. Trieu HTML per a la integració web, Markdown per a la documentació tècnica i els fulls de càlcul per a l'anàlisi de dades.

☕ Buy me a coffee