Ciao, oggi parleremo di tabelle e di
come è possibile utilizzarle per visualizzare i dati sul tuo sito web.
Quindi, come mi piace dirlo,
è che consideravamo davvero i tavoli come un tipo di idea malvagia.
Perche' le persone non usavano i tavoli per il motivo per cui dovevano farlo.
Invece, stavano usando tabelle per tipo di mettere le cose fuori,
stendendole bene sullo schermo.
Questo ha iniziato a accadere durante il tempo di HTML 2, forse HTML 3.1.
E la gente diceva, voglio davvero che la mia pagina sia bella e
non ho mezzi per farlo, quindi lo farò un tavolo enorme e
sistemerò tutto in righe o colonne diverse.
Questo elimina completamente l'intera idea di separazione dei contenuti dal layout.
Inoltre, lo rende davvero confuso per le persone che potrebbero usare
dispositivi assistivi, perché si stanno chiedendo, è davvero tutto un mucchio di dati,
o c'è contenuto che dovrebbe essere semplicemente formattato nel modo normale.
Quindi inizieremo a parlare di tavoli.
E quello che voglio davvero fare è sottolineare l'idea che dovresti usare
le tabelle solo se hai una sorta di dati visualizzati.
Ora, prima ancora che inizi a codificare una sola
cosa, devi tracciare il tuo layout di come dovrebbe essere il tuo tavolo.
Ora, l'ho detto ai miei studenti più e più volte, e loro dicono di sì, sì, e
poi iniziano a codificare.
E poi dicono di sì, sì, e poi iniziano a codificare.
E, dopo circa la quarta o la quinta volta, si rendono conto
, oh, è molto più facile scrivere codice pulito la prima volta, piuttosto che correggere codice rotto.
E così, poi iniziano e pensano, va bene, quante righe e
colonne ho effettivamente bisogno di rappresentare tutti i miei dati?
E poi fai un passo avanti e dici, beh, ci sono righe o
colonne in cui ho effettivamente bisogno di estendersi su più celle, o quelle
che chiamiamo le piccole scatole nella tabella?
Perche' se e' cosi', sara' molto piu' facile se l'ho disegnato per capire
dove avro' bisogno di attributi speciali per farlo accadere.
Perché una delle cose più importanti da sapere quando si eseguono tabelle è che
il browser si aspetta che ci sia lo stesso numero di celle su ogni singola riga.
Se non lo fai, sembrera' molto disordinato.
Una volta che hai deciso come dovrebbe apparire la tua tabella,
allora è il momento di iniziare a pensare ai tag.
Si inizia con il tag tabella ed è fondamentalmente solo un elemento contenitore che
conterrà tutti gli altri attributi e tutti gli altri tag al suo interno.
Avrai la riga della tabella e poi qui per td, ho colonne, ma
quello che penso davvero sarebbe meglio è pensare a questo come celle di tabella, non proprio
colonne perché quello che stai facendo è parlare di ogni singola scatola.
Quindi, all'interno del tavolo, avrai una o più righe di tabella.
E poi all'interno di ogni riga della tabella, avrai uno o più elementi TD, quindi
le colonne o le celle.
Quindi ecco il codice per creare una tabella molto semplice.
Anche se sembra molto contorto e come se ci fossero un sacco di cose che stanno succedendo qui.
La maggior parte di questo è solo informazioni per il browser.
Quando guardiamo la pagina reale che viene generata vedrete che è molto
pulito e semplice.
Quindi ho il mio codice per
il mio tavolo all'esterno e poi ciascuna delle mie righe di codice qui è una riga.
Ho il mio inizio tr e la mia fine tr.
E poi all'interno di ogni riga ho tre elementi, uno, due,
tre che sono all'interno del tag td.
E ti dirò subito che quando all'inizio ho scritto questo codice
andava bene, ma ho incasinato tutto perché avevo dimenticato di mettere il mio tag finale.
Quindi assicurati che quando stai codificando questi, sei molto pulito e conciso.
E se lo fai correttamente, questo creerà una tabella semplice,
come ho detto, con nove elementi al suo interno.
Uno, due, tre, quattro, cinque, sei, sette, otto, nove.
Questo è il più semplice possibile, per quanto riguarda il tavolo.
Ora, in alcuni casi, potresti voler aggiungere quelle che chiamiamo intestazioni di tabella al tuo codice.
Intestazioni di tabella è l'idea che nella parte superiore di ogni colonna, o anche nella parte superiore o
all'inizio di ogni riga, si abbia una sorta di testo in grassetto, che indica che
non si tratta di dati, questo è in realtà il nome dei dati che stiamo esaminando.
Ora va bene, voglio dire che non va bene, ma quello che alcune persone farebbero è
semplicemente fare questi normali elementi TD e forse li renderebbero audaci.
Quindi le persone che la stanno guardando possono dire, oh hey guarda.
Questo è audace, quindi deve essere più importante.
Ma vogliamo davvero evitare di farlo.
Invece di usare un TD con una sorta di carattere grassetto,
vogliamo usare un tag semantico TH, che sta per intestazione della tabella.
Quindi qui queste tre righe di codice sono esattamente le stesse di prima, ma
ho aggiunto una nuova riga, dove invece di td ho th.
Così ho riga uno, riga due, riga tre, ecc
E quello che si può vedere qui è che ciò che otteniamo è questa bella tabella in
cima a ciascuno, che è entrambi visivamente permette all'utente di sapere che
questi sono titoli, ma anche trasmette semanticamente le stesse informazioni.
Quindi, una delle cose che ho detto prima, quando stai progettando il tuo tavolo,
è che vuoi decidere se attraverserai più celle.
Potrebbe essere il caso che il tavolo che vuoi fare non sia una sorta di
perfetta griglia di tic tac toe, o perfetta nove per nove.
Quindi puoi combinare più righe o
più colonne utilizzando gli attributi rowspan e span colonna.
All' interno del tuo elemento dovresti includere rowspan uguale a due se vuoi estendersi su
due righe, o l'estensione della colonna è uguale a cinque se vuoi che si estenda su cinque colonne.
Va bene, fammi andare avanti e mostrarti un esempio con un po 'di codice e
ancora, mi rendo conto che se stai guardando questo su un piccolo schermo piccolo che
sembra davvero un sacco di informazioni da digerire.
Ma non sta succedendo molto.
Ho una tabella semplice, in cui ho le intestazioni della mia tabella con il nome del bambino e
quindi il nome del genitore.
E poi vado avanti e inizio a mettere un bambino, e
con ogni bambino, includo i loro genitori.
Quindi qui, ho rowspan uguale a due per Catherine, il
che significa che voglio davvero che la mia cella di Catherine prenda due righe.
Lo stesso vale per la cella di Edward.
Maggie l'ho lasciata completamente sola.
Quindi andiamo e diamo un'occhiata al risultato finale, e penso che sia davvero se
concateniamo all'indietro, ti aiuterà a capire cosa sta facendo questo codice.
Quindi di nuovo, ho il nome del bambino e il nome del genitore, e
qui ci sono le due celle in cui ho fatto l'intervallo di riga.
E potete vedere, in realtà ci sono voluti file multipli perché in questo caso,
Catherine ed Edward avevano entrambi due genitori con cui volevamo mettere insieme.
Ancora una volta, non è un concetto difficile, ma è il caso che se non ci stavi pensando
, e siamo tornati al tuo codice e abbiamo appena iniziato a lanciare rowspan e
columnspan, diventa molto disordinato e più difficile da eseguire il debug.
Una delle cose che potresti aver notato,
nella parte superiore della tabella, ho incluso un attributo border.
Il motivo per cui l'ho fatto è perché penso che sia molto
più facile vedere questa rowspan qui perché ho le linee intorno a ogni cella.
Quindi, puoi usare l'attributo border per andare avanti e
inserire linee intra ciascuna delle tue celle.
Ed è molto comune farlo.
Ma, ancora una volta, nel tuo HTML, cerco di evitare lo styling.
È qualcosa che possiamo aggiungere più tardi se decidi di saperne di più sui CSS.
Ma è un attributo che è così comunemente usato che volevo andare avanti e
metterlo lì in modo da poter vedere cosa stava succedendo.
Quindi, parliamo di didascalie.
Quindi, come colleghiamo il testo a una tabella specifica?
Quello che le persone facevano è che mettevano in una sorta di intestazione, h2 o h3 e
lo mettevano proprio sopra o proprio sotto il tavolo.
Quindi visivamente, se lo stavi guardando, potresti capire, oh,
questo va con il tavolo.
Ma ancora una volta voglio davvero spingerti a usare i tag semantici.
Quindi, invece di farlo, puoi andare avanti e
usare il tag didascalia all'interno della tabella e
aiuterà tutti a sapere che oh questa didascalia va con questa tabella specifica.
Quindi, andiamo avanti e rivediamo.
Numero uno, le tabelle devono essere utilizzate solo per i dati tabulari.
Non usarlo per il layout.
Due, disegna il tuo tavolo prima di codificare il tuo tavolo.
Ti risparmiera' cosi' tanto dolore alla fine, te lo prometto.
Infine, e questa è la terza e più importante cosa che spero tu te ne vada,
è che devi controllare i tag non chiusi.
Una delle cose che è grande nei browser quando stai sviluppando
localmente, stai digitando il tuo codice e lo stai testando e guardando, è che
il tuo browser di solito può capire cosa intendevi fare, anche se hai incasinato.
Va bene.
E le tabelle sono un buon esempio in cui puoi dimenticare
di chiudere alcuni tag, ma il tuo browser sa cosa intendevi fare.
Ma più tardi se decidi di creare una tabella, e lo caricerai, e
devi davvero assicurarti che i dati in là siano validi e rappresentati bene.
Una delle cose peggiori che puoi fare è lasciare i tag chiusi.
Quindi assicurati di convalidare il tuo codice,
ogni volta che scrivi una tabella o davvero ogni volta che scrivi qualsiasi codice.
E sarai davvero in grado di essere sicuro di scrivere il miglior codice che puoi.