Per impostazione predefinita, una tabella HTML su una pagina web viene visualizzata senza bordo; per aggiungere un bordo alla tabella, come a tutti gli altri elementi, viene utilizzata la proprietà CSS border. Ma vale la pena prestare attenzione al fatto che se aggiungi una cornice solo a un elemento
, verrà visualizzato attorno all'intera tabella. Affinché anche le celle della tabella abbiano un bordo, dovrai impostare la proprietà border per gli elementi | E | . Tabella, th, td (bordo: 1px nero pieno;) Prova » Ora sia la tabella che le celle hanno dei bordi e ogni cella e tabella hanno i propri bordi. Di conseguenza, tra i fotogrammi appariva uno spazio vuoto; la dimensione di questo spazio può essere controllata dalla proprietà border-spacing, impostata per l'intera tabella. In altre parole, non è possibile controllare individualmente la spaziatura tra celle diverse.
Anche se rimuovi gli spazi tra le celle utilizzando il valore della proprietà border-spacing 0, i bordi delle celle si toccheranno, raddoppiando la dimensione. Per combinare i bordi delle celle, utilizzare la proprietà border-collapse. Può assumere due significati:
- separato: è l'impostazione predefinita. Le celle vengono visualizzate a breve distanza l'una dall'altra, ogni cella ha il proprio bordo.
- collassa: unisce i riquadri adiacenti in uno solo, tutti gli spazi tra le celle, così come tra le celle e il riquadro della tabella, vengono ignorati.
Nome del documento
| Nome | Cognome |
|---|
| Omero | Simpson |
| Marge | Simpson |
| Nome | Cognome |
|---|
| Omero | Simpson |
| Marge | Simpson |
Tentativo " Dimensioni della tavola
Dopo aver aggiunto i bordi alle celle della tabella, è diventato evidente che il contenuto delle celle era troppo vicino ai bordi. Per aggiungere spazio tra i bordi delle celle e il loro contenuto, puoi utilizzare la proprietà di riempimento: Th, td (imbottitura: 7px;) Prova » La dimensione di un tavolo dipende dal suo contenuto, ma spesso si verificano situazioni in cui il tavolo è troppo stretto e diventa necessario allungarlo. La larghezza e l'altezza della tabella possono essere modificate utilizzando le proprietà larghezza e altezza, impostando le dimensioni desiderate sia sulla tabella stessa che sulle celle: Tabella (larghezza: 70%; ) th (altezza: 50px; ) Prova » Allineamento del testo
Per impostazione predefinita, il testo nelle celle dell'intestazione della tabella è allineato al centro, mentre il testo nelle celle normali è allineato a sinistra; utilizzando la proprietà text-align è possibile controllare l'allineamento orizzontale del testo.
La proprietà CSS di allineamento verticale consente di controllare l'allineamento verticale del contenuto testuale. Per impostazione predefinita, il testo è allineato verticalmente al centro delle celle. L'allineamento verticale può essere sovrascritto utilizzando uno dei valori della proprietà di allineamento verticale:
- in alto: il testo è allineato al bordo superiore della cella
- al centro: allinea il testo al centro (impostazione predefinita)
- bottom: il testo è allineato al bordo inferiore della cella
Nome del documento
| Nome | Cognome |
|---|
| Omero | Simpson |
| Marge | Simpson |
Tentativo " Colore di sfondo alternato delle righe della tabella
Quando si visualizzano tabelle di grandi dimensioni che contengono molte righe con molte informazioni, può essere difficile tenere traccia dei dati che appartengono a una determinata riga. Per aiutare gli utenti a orientarsi, puoi utilizzare alternativamente due diversi colori di sfondo. Per creare l'effetto descritto, puoi utilizzare il selettore di classe, aggiungendolo ad ogni seconda riga della tabella:
Nome del documento
| Nome | Cognome | Posizione |
|---|
| Omero | Simpson | padre |
| Marge | Simpson | madre |
| Bart | Simpson | figlio |
| Lisa | Simpson | figlia |
Tentativo "Aggiungere un attributo di classe a ogni altra riga è piuttosto noioso. La pseudo-class:nth-child è stata aggiunta ai CSS3 per fornire una soluzione alternativa a questo problema. Ora l'effetto interleaving può essere ottenuto esclusivamente utilizzando i CSS, senza ricorrere alla modifica del markup HTML del documento. Utilizzando la pseudo-class:nth-child, puoi selezionare tutte le righe pari o dispari di una tabella utilizzando una delle parole chiave: even (even) o odd (odd): Tr:nth-child(dispari) ( colore di sfondo: #EAF2D3; ) Prova » Cambia lo sfondo della riga al passaggio del mouse
Un altro modo per migliorare la leggibilità dei dati tabulari è cambiare il colore di sfondo di una riga quando ci si passa sopra con il mouse. Ciò contribuirà a evidenziare il contenuto desiderato della tabella e ad aumentare la percezione visiva dei dati.
Implementare un effetto del genere è molto semplice; per fare ciò, è necessario aggiungere una pseudo-class:hover al selettore di riga della tabella e impostare il colore di sfondo desiderato: Tr:hover ( background-color: #E0E0FF; ) Prova » Allineare un tavolo al centro
Centrare una tabella HTML è possibile solo se la larghezza della tabella è inferiore alla larghezza del suo elemento genitore. Per allineare la tabella al centro, è necessario utilizzare la proprietà margin, assegnandole almeno due valori: il primo valore sarà responsabile del margine esterno della tabella in alto e in basso, e il secondo valore sarà responsabile di allineamento automatico al centro: Tabella (margine: 10px automatico;) Prova » Se hai bisogno di margini diversi nella parte superiore e inferiore della tabella, puoi impostare la proprietà margin su tre valori: il primo sarà responsabile del margine superiore, il secondo dell'allineamento orizzontale e il terzo del margine inferiore: Tabella (margine: 10px automatico 30px;)
Ciao a tutti! Quindi ora sai come creare tabelle elementari composte da tutte le righe e colonne necessarie. Non male non male. Ora parliamo del design di questi tavoli.
Nella lezione precedente le tabelle venivano visualizzate senza bordi. E vedi, sembra così così che non puoi nemmeno chiamarlo un segno. Per creare i bordi della tabella in HTML, devi aggiungere al tag
attributo confine, assegnandogli un valore diverso da zero.
Quindi creiamo i bordi per il tavolo. Ad esempio, per quello che abbiamo già:
| Cella in alto a sinistra | Cella in alto a destra |
| Cella in basso a sinistra | Cella in basso a destra |
Risultato nel browser:
Come rimuovere i bordi della tabella
A sua volta, per rimuovere i bordi della tabella HTML, o si può anche dire, renderli invisibili, è necessario l'attributo confine valore impostato 0
. Dopo questi semplici passaggi, la cornice verrà rimossa.
L'attributo consente di creare, ma non di gestire, i confini. Ti permette solo di cambiare il loro spessore.
Pertanto, ora parleremo di CSS, le cui proprietà ne rendono possibile l'utilizzo confine creare bordi diversi, sia all'interno di ogni cella che all'esterno, attorno alla tabella nel suo insieme.
Diamo un'occhiata a come utilizzare i CSS per creare i bordi esterni ed interni di una tabella.
Per fare ciò, rimuovi l'attributo border dalla nostra tabella e aggiungi stili:
Tabella di esempio
| Cella in alto a sinistra |
Cella in alto a destra |
| Cella in basso a sinistra |
Cella in basso a destra |
Risultato nel browser:
Ora aggiungiamo anche i bordi a ciascuna cella. Per fare ciò, aggiungi semplicemente stili:
Risultato nel browser:
Come rimuovere il riempimento tra le celle in una tabella HTML
Concordo sul fatto che il confine definito utilizzando i CSS non sembra buono come vorremmo. Indubbiamente, dal punto di vista estetico, c’è qualcosa su cui lavorare. Nella pagina del browser puoi vedere che per impostazione predefinita visualizza separatamente i bordi della tabella e della cella. L’esempio lo dimostra chiaramente.
Tuttavia, puoi eliminare completamente questi bordi, chiamati doppi, se usi la proprietà CSS border-collapse. In pratica appare così: Tabella ( bordo: solido 1px blu; collasso del bordo: collasso; ) ... Di conseguenza, la distanza tra le celle viene rimossa:
Il valore di compressione assegnato all'attributo border consente di rimuovere i doppi bordi. Come puoi vedere, il risultato è il collasso dei bordi delle celle adiacenti, nonché dei frame delle celle e del frame esterno della tabella. Per quanto riguarda quest'ultimo, potrebbe essere rimosso completamente. E se è necessario visualizzarlo, è necessario aumentarne la larghezza. In questo modo abbiamo eliminato i separatori nella tabella. E nella prossima lezione parleremo di come impostare i confini verticali e orizzontali. Buona fortuna a tutti!
Specifica la distanza tra i bordi delle celle in una tabella. L'attributo border-spacing non funziona quando la tabella ha il parametro border-collapse impostato su compress .
Sintassi
border-spacing: valore [valore]
argomenti
Un valore imposta sia la distanza verticale che quella orizzontale tra i bordi della cella. Se sono presenti due argomenti, il primo determina la distanza orizzontale e il secondo quella verticale.
spaziatura dei confini
Il risultato di questo esempio è mostrato in Fig. 1.
Riso. 1. Applicazione del parametro di spaziatura dei bordi
Nota
Se taggare viene aggiunto il parametro cellspacing, poi quando si utilizza l'attributo di stile border-spacing non viene preso in considerazione e il valore cellspacing viene ignorato. L'eccezione a questa regola è Internet Explorer, che non comprende affatto la proprietà border-spacing.
Tabelle
border-collapse imposta come visualizzare i bordi attorno alle celle della tabella. Questo parametro gioca un ruolo quando è installato un telaio per le celle, quindi alla giunzione delle celle si otterrà una linea di doppio spessore. L'aggiunta del valore di compressione obbliga il browser ad analizzare posizioni simili nella tabella e a rimuovere le doppie linee da essa.table-layout specifica come il browser deve calcolare l'altezza e la larghezza delle celle della tabella in base al suo contenuto.border-spacing specifica la distanza tra i bordi delle celle nella tabella. L'attributo border-spacing non funziona quando la tabella ha il parametro border-collapse impostato su compresso.
Quindi, abbiamo studiato le azioni più semplici che possono essere eseguite con i limiti della tabella. E ora il tavolo sembra molto più esteticamente gradevole. Tuttavia, il riempimento delle celle poggia direttamente sui confini. Questo può essere facilmente risolto semplicemente rientrando le celle nella tabella HTML. E poi il testo all'interno della cornice, nella cella, sarà più leggibile.
Per rientrare una cella, utilizzare l'attributo imbottitura cellulare per etichetta
. Tuttavia, esiste un'altra opzione, più preferibile: CSS.
In questo caso, il rientro viene impostato utilizzando la proprietà imbottitura. Con il suo aiuto non sarà difficile rientrare dove necessario, cioè in alto, a destra, in basso o a sinistra, utilizzando rispettivamente una di queste proprietà: parte superiore imbottita, imbottitura a destra, fondo imbottito E imbottitura-sinistra.
Puoi specificare esattamente di quanti pixel dovrebbe essere il rientro. Facciamo un esempio in cui sarà il rientro inferiore 20
pixel, e tutto il resto lo sarà 10
. Come CSS-il codice sarà simile a questo: Td (imbottitura: 10px; imbottitura-bottom: 20px;) E il codice di stile completo in questa fase: Tabella ( bordo: solido 1px blu; border-collapse: collasso; ) td ( bordo: solido 1px blu; riempimento: 10px; riempimento-bottom: 20px; ) Risultato nel browser:
Spazi tra le celle
Di norma, i problemi associati alla creazione di tabelle possono essere risolti utilizzando tag, attributi e proprietà che consentono di creare cornici, rientri nelle celle e anche di impostare il colore di sfondo delle celle stesse.
I rientri nelle tabelle non si trovano solo all'interno delle celle. Possono anche essere presenti tra le cellule stesse.
Esistono due opzioni per creare rientri tra le celle:
- utilizzando l'attributo spaziatura delle celle per etichetta
.
- utilizzando CSS-proprietà spaziatura dei confini.
Questo va sottolineato spaziatura dei confiniè specificato per la tabella nel suo insieme, mentre la proprietà imbottituraè scritto direttamente per le celle.
Diamo un'occhiata ad un esempio: Tabella ( bordo: solido 1px blu; collasso del bordo: separato; spaziatura bordo: 5px; ) td ( bordo: solido 1px blu; riempimento: 10px; riempimento-bottom: 20px; ) E il risultato risultante:
Precisiamo immediatamente che non si dovrebbe provare a realizzare tali rientranze utilizzando crollo del confine: collasso. Dopotutto, quando si utilizza questa opzione, le celle "si attaccano" l'una all'altra.
E per tenerli separati gli uni dagli altri, dovresti usare crollo dei confini: separato. È importante comprendere che questo valore è il valore predefinito. E viene utilizzato solo per mostrare chiaramente come viene risolto questo problema. Se eliminiamo questa riga, il risultato verrà salvato sotto forma di celle posizionate separatamente l'una dall'altra.
Abbiamo già scoperto che le tabelle HTML hanno struttura, sebbene i browser non li mostrino per impostazione predefinita. Ma non è tutto, ogni cella della tabella ha anche una cornice chiamata bordo della cella. Ma non è tutto, utilizzando attributi tag speciali Puoi modificare le distanze tra le celle e dalle celle alla cornice della tabella, nonché il riempimento interno dai bordi delle celle al loro contenuto.
Cornice della tabella HTML, bordi delle celle, distanze tra loro e riempimento.
Così per creando una cornice Tabelle HTML e confini delle sue cellule viene utilizzato un solo attributo tag - confine. Il valore dell'attributo è un numero intero non negativo (zero per impostazione predefinita) che rappresenta la dimensione in pixel. Ma attenzione, la dimensione cambia solo nella cornice della tabella; ai bordi della cella rimane sempre invariata.
Per cambiare distanze tra le cellule(i loro confini) e dalle celle al fotogramma tabelle nel tag Viene applicato l'attributo cellspacing. I suoi valori possono anche essere solo numeri che misurano le distanze in pixel.
Da installare interna riempimento dai bordi delle celle al loro contenuto richiesto nel tag utilizzare l'attributo cellpadding. E i suoi valori sono numeri che indicano le dimensioni dei pixel.
Tieni presente che i browser impostano per impostazione predefinita valori piccoli (due pixel) per cellspacing e cellpadding, quindi per rimuovere del tutto la spaziatura, imposta gli attributi su zero (0).
Esempio di bordi, cornici e riempimento di una tabella HTML
Bordi, cornici e imbottiture del tavolo
| Cella 1.1 | Cella 1.2 | Cella 1.3 |
| Cella 2.1 | Cella 2.2 | Cella 2.3 |
| Cella 3.1 | Cella 3.2 | Cella 3.3 |
Tabella con solo i bordi delle celle e i bordi impostati:
| Cella 1.1 | Cella 1.2 | Cella 1.3 |
| Cella 2.1 | Cella 2.2 | Cella 2.3 |
| Cella 3.1 | Cella 3.2 | Cella 3.3 |
Risultato nel browser
Tabella con rientri e distanze modificati:
Naturalmente non è necessario tracciare una cornice e i bordi delle celle sulla tabella per modificare i rientri interni e le distanze tra le celle.
Secondo la sintassi HTML, i browser aggiungono i valori di cellspacing e cellpadding alle dimensioni della tabella e delle sue celle. Ad esempio, se imposti la larghezza della cella su 100 pixel e cellpadding="10" - i browser aggiungeranno 20 pixel alla larghezza (10 ciascuno a sinistra e a destra) e diventerà 120 pixel. In generale, lo capirai strada facendo.
Digressione dall'argomento o come rimuovere i rientri lungo i bordi della pagina
Inizialmente tutti i browser installano piccoli margini lungo i bordi della pagina HTML, che spesso non sono necessari, quindi ora imparerai come rimuoverli. In generale, queste informazioni dovrebbero essere inserite all'inizio del libro di testo, ma difficilmente ti sarebbero utili lì.
A tempo debito al tag C'erano quattro attributi che impostavano la dimensione di questi margini per ciascun lato della pagina: topmargin (in alto), rightmargin (a destra), bottommargin (in basso) e leftmargin (a sinistra). Ora questi attributi sono obsoleti, quindi utilizzeremo gli stili (CSS). Quindi, puoi modificare le distanze dei margini lungo i bordi della pagina in diversi modi, te ne mostrerò due e imparerai a conoscere il terzo se decidi di imparare i CSS.
Metodo uno. Nell'etichetta specificare l'attributo style con i seguenti valori:
stile="margine:0" >...
- rimuove i rientri da tutti i lati della pagina HTML contemporaneamente.
stile= "margine: in alto a destra in basso a sinistra">...
- regola la dimensione dei rientri per ciascun lato in senso orario. Di norma vengono utilizzate le dimensioni in pixel, ad esempio: style= "margine:5px 3px 4px 5px" >...
Il secondo e più conveniente modo. Nell'etichetta
Compiti a casa.
In questa lezione non descriverò nemmeno tutto in dettaglio, ma solo punti generali. Per completezza, guarda il risultato di esempio.
- Crea tre tabelle, ciascuna composta da una riga e tre colonne (colonne).
- Nella prima tabella, posiziona l'intestazione o "intestazione" della pagina (da non confondere con l'"intestazione" del documento HTML), nella seconda - i menu sinistro e destro, nonché il contenuto principale (contenuto) , nel terzo - il piè di pagina o il "piè di pagina" della pagina.
- Lascia che la larghezza della prima e dell'ultima colonna di ciascuna tabella sia fissa.
- Importante. Usa etichetta
![]() solo per creare quattro pulsanti di menu orizzontali nell'intestazione della pagina. In altri casi, lascia che le immagini vadano sullo sfondo, e nelle seconde celle delle tabelle vengono utilizzati solo i colori, e nella prima e nell'ultima tabella è #99FF99.
- Lascia che il testo del contenuto della pagina sia allineato su entrambi i lati della cella della tabella e che il titolo sia centrato.
- Per quanto riguarda le distanze tra le celle della tabella e i rientri delle celle, pensa tu stesso dove dovrebbero essere completamente rimosse e dove dovrebbero essere aumentate.
|
