Introduzione allo stile di tabella CSS

Il motivo per cui utilizziamo i CSS, sebbene possiamo usare le tabelle HTML, è perché, nella tabella HTML, un layout di pagina basato su tabella spesso viene visualizzato più lentamente di un layout equivalente basato su CSS; questo è particolarmente vero per le pagine che hanno molti contenuti. Le tabelle non devono essere utilizzate come ausili per il layout. E se costruiamo tabelle HTML senza stili o attributi nel browser, questo verrà visualizzato senza alcun bordo. Lo stile di una tabella con CSS può migliorarne l'aspetto.

Le tabelle CSS sono piuttosto semplici da capire e usare. Si tratta solo di ricordare i corrispondenti valori delle proprietà di visualizzazione CSS per gli elementi della tabella HTML di base. Con l'aiuto dei CSS, siamo in grado di creare alcuni tavoli eleganti.

Che cos'è lo stile tabella CSS?

Una tabella CSS (Cascading Style Sheets) descrive come disporre un insieme di elementi in righe e colonne. Il CSS predefinito applicato a una tabella HTML è una tabella CSS.

  • CSS ha progettato e riprogettato la flessibilità.
  • Significa che un layout basato su CSS ti consente di posizionare tutti i tuoi stili (ad esempio, dalle piccole modifiche alle regole principali) in un'unica posizione.
  • Modificando le regole di layout impostate in quel foglio di stile, si influisce su ogni pagina a cui fa riferimento.
  • Il layout di pagina basato su CSS di solito appare più veloce sullo schermo e anche il download sarà più veloce del layout basato su tabella.

Proprietà stile tabella CSS

Di seguito sono riportate le diverse proprietà degli stili di tabella CSS:

1. Crollo del confine

Viene utilizzato per indicare se i bordi attorno alle celle di una tabella devono essere separati o compressi.

Sintassi: border-collapse: separate|collapse|initial|inherit;

  • Crollo del bordo: separato: viene utilizzato in modo che le celle adiacenti abbiano bordi propri e indipendenti che non sono condivisi.

Sintassi

border-collapse: separate;

Il valore predefinito impostato sulla proprietà border-collapse è separato. Quando sono separati, i browser inseriscono uno spazio di un paio di pixel tra ogni cella usando la proprietà spaziatura bordi.

Codice

Produzione:

  • Collapse border: collapse: ogni volta che impostiamo la proprietà border-collapse per comprimere rimuove lo spazio tra le celle.

Sintassi

border-collapse: collapse;

Codice

Produzione :

Anche se si elimina questo spazio impostando l'attributo cellpacing per il tag HTML su 0, i browser visualizzano comunque doppi bordi. Cioè, il bordo inferiore di una cella apparirà sopra il bordo superiore della cella sottostante, causando un raddoppio dei bordi. L'impostazione della proprietà border-collapse su collapse elimina sia lo spazio tra le celle sia questo raddoppio dei bordi.

  • Confine bordo: iniziale: viene utilizzato per impostare la proprietà border-collapse sul valore predefinito.
  • Confine bordo: eredita: viene utilizzato quando la proprietà bordo-collasso eredita dai suoi elementi padre. Questa proprietà funziona solo quando applicata a etichetta.

    Valori: crollo, separato, iniziale, ereditario;

    2. Spaziatura dei bordi

    Imposta lo spazio bordi adiacenti e il contenuto che circonda la tabella. È simile alla spaziatura cellulare del tag

    attributo, tranne per il fatto che ha un secondo valore opzionale. Questa proprietà funziona solo quando applicata a
    etichetta.

    Sintassi

    border-spacing: Length|initial|inherit;

    La spaziatura dei bordi di solito accetta uno o due valori di lunghezza. In questo viene specificato un solo valore, quindi definisce sia la spaziatura orizzontale che quella verticale tra le celle.

    Codice

    Produzione:

    In questo, se vengono specificati due valori, il primo valore definisce la spaziatura orizzontale tra le celle (lo spazio su entrambi i lati di ciascuna cella) e il secondo valore definisce la spaziatura verticale tra le celle. (lo spazio che separa la parte inferiore di una cella dalla parte superiore di quella sottostante).

    3. Lato didascalia

    La proprietà lato didascalia specifica il posizionamento di una didascalia della tabella. Se applicata a una didascalia della tabella, questa proprietà determina se la didascalia viene visualizzata nella parte superiore o inferiore della tabella. Una didascalia verrebbe normalmente visualizzata nella parte superiore della tabella.

    Sintassi

    caption-side: top|bottom|initial|inherit;

    Questa proprietà può avere uno dei quattro valori:

    • Lato didascalia: in alto: è il valore predefinito. In questo, mette la didascalia sopra il tavolo.

    Sintassi: caption-side:top;

    Codice

    Produzione:

    • Lato didascalia: in basso: posiziona la didascalia sotto il tavolo.

    Sintassi: caption-side:bottom;

    Codice

    Produzione:

    • Lato didascalia: iniziale: viene utilizzato per impostare la proprietà sul valore predefinito.
    • Caption-side: inherit: eredita questa proprietà dal suo elemento genitore.

    Valori: superiore, inferiore, iniziale, ereditario;

    4. Celle vuote

    Indica al browser se deve visualizzare una cella di tabella completamente vuota. Controlla il rendering dei bordi e dello sfondo delle celle che non hanno contenuto visibile in una tabella che utilizza il modello di bordi separati.

    Sintassi: empty-cells: show|hide|initial|inherit;

    Questa proprietà può avere uno dei quattro valori:

    • Cella vuota: mostra: questa proprietà viene utilizzata per visualizzare i bordi sulla cella vuota.

    Sintassi: empty-cells: show;

    Codice

    Produzione:

    • Cella vuota: nascondi: questa proprietà viene utilizzata per nascondere i bordi nella cella vuota.

    Sintassi: empty-cells: hide;

    Codice

    Produzione:

    • Cella vuota: iniziale : viene utilizzata per impostare la proprietà sul valore predefinito.
    • Cella vuota: eredita: eredita questa proprietà dal suo elemento genitore.

    Valori: mostra, nascondi, iniziale, eredita;

    5. Layout della tabella

    Controlla il modo in cui un browser Web disegna una tabella e può influire leggermente sulla velocità con cui il browser lo visualizza. Questa proprietà può avere uno dei quattro valori.

    Sintassi: table-layout: auto|fixed|initial|inherit;

    La proprietà predefinita è auto.

    1. Layout della tabella: auto: l'auto regola automaticamente la larghezza degli elementi per adattarli al contenuto.

    2. Tabella - layout: fisso : L'impostazione fissa forza il browser a rendere tutte le colonne della stessa larghezza delle colonne nella prima riga. Se il contenuto si allarga rispetto alla prima riga, il contenuto verrà spostato, tagliato o esteso al di fuori delle celle.

    Codice

    Produzione:

    3. Layout della tabella: iniziale: viene utilizzato per impostare la proprietà sul valore predefinito.

    4. Layout della tabella: eredita: eredita questa proprietà dal suo elemento genitore.

    Conclusione

    Con l'aiuto dei CSS, possiamo creare tavoli eleganti e possiamo migliorare l'aspetto del tavolo.

    Articoli consigliati

    Questa è una guida allo stile di tabella CSS. Qui discutiamo le proprietà con codici, output e sintassi dello stile della tabella CSS. Puoi anche consultare i nostri articoli per saperne di più -

    1. Vantaggi del CSS
    2. Usi di CSS
    3. Introduzione ai CSS
    4. Formattazione del testo CSS

    Categoria:

    Strumenti di sviluppo Web