Strumenti per costruire per Toolz.dev significa che scrivo molte tabelle HTML, nella documentazione, nelle e-mail agli utenti, occasionalmente nella pagina di destinazione semplice. E una tabella è l'unico bit di HTML che nessuno si diverte a scrivere a mano. Dieci righe e cinque colonne superano i cinquanta tag di cella, che devono tutti aprirsi e chiudersi nel giusto ordine e uno mancante </td> rompe silenziosamente l'intero layout Avevo una pila di dati in un foglio di calcolo e volevo il markup, quindi ho costruito un generatore nel sito Questa è la guida ad esso.
tl; dr: Il Toolz Generatore di tabelle HTML prende dati separati da virgole o schede e scrive un file completo e accessibile
<table>di<thead>,<tbody>, e celle di intestazione adeguate La prima riga può diventare<th scope="col">e la prima colonna<th scope="row">quindi gli screen reader annunciano le intestazioni giuste Aggiungi una didascalia, righe a righe e bordi e scegli CSS basato su classi, stili in linea per la posta elettronica o HTML semantico semplice Ogni cella è stata eseguita interamente lato client: nessun caricamento, nessuna registrazione, funziona offline.
Che cosa è un generatore di tabelle HTML?
Un generatore di tabelle HTML trasforma le righe di dati nel markup HTML che le esegue come tabella in un browser Incolli valori separati da virgole o da schede, scegli come dovrebbe apparire la tabella e lo strumento ne scrive una completa <table> elemento con <thead>, <tbody>, e le righe e le celle al loro interno Invece di digitare a mano ogni <tr>, <th>, e <td> e contando le celle per mantenere le colonne allineate, incolli i dati una volta e copi il markup di backup pronto per essere inserito in una pagina, un modello di posta elettronica o un file Markdown che consente HTML non elaborato.
Il motivo per cui un generatore guadagna il suo posto è che l'HTML della tabella è prolisso e ripetitivo, e la ripetizione è dove si nascondono gli errori Ogni cella ha bisogno di un tag di apertura e di chiusura, le celle di intestazione differiscono dalle celle di dati e il tutto deve rimanere rettangolare o il browser rende un pasticcio cencioso Fare che a mano per qualsiasi cosa oltre una tabella minuscola è lento e incline agli errori Lo strumento lo fa in modo deterministico: gli dai i valori, produce un markup valido, evaso e correttamente annidato.
C'è un livello di accessibilità sopra il markup grezzo che spesso salta una tabella scritta a mano, ed è la parte che mi interessa di più Una tabella costruita correttamente utilizza <th> per celle di intestazione con a scope attributo in modo che la tecnologia assistiva possa annunciare a quale intestazione appartiene una determinata cella dati e possa trasportare a <caption> descrivendo cosa contiene la tabella La sezione WHATWG HTML Living Standard's sui dati tabulari spiega questi elementi e il generatore li applica per te invece di lasciarti a <div> griglia che sembra un tavolo ma si legge come rumore per uno screen reader.
Perché non scrivere semplicemente la tabella a mano?
Per una tabella due per due, scrivere a mano è più veloce che aprire uno strumento, e dovresti Il generatore guadagna il suo mantenimento sulle tabelle che sono effettivamente dolorose: quelle con dati reali, molte righe e un'intestazione Su quelle, la scrittura a mano ha tre modalità di guasto ricorrenti.
Il primo è una struttura rotta Manca un tag di chiusura tra cinquanta e il browser's recupero errori fa qualcosa di imprevedibile, e si perde minuti a caccia della cella che l'ha avviato Il secondo è colonne incoerenti Se una riga ha quattro celle e il resto ne ha cinque, la tabella rende storto, e individuare la riga breve in un muro di tag è genuinamente difficile Il terzo è fuggire: incollare i dati che contengono un <, un &, o un randagio " direttamente in una cella e hai rotto il markup o aperto un piccolo foro di iniezione.
Il generatore li rimuove tutti e tre Pads righe corte in modo che ogni riga ha lo stesso numero di celle e la tabella rimane rettangolare Si chiude sempre ciò che si apre E HTML-escape ogni valore di cella, in modo da un < diventa < e visualizza come testo invece di essere letto come tag Ciò che incolli è ciò che ottieni, renderizzato in modo sicuro.
Ecco la decisione in una tabella.
| situazione | maneggiare | perché |
|---|---|---|
| Un minuscolo tavolo due per due | Scrivilo a mano | Più veloce di aprire qualsiasi cosa |
| Dati reali con molte righe e un'intestazione | Generatore di tabelle HTML | Fuga, nidificazione e allineamento sono i luoghi in cui si rompono i tavoli manuali |
| Vuoi invece un tavolo Markdown | Generatore di tabelle Markdown | Stessa idea, output Markdown al gusto GitHub |
| Vuoi solo visualizzare o controllare un CSV | Visualizzatore CSV | Leggere i dati senza generare markup |
Come faccio a rendere accessibile il tavolo?
Questa è la domanda che separa una tabella che sembra semplicemente giusta da una che funziona per tutti, quindi ottiene una propria sezione Due cose contano: celle di intestazione e una didascalia.
Prima le celle di intestazione In una tabella reale, le celle che etichettano righe o colonne dovrebbero essere <th>, no <td>, e ciascuno <th> dovrebbe portare un scope attributo dicendo se si dirige verso una colonna (scope="col") o una riga (scope="row"). Utilizzo dei lettori di schermo scope per annunciare l'intestazione pertinente prima di ogni cella dati, in modo che un ascoltatore senta & quot; Role: Engineer" piuttosto che un & quot; Engineer" nudo; senza contesto L'opzione generator's first-row-header emette <th scope="col"> per la riga superiore, e l'opzione prima colonna-intestazione emette <th scope="row"> per la cella principale di ogni riga del corpo Il tutorial W3C's WAI sulle tabelle consiglia esattamente questo modello per semplici tabelle di dati.
La didascalia è il secondo pezzo. UN <caption> element, che si trova direttamente all'interno della tabella, dà alla tabella un titolo che la tecnologia assistiva legge e che gli utenti vedenti vedono sopra la griglia È l'equivalente accessibile della frase che scriveresti comunque sopra la tabella Il generatore ne aggiunge uno quando compili il campo della didascalia, e gli sfugge come qualsiasi altro testo Tra una didascalia e intestazioni di ambito, l'output è una tabella che un lettore di schermo può navigare piuttosto che una forma in cui inciampa.
Qual è la differenza tra le modalità di styling?
Lo strumento offre tre modi per offrire lo stile, perché dove sta andando il tavolo cambia ciò che funziona.
La modalità Classe aggiunge i nomi delle classi alla tabella e restituisce un blocco corrispondente di CSS che puoi inserire nel tuo foglio di stile Questa è la scelta giusta per un sito web: il markup rimane pulito, lo stile vive in un unico posto e funzionalità come l'uso delle strisce zebrate tbody tr:nth-child(even), che funziona solo da un foglio di stile La modalità in linea invece scrive gli stili direttamente su ogni elemento con style attributi. Questo è un markup più brutto, ma è ciò di cui hai bisogno per l'e-mail HTML, dove la maggior parte dei client si spoglia <style> blocchi e CSS esterni, quindi lo styling deve scorrere su ogni elemento Nessuna modalità emette HTML semantico semplice senza classi e senza stili, che è ciò che desideri quando hai il tuo sistema di progettazione e hai solo bisogno di una struttura corretta e accessibile su cui appenderlo.
raggiungo la modalità classe per impostazione predefinita, la modalità in linea solo quando sto incollando un'e-mail e la modalità nessuna quando sto rilasciando la tabella in un sito che già modella le sue tabelle a livello globale Lo strumento ti consente di passare da uno all'altro senza reinserire i tuoi dati, quindi provare tutti e tre per vedere quale si adatta è un paio di clic.
Come faccio a usare il generatore?
Il flusso è di quattro passaggi Incolla righe separate da virgole o da tabulazioni nella casella di input; il delimitatore viene rilevato automaticamente e puoi sovrascriverlo se i tuoi dati sono ambigui Decidi se la prima riga è un'intestazione di colonna e se la prima colonna di ogni riga è un'intestazione di riga Aggiungi una didascalia, attiva righe a righe, bordi o un layout compatto e scegli CSS basato su classi, stili in linea o HTML semplice Quindi fai clic su Genera e copia l'HTML, oltre al CSS corrispondente in modalità classe.
L'analisi segue RFC 4180, lo standard informale per CSV, quindi un campo avvolto in virgolette doppie può contenere il delimitatore e una virgoletta raddoppiata all'interno di un campo quotato diventa una virgoletta singola Ciò significa una cella come "Doe, Jane" rimane una cella anziché dividersi alla virgola E poiché tutto viene eseguito nel browser, è possibile incollare dati che includono nomi di clienti, figure interne o qualsiasi altra cosa che non si vorrebbe su un server e non lascia mai la macchina Quel modello lato client è lo stesso dietro il resto del sito, descritto nel strumenti online per la privacy dei dati guida.
Come si adatta questo con gli altri strumenti?
Il generatore di tabelle HTML si trova in un piccolo gruppo di strumenti che prendono tutti dati strutturati e restituiscono il markup pulito. Il suo vicino più vicino è il Generatore di tabelle Markdown, che fa lo stesso lavoro ma restituisce Markdown al gusto GitHub per README e problemi invece di HTML per le pagine Web Quando il markup table's generato vuole riordinare, o hai una pila di HTML della tabella scritta a mano da reindentare, il Formattatore HTML lo abbellisce E quando ti muovi tra i documenti HTML e Markdown, il Convertitore HTML a Markdown gestisce il viaggio di andata e ritorno, tavoli inclusi.
L'idea di collegamento è che i dati vivono in una forma e ne hai bisogno in un'altra, e uno strumento deterministico fa la traduzione meglio di una persona che modifica manualmente i tag. Se costruisci per il web, il Toolkit per sviluppatori web la carrellata mostra come questi si incastrano e il Strumenti di produttività per sviluppatori la guida copre l'insieme più ampio di piccole utilità che risparmiano pochi minuti ciascuna, molte volte al giorno.
Un esempio pratico dalla scrittura di documentazione
Lasciate che lo renda concreto Molta della documentazione intorno al sito è un insieme di confronti di funzionalità e tabelle di riferimento: quale strumento fa cosa, quali limiti si applicano dove, cosa significa una determinata opzione La maggior parte di quei dati inizia la vita in un foglio di calcolo, perché un foglio di calcolo è dove è facile da modificare e ordinare Ottenendolo su una pagina usato per significare o esportare in Markdown, che alcune delle mie pagine non rendono, o digitare a mano la tabella HTML, che per un riferimento di venti righe è un genuinamente miserabile dieci minuti.
Ora copio le colonne direttamente dal foglio di calcolo, che mette valori separati da tabulazioni negli appunti, li incollo nel generatore e gli lascio rilevare automaticamente il delimitatore delle tabulazioni Tengo la prima riga come intestazione, aggiungo una didascalia che descrive la tabella, accendo righe e bordi a strisce in modalità classe e copiano sia l'HTML che il CSS. Il markup scende nella pagina, il CSS entra nel foglio di stile una volta e viene riutilizzato da ogni tabella dopo, e il tutto richiede meno di un minuto Le celle di intestazione escono come <th scope="col">, quindi la tabella è accessibile senza che io ci pensi, e ogni valore è sfuggito, quindi la riga che contiene a < in un riferimento di codice non fa saltare la pagina.
Il motivo per cui utilizzo il generatore piuttosto che scrivere a mano queste tabelle non è che l'HTML è difficile, è che l'HTML è noioso e le parti noiose sono dove introduco i bug Scaricare gli attributi di digitazione dei tag, di fuga e di accessibilità a uno strumento significa che la tabella è corretta sulla prima pasta e spendo la mia attenzione sul contenuto della tabella invece che sul suo impianto idraulico Per la posta elettronica, rigenero gli stessi dati in modalità in linea, perché lo strumento newsletter si spoglia <style> blocchi e la versione in linea sopravvive intatta al viaggio.
Quali sono i limiti che vale la pena conoscere?
Alcuni bordi onesti Il primo è che questo strumento costruisce dati tabelle, il tipo con intestazioni e righe di valori Non è uno strumento di layout, e non fa colspan o rowspan, i trucchi di cella unita che a volte vedi in tabelle complesse Le celle unite rendono una tabella molto più difficile per gli screen reader da navigare comunque, e per la stragrande maggioranza dei dati tabulari non ne hai bisogno Se hai veramente bisogno di un'intestazione unita che si estende su diverse colonne, che è una modifica manuale al markup generato, e il Formattatore HTML lo manterrà in ordine dopo.
La seconda è che il generatore legge i tuoi dati come testo e non cerca di essere intelligente sui tipi Una colonna di numeri viene emessa come testo in ogni cella, che è esattamente giusto per la visualizzazione; non allinea a destra i numeri o aggiunge migliaia di separatori, perché quelle sono decisioni di styling e formattazione che appartengono a te Ciò che garantisce è che il valore che hai incollato è il valore nella cella, sfuggito e inalterato.
Il terzo è l'ambiguità del delimitatore Il rilevamento automatico funziona trovando il separatore che fornisce il conteggio delle colonne più coerente tra le righe ed è affidabile per CSV e TSV puliti Se i tuoi dati sono veramente ambigui, ad esempio valori che contengono virgole non citate in alcune righe, il rilevamento può indovinare male, motivo per cui il delimitatore è un'esclusione manuale piuttosto che una decisione fissa Impostalo esplicitamente e l'analisi è deterministica.
Infine, il CSS generato in modalità classe è un punto di partenza sensato e neutro: uno sfondo leggero con intestazione, bordi sottili, imbottitura confortevole. È pensato per essere modificato. Cambia i colori per abbinarli al tuo marchio, regola l'imbottitura, lascia cadere le strisce; è un normale CSS con nomi di classe chiari e il compito di tool' è salvarti la prima bozza, non dettare l'aspetto finale.
Domande frequenti
Che cosa è un generatore di tabelle HTML? Un generatore di tabelle HTML converte righe di dati nel markup HTML che li rende come tabella Incolli valori CSV o separati da schede e scrive un valore completo elemento con , , e celle, quindi non devi digitare ogni tag a mano.
Come faccio a convertire CSV in una tabella HTML? Incolla il tuo CSV nella casella di input, mantieni la prima riga come intestazione se contiene nomi di colonne, scegli il tuo stile, quindi fai clic su Genera Lo strumento rileva il delimitatore, costruisce la tabella e ti dà HTML che puoi copiare direttamente in una pagina.
Come faccio a rendere accessibile il tavolo? Usa celle di intestazione e una didascalia Attiva l'intestazione della prima riga in modo che i titoli delle colonne diventino , abilitare l'intestazione della prima colonna per le etichette delle righe e aggiungere una didascalia che descrive la tabella I lettori di schermo annunciano quindi l'intestazione corretta per ciascuna cella.Qual è la differenza tra le modalità di styling? La modalità Classe aggiunge nomi di classe e un blocco CSS separato, che è meglio per un sito Web La modalità in linea scrive gli stili direttamente su ogni elemento, che sopravvive all'incollaggio in un'e-mail La modalità Nessuna emette HTML semantico semplice in modo da poter applicare il proprio foglio di stile.
I caratteri speciali nei miei dati sono sfuggiti? Sì. Ogni valore di cella è privo di HTML, quindi caratteri come & lt;, >, & amp; e & quot; sono scritti come entità e visualizzati come testo invece di essere interpretati come markup Questo impedisce alla tabella di rompersi quando i dati contengono parentesi angolari o e commerciale.
Può gestire le virgole all'interno di una cella? Sì. Il parser segue RFC 4180, quindi un campo avvolto in virgolette doppie può contenere il delimitatore e una virgoletta raddoppiata all'interno di un campo quotato diventa una virgoletta singola Le virgolette rimangono parte della cella anziché avviare una nuova colonna.
I miei dati sono stati caricati da qualche parte? No. La conversione avviene interamente nel browser utilizzando JavaScript sul dispositivo I tuoi dati non vengono mai caricati, registrati o archiviati e lo strumento continua a funzionare con la rete disconnessa una volta caricata la pagina.
Il generatore di tabelle HTML è gratuito? Sì. è completamente gratuito senza iscrizione, filigrana e senza limite di utilizzo Genera tutte le tabelle HTML necessarie per progetti personali o commerciali.
