Usare i CSS per aggiungere i bordi interni in una tabella HTML

Potresti aver sentito che le tabelle CSS e HTML non si mescolano. Questo non è il caso. Sì, l'utilizzo di tabelle HTML per il layout non è più una best practice per il web design perché sono state sostituite dagli stili di layout CSS, ma le tabelle sono ancora la marcatura corretta da utilizzare per aggiungere dati tabulari a una pagina web.

Dato che così tanti professionisti del Web si allontanano dai tavoli pensando che non siano altro che problemi, molti di questi professionisti hanno poca esperienza nel lavorare con questo elemento HTML comune e hanno difficoltà quando devono aggiungere linee interne alle celle di una pagina web.

Bordi della tabella CSS

Quando si utilizza il CSS per aggiungere bordi alle tabelle, aggiunge solo il bordo attorno alla parte esterna della tabella. Se si desidera aggiungere linee interne alle singole celle di quella tabella, è necessario aggiungere bordi agli elementi CSS interni. È possibile utilizzare il tag HR per aggiungere linee all'interno di singole celle.

Per applicare gli stili trattati in questo tutorial, hai bisogno di una tabella su una pagina web. Quindi, si crea un foglio di stile come foglio di stile interno nella parte superiore del documento (se si ha a che fare con una sola pagina) o allegato al documento come foglio di stile esterno (se il sito ha più pagine). Metti gli stili per aggiungere linee interne nel foglio di stile.

Prima che inizi

Decidi dove vuoi che le linee appaiano nella tabella. Hai diverse opzioni, tra cui:

• Circondando tutte le celle per formare una griglia
• Posizionando le linee tra solo le colonne
• Solo tra le file
• Tra colonne o righe specifiche.

Puoi anche posizionare le linee attorno a singole celle o all'interno di singole celle.

Come aggiungere le linee attorno a tutte le celle in una tabella

Per aggiungere linee attorno a tutte le celle della tabella, creando un effetto griglia, aggiungi quanto segue al tuo foglio di stile:

td, th {bordo: solido 1px nero;}

Come aggiungere linee tra solo le colonne in una tabella

Per aggiungere linee tra le colonne per creare linee verticali che procedono dall'alto verso il basso sulle colonne della tabella, aggiungi quanto segue al tuo foglio di stile:

td, th {border-left: solido 1px nero;}

Se non vuoi che le linee verticali appaiano sulla prima colonna, aggiungi una classe a esimo e TD le cellule. In questo esempio, assumere una classe di no-border su quelle celle e rimuovi il bordo con una regola CSS. La classe HTML che usi è:

class = "no-border">

Quindi, aggiungi il seguente stile al foglio di stile:

.no-border {border-left: none;}

Come aggiungere le righe tra solo le righe in una tabella

Come con l'aggiunta di linee tra le colonne, è possibile aggiungere linee orizzontali tra le righe con uno stile semplice aggiunto al foglio di stile, come segue:

tr {border-bottom: solido 1px nero;}

Per rimuovere il bordo dalla parte inferiore della tabella, si aggiungerà nuovamente una classe

etichetta:

class = "no-border">

Aggiungi il seguente stile al tuo foglio di stile:

.no-border {border-bottom: nessuno;}

Come aggiungere righe tra colonne o righe specifiche in una tabella

Se desideri solo linee tra righe o colonne specifiche, devi utilizzare una classe su tali celle o righe. Aggiungere una linea tra le colonne è leggermente più difficile che tra le righe perché devi aggiungere la classe a ogni cella di quella colonna. Se la tabella viene generata automaticamente da un CMS di qualche tipo, ciò potrebbe non essere possibile, ma se si sta codificando manualmente la pagina, è possibile aggiungere classi appropriate in base alle esigenze per ottenere questo effetto.

class = "side-border">

Aggiungere righe tra le righe è più semplice perché puoi aggiungere la classe alla riga su cui desideri inserire la riga.

class = "border-bottom">

Quindi, aggiungi il CSS al tuo foglio di stile:

.border-side {border-left: solido 1px nero;}.border-bottom {border-bottom: solido 1px nero;}

Come aggiungere linee attorno a singole celle in una tabella

Per aggiungere linee attorno a singole celle, aggiungi una classe alle celle su cui desideri un bordo:

class = "border">

Quindi aggiungi il seguente CSS al tuo foglio di stile:

.confine {bordo: solido 1px nero;}

Come aggiungere linee all'interno di singole celle in una tabella

Se vuoi aggiungere linee all'interno del contenuto di una cella, il modo più semplice per farlo è con il tag della regola orizzontale ().

Consigli utili

Se noti dei vuoti nei tuoi bordi, assicurati che lo stile di compressione dei bordi sia impostato sulla tabella. Aggiungi quanto segue al tuo foglio di stile:

tavolo {border-collapse: collapse;}

Puoi evitare tutto e usare l'attributo border nel tuo tag table. Si rende conto, tuttavia, che questo attributo, sebbene non deprecato, è significativamente meno flessibile del CSS, in quanto è possibile solo definire la larghezza del bordo e può averlo solo attorno a tutte le celle della tabella o nessuna.