CSS: Design de masă. exemple de inregistrare

Efectuarea de tabele cu CSS - de lecție interesantă și responsabilă. Abordarea acestei afaceri trebuie să competent, cu cunoștințe de toate stilurile posibile. În plus, este necesar să aibă un sentiment de frumusete pentru a nu speria pe vizitatorii lor creativitate.

Mesele se pot transforma aproape totul. Design-ul frumos implică utilizarea de tabele CSS limite de design, fundal de masă, de fundal a celulei, diferența dintre ele și mai mult. Luați în considerare cele mai de bază.

de frontieră de masă

CSS stil de design de masă implică întotdeauna un joc cu un chenar (cadru). Toate tabelele implicite nu sunt contururi cadru. Asta este, este egal cu 0 pixeli. Dar acest lucru poate fi corectat prin frontiera de proprietate.

Puteți specifica cadrul exterior pentru întregul tabel:

masă {frontieră: 3px solid negru; }

Datorită acestei linii, la toate mesele de pe site-ul care folosește acest stil este cadru negru. Rețineți că numai granița pe margini, dar nu și în interiorul tabelului. Pentru linii celulare și cadru specificat altfel.

lea, td {frontieră: 3px solid negru;}

Grosimea și culoarea, puteți specifica orice. Rețineți că limitele nu sunt dublate atunci când despicare celule.

Cuvântul denotă o cerere de înregistrare continuă solidă. Puteți specifica alte valori.

este utilizat cel mai frecvent cadru solid, așa cum se pare mai atractiv și nu distrage atenția de la conținutul principal al site-ului.

proprietate de frontieră pot fi specificate, de asemenea, de pe placa. Limita poate fi setată doar pentru partea de sus, de jos, la stânga sau dreapta. Pentru că, în unele cazuri, aceasta nu este o opțiune fezabilă cu rama pentru întreaga masă la o dată.

masă {border-top: 1px solid roșu; }

Deci, puteți seta cadru pentru partea de sus a tabelului numai. În mod similar altor părți, în loc de doar sus scrie: dreapta, stânga sau de jos.

antet de masă

antet Tabel pot fi specificate folosind tag-ul . Această etichetă poate fi în CSS pentru a înregistra o mulțime de proprietăți pentru reglaj fin. Design-ul de masă CSS este bun, deoarece este posibil pentru a manevra elementele modul în care doriți.

Acest titlu este afișat în același mod ca un standard în cărți (cum ar fi „Tabelul 1“).

Puteți specifica locația din titlu de proprietate și legendă-partea (de sus sau de jos). Alinierea la stânga sau la dreapta este definit de proprietate text-align.

tabele de fundal

Contextul mesei poate fi orice culoare sau model. Culoarea stabilește o proprietate culoare de fundal. Numele proprietăților în deplină concordanță cu utilizări în vorbire. Aceasta facilitează stocarea de multe ori.

Culoarea poate fi specificat ca nume, și codificări diferite. În plus, puteți specifica următoarele:

• Transparent - Transparent.
• Moșteniți - culoare este aceeași cu cea a elementului mamă.
• Inițială - implicit.

Opțiunea cu transparență poate fi utilizată în acele cazuri în care toate tabelele din textul din fișierul CSS sunt realizate într-o singură culoare, dar în acest caz nu este nevoie.

În plus, fondul poate fi o imagine. Pentru a face acest lucru, în stilul prescris proprietatea background-image. Calea este ca acest lucru:

URL-ul ( 'URL')

Calea către fișierul poate fi fie relativă sau absolută.

umplere mai complicat se poate face cu un gradient de:

• liniar gradient ();
• radial gradient ();
• repetarea-gradient linear () și repetarea-radial gradient () - gradientul repetate.

celule de fundal

În plus față de un fundal, în general, puteți specifica un fundal cu dungi în coloane sau rânduri. Pentru înregistrarea proprietății este utilizat foarte des, deoarece separarea vizuală a liniilor mai ușor de citit informații.

În plus față de alternanța, și puteți specifica numărul de o anumită coloană sau rând. De exemplu, astfel:

• tr: nth-copil (chiar) {...} - specificați întrețesut;
• tr: nth-copil (1) {...} - indicarea proprietăților unui anumit rând;
• td: nth-copil (chiar) {...} - indicarea coloanelor alternativ;
• td: nth-copil (1) {...} - indicarea proprietăților unei anumite coloane.

În afară de secvență de numere și pot fi specificate - primul (TD: primul copil) sau ultimul (td: ultimul copil).

Diferența dintre celulele

În CSS, Design tabel vă permite să eliminați spațiile dintre celule. În mod implicit acestea sunt. De exemplu, dacă setați cadrul în tabel, fără a stabili distanța dintre limitele, va fi aici acest rezultat.

Sunt de acord, nu pare foarte frumos și nu este convenabil pentru a citi. Utilizatorii vor avea ondulație în ochii aceasta cauza. Eliminați aceste lacune pot fi scriind doar o astfel de linie în stil de tabel:

frontieră-colaps: colaps

Dar se întâmplă, de asemenea, că distanța, dimpotrivă, ar trebui să fie crescută. Mai mult decât atât, mărimea golurilor pot fi specificate ca între coloane și între liniile. Pentru a indica faptul că o valoare (în loc să se prăbușească):

frontieră-colaps: separat

Dar o astfel de acțiune va indica faptul că este necesar să se separe celulele. Așa cum a fost partea lor, a indicat proprietăți suplimentare:

border-spațiere: 20px.

Dacă doriți să specificați o altă distanță între rânduri și coloane, indică două lucruri:

border-spațiere: 10px20px.

Diferența în browsere

Rețineți că în CSS tabele de proiectare poate arăta diferit, în funcție de browser. Mai ales rău este cazul cu versiuni mai vechi, că inovațiile în CSS nu este acceptată.

Cele de mai sus este un exemplu de grosimi de cadru la valori digitale.

Pentru acest exemplu, grosimea ramelor pentru constantele.

stiluri de frontieră, de asemenea, diferă foarte mult.

Prin urmare, dezvoltarea vedea întotdeauna rezultatul în diferite browsere.

În CSS tabele de proiectare recomandat pentru a verifica tipul de browser. Deosebit de mare problemă folosit pentru a fi utilizatorilor cu versiuni mai vechi de Internet Explorer.

Dezvoltatorii foarte avansate pot, în funcție de browser-ul pentru a conecta complet diferite fișiere CSS. Și cineva face un cec în fiecare sau unele stil special (clasa).

Cele mai multe probleme apar din umbră.

CSS: Table Format Exemple

Înregistrarea poate fi destul de variată. Totul depinde de tot site-ul și designul acesteia. Toți ar trebui să fie combinate și culori pestriț. De asemenea, face un mare rol si aroma dezvoltator. Sentimentul de frumusețe este totul diferit.

Dăm câteva exemple ale diferitelor tabele. Figura de mai sus arată utilizarea de înclinare și să se joace cu culoarea de fond și de frontieră.

Mulți vor fi exemplu interesant de design-ul deosebit de frumos, care nu va reduce utilizatorii de ochi. Acest exemplu de realizare este adecvat în aproape orice situație.

Marginile pot fi rotunjite. Se pare destul de frumos.

concluzie

După cum puteți vedea, pentru apariția tabelelor în CSS există mai multe instrumente. Fiecare parametru este, de asemenea, o cantitate mare de opțiuni de valoare. Dacă totul utilizați dintr-o dată, puteți crea capodopere. Mai ales dacă faci un design adaptiv pentru toate browserele.

Principalul lucru în proiectarea - nu exagera cu efecte. Totul ar trebui să fie făcut cu moderație. La început, aspectul place să experimenteze și să utilizeze toate cunoștințele lor imediat. Ca urmare a tabelului sunt proprietăți suprasaturate. Încercați să evitați aceste erori.

Mai mult decât atât, unii parametri pot interfera unele cu altele. De exemplu, nu este necesar să se precizeze culoarea de fond a tabelului, în timp ce în cazul în care există încă setat imagine de fundal, care se va suprapune culoarea specificată.