687 Shares 8280 views

CSS: design del tavolo. esempi di registrazione

Fare tabelle con i CSS – di lezione interessante e responsabile. Approccio a questa attività ha bisogno di competenza, con la conoscenza di tutti gli stili possibili. Inoltre, è necessario possedere un senso di bellezza per non spaventare i visitatori creatività.

Le tabelle possono trasformare quasi tutto. Bellissimo design prevede l'utilizzo dei confini tavoli CSS design, sfondo tavolo, sfondo delle celle, il divario tra loro e molto altro. Si consideri il più elementare.

table border

CSS design in stile tavolo comporta sempre un gioco con un bordo (cornice). Tutte le tabelle predefinite non sono contorni cornice. Cioè, è pari a 0 pixel. Ma questo può essere corretto dal confine di proprietà.

È possibile specificare la cornice esterna per l'intera tabella:

table {border: 3px solid black; }

Grazie a questa linea in tutte le tabelle sul sito che utilizza questo stile è cornice nera. Si noti che solo il bordo sui bordi, ma non all'interno della tabella. Per linee cellulari e telaio diversamente specificato.

th, td {border: nero solido 3px;}

Lo spessore e il colore, è possibile specificare qualsiasi. Tenete a mente che i confini non sono raddoppiate quando splicing cellule.

La parola denota una registrazione solida continuo. È possibile specificare altri valori.

esso è più comunemente usato solido telaio, come sembra più attraente e non distrarre l'attenzione dal contenuto principale del sito.

proprietà border può essere specificato anche nel consiglio. Il confine può essere impostato solo per la parte superiore, in basso, a sinistra oa destra. Poiché in alcuni casi non è un'opzione fattibile con il telaio per l'intera tabella in una sola volta.

table {border-top: 1px solid red; }

Così si può impostare la cornice per la parte superiore di un solo tavolo. Analogamente a tutte le altre parti, invece di appena alto di scrittura: a destra, a sinistra o in basso.

intestazione della tabella

intestazione della tabella può essere specificata utilizzando il tag

. Questo tag può essere nel CSS per registrare un sacco di proprietà per la messa a punto. Il design del tavolo CSS è un bene perché è possibile manovrare gli elementi nel modo desiderato.

Questo titolo viene visualizzato nello stesso modo come standard nei libri (come "tabella 1").

È possibile specificare la posizione del titolo e la proprietà caption-side (superiore o inferiore). Allineamento a sinistra oa destra è definito dalla proprietà text-align.

tavoli di sfondo

Sfondo del tavolo può essere di qualsiasi colore o modello. Colore imposta una proprietà background-color. I nomi delle proprietà pienamente coerenti con gli usi in discorso. Facilita memorizzazione molte volte.

Il colore può essere specificato come il nome, e differenti codifiche. Inoltre, è possibile specificare quanto segue:

  • Trasparente – trasparente.
  • Eredita – colore è la stessa di quella dell'elemento genitore.
  • Iniziale – di default.

Opzione con la trasparenza può essere utilizzata nei casi in cui tutte le tabelle nel testo nel file CSS sono realizzati in un solo colore, ma in questo caso non è necessario.

Inoltre, lo sfondo può essere un'immagine. Per fare questo, nella proprietà background-image stile prescritto. Il percorso è simile a questo:

url ( 'URL')

Il percorso del file può essere sia relativo o assoluto.

riempimento più complicato può essere fatto con un gradiente:

  • lineare-gradiente ();
  • radiale gradiente ();
  • ripetendo lineare gradiente () e ripetendo-radiale gradiente () – gradiente ripetuto.

cell sfondo

Oltre a uno sfondo, in generale, è possibile specificare uno sfondo a righe in colonne o righe. Per la registrazione della proprietà viene utilizzato molto spesso, perché la separazione visiva delle linee più facili da leggere le informazioni.

Oltre al alternanza, ed è possibile specificare il numero di una particolare colonna o riga. Per esempio in questo modo:

  • tr: nth-child (anche) {…} – specificare interlacciato;
  • tr: nth-child (1) {…} – indicazione delle proprietà di una particolare riga;
  • TD: nth-child (anche) {…} – l'indicazione delle colonne alternata;
  • TD: nth-child (1) {…} – l'indicazione delle proprietà di una particolare colonna.

Oltre sequenza e numeri possono essere specificati – la prima (TD: first-child) o l'ultimo (td: last-child).

Il divario tra le cellule

In CSS, design del tavolo consente di rimuovere gli spazi tra le cellule. Di default sono. Ad esempio, se si imposta il frame nella tabella senza impostare la distanza tra i confini, sarà qui questo risultato.

D'accordo, non sembra molto bello e non è conveniente leggere. Gli utenti avranno ondulazione agli occhi a causa di questo. Rimuovere queste lacune possono essere scrivendo semplicemente come una linea nello stile di tabella:

border-collapse: crollo

Ma succede anche che la distanza, al contrario, deve essere aumentato. Inoltre, la dimensione dei vuoti può essere specificato come tra le colonne e tra le linee. Per indicare che un valore (invece collasso):

border-collapse: separata

Ma tale azione indica che è necessario separare le cellule. Come era la loro quota, indicata proprietà aggiuntiva:

border-spacing: 20px.

Se si desidera specificare una distanza diversa tra le righe e le colonne, indica due cose:

border-spacing: 10px20px.

La differenza nei browser

Tenete a mente che nel CSS tabelle dati possono avere un aspetto diverso, a seconda del browser. Particolarmente male è il caso con le versioni precedenti, che le innovazioni nel CSS non è supportato.

Quanto sopra è un esempio di telaio spessori in valori digitali.

Per questo esempio, lo spessore delle cornici per le costanti.

stili di bordo differiscono anche notevolmente.

Pertanto, lo sviluppo sempre vedere il risultato in diversi browser.

In CSS tabelle dati raccomanda di verificare il tipo di browser. Particolarmente grande problema usato per essere per gli utenti con versioni precedenti di Internet Explorer.

Gli sviluppatori molto esperti possono, a seconda del browser per la connessione completamente diversi file CSS. E qualcuno fa un controllo in ciascuna o qualche particolare stile (classe).

La maggior parte dei problemi derivano dalle ombre.

CSS: Esempi Formato tabella

La registrazione può essere molto varia. Tutto dipende su tutto il sito e il suo design. Tutti dovrebbero essere combinati e colori variegati. Inoltre fa un grande ruolo e sapore sviluppatore. Senso della bellezza è tutto diverso.

Diamo alcuni esempi delle varie tabelle. La figura in alto mostra l'uso di inclinazione e giocare con il colore di sfondo e il bordo.

Molti sarà interessante esempio di bel design pulito che non taglierà gli utenti degli occhi. Questa forma di realizzazione è appropriato in qualsiasi situazione.

I bordi possono essere fatte arrotondate. Sembra piuttosto bello.

conclusione

Come si può vedere, per la comparsa dei tavoli in CSS ci sono molti strumenti. Ogni parametro è anche una grande quantità di opzioni di valore. Se si utilizza tutto in una volta, è possibile creare capolavori. Soprattutto se si fa disegno adattabile per tutti i browser.

La cosa principale nella progettazione – non esagerare con gli effetti. Tutto dovrebbe essere fatto con moderazione. In un primo momento, il layout amano sperimentare e utilizzare tutte le loro conoscenze immediatamente. Come risultato della tabella sono proprietà ipersaturi. Cercate di evitare questi errori.

Inoltre, alcuni parametri possono interferire tra loro. Per esempio, non c'è bisogno di specificare il colore di sfondo del tavolo, mentre se v'è immagine di sfondo, che si sovrappongono il colore specificato ancora impostato.