Scopul lecției: Familiarizarea cu proprietățile tabelelor și principiile de dispunere a tabelelor CSS

Să aruncăm o privire la proprietățile de bază ale tabelului CSS

frontieră

O proprietate este considerată într-una și include mai multe proprietăți în același timp:

• STIL BORDER
• LĂȚIMEA GRANIȚEI
• BORDER-COLOR

Există, de asemenea, o regulă colectivă:

table.collapse (border-collapse: colaps;) table.separate (border-colaps: separate;)

Rezultat:

latime si inaltime
(înălțimea și lățimea mesei)

Valori:

Exemplu:

aliniere text
(aliniere orizontala)

Valori:

• centru (centrat)
• stânga (aliniat la stânga)
• dreapta (aliniat la dreapta)
• justifica (latime)

vertical-aliniat
(aliniere verticală)

Valori:

• linia de bază (linia de bază)
• sub (ca subindex)
• super (ca superscript)
• sus (sus)
• mijloc (mijloc)
• jos (jos)
• % (din înălțimea spațierii)

Exemplu:

căptușeală
(căptușeală de masă)

culoare de fundal (fundal)
culoare (culoare text)

Aspect tabel CSS

Datorită numărului mare de proprietăți ale tabelelor și a variațiilor în designul acestora, tabelele au fost mult timp un standard pentru aspectul paginilor web. Dacă faceți marginile tabelului invizibile, atunci puteți utiliza celulele sale individuale ca blocuri separate ale paginii: antet, meniu, subsol etc.

Dar acest lucru nu este în totalitate corect, deoarece fiecare etichetă are propriul scop, iar tabelele nu ar trebui să servească pentru aspectul paginii. Cu toate acestea, lipsa unei alternative i-a determinat pe designeri să folosească acest tip de metodă de aspect.

Acum există o altă modalitate - utilizarea straturilor, care a înlocuit treptat tabelele în acest tip de lucru cu o pagină web. Cu toate acestea, chiar și în zilele noastre, unii designeri folosesc cu succes aspectul tabelelor.

Aspect foaie de calcul cu două coloane

Una dintre cele mai frecvente metode de aspect este două coloane, adică pagina este împărțită în două părți.

De obicei, partea stângă este meniul și elemente suplimentare, iar partea dreaptă este cea principală pentru conținutul principal.

În acest caz, lățimea laturii stângi este setată la o anumită valoare, adică greu, iar partea dreaptă ocupă restul paginii.

În acest caz, trebuie să setați lățimea totală a întregului tabel (eticheta de tabel) în procente folosind proprietatea de lățime (100%), iar pentru prima celulă (eticheta td) setați lățimea (de asemenea, proprietatea de lățime) în pixeli sau procent.

Exemplu: setați cadrul principal al paginii în două coloane: prima - cu o dimensiune fixă, a doua - pentru restul zonei browserului. Executați sarcina utilizând stiluri CSS ()

Performanţă:

</ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "dreapta"> 2</ td> </ tr> </ table> ...

1

2

...

Rezultat:

Acum să încercăm să separăm vizual cele două coloane ale tabelului una de cealaltă.

Exemplu: setați un fundal diferit de celule (pentru a separa două coloane una de cealaltă) și setați distanța dintre coloane (separator)

Performanţă:
Să adăugăm noi proprietăți de stil:

/ * pentru celula stângă * / td # left (lățime: 200px; fundal: #ccc; bordură: 1px negru solid; / * denotați temporar margini * /) / * pentru celula dreaptă * / td # dreapta (fundal: # fc3; bordură: 1px negru solid; / * denotă temporar margini * /) / * pentru separator * / #razdel (lățime: 10px; / * Spațierea între coloane * /)

Împreună:

</ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "razdel"> <td id = "dreapta"> 2</ td> </ tr> </ table>

1

2

O nouă celulă a fost adăugată pentru separator.
Rezultat:

De asemenea, puteți face separatorul dintre coloane mai puțin proeminent. Pentru a face acest lucru, vom folosi stiluri de margine.

Exemplu: faceți un separator între coloanele tabelului utilizând marginea punctată a celulelor adiacente

Performanţă:
Să adăugăm noi proprietăți de margine pentru celule:

/ * pentru celula stângă * / td # left (lățime: 200px; fundal: #ccc; / * Culoare stânga fundal culoare * / / * nou * / border-right: 1px punctat # 000; / * Opțiuni margine punctat dreapta * / )

Împreună:

</ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "dreapta"> 2</ td> </ tr> </ table>

1

2

Rezultat:

Aspect foaie de calcul cu trei coloane

Există un concept al unui aspect fix sau „fluid”.

S-a rezolvat aspectul CSS

• Folosind aspect fix lățimea întregului tabel este setată în pixeli, și apoi, indiferent de rezoluția monitorului și a ferestrei browserului, tabelul va avea întotdeauna aceeași lățime.
• În acest caz lățimea coloanelor rămase ar trebui, de asemenea, să fie fixată.
• Este posibil să nu se specifică lățimea unei celule, apoi va fi calculată automat pe baza dimensiunilor celulelor rămase și a întregului tabel.

Exemplu: creați un șablon de pagină cu trei coloane. Utilizați aspectul tabelului fix:

• coloana din stânga - 150 pixeli;
• coloana din mijloc - 400 pixeli;

Performanţă:

</ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "dreapta"> 3</ td> </ tr> </ table>

1

2

3

Rezultat:

Mașină de cauciuc

• Lățimea mesei atunci când se utilizează designul „cauciuc” setat în% din lățimea ferestrei browserului... Acea. când se schimbă fereastra browserului, se modifică și dimensiunea tabelului.
• Lățimea tuturor celulelor poate fi instalat în procente.
• A doua opțiune este când lățimea unor celule este stabilit în procente, A unele în pixeli.

Important: Suma lățimilor tuturor coloanelor ar trebui să fie de 100%, indiferent de lățimea tabelului.

Exemplu:

• coloana din stânga - 20%;
• coloana din mijloc - 40%;
• coloana din dreapta - 40%;

Setați fundalul coloanelor și separați vizual coloanele cu o margine.

Performanţă:

</ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "dreapta"> 3</ td> </ tr> </ table>

1

2

3

Rezultat:

Luați în considerare a doua opțiune, când lățimea coloanei centrale este selectată automat de browser; un exemplu este imaginea:

Exemplu: creați un șablon de pagină cu trei coloane. Utilizați un aspect de masă fluid:

• coloana din stânga - 150 pixeli;
• coloana din mijloc - 40%;
• coloana din dreapta - 200 pixeli;

Setați fundalul coloanelor și separați vizual coloanele cu o margine.

Performanţă:

</ cap> <corp> <tabel id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "dreapta"> 3</ td> </ tr> </ table>

1

2

3

Rezultat:
Rezultatul va fi aproximativ același, doar „întinderea” va avea loc datorită coloanei centrale.

Utilizarea unui tabel imbricat într-un aspect fluid

Dacă lățimea a două coloane este setată în procente și a treia în pixeli, nu veți putea trece cu un singur tabel. Deci, dacă lățimea întregului tabel este de 100%, prima coloană este de 200 pixeli, iar coloanele rămase sunt de 20%, atunci un calcul simplu arată că dimensiunea primei coloane este de 60%. În acest caz, browserul nu va accepta valoarea specificată în pixeli, iar dimensiunea va fi setată în procente.

• Tabelul original este creat cu două celule. Lățimea mesei este setată ca procent.
• Pentru celula stângă(prima coloană) lățimea este setată în pixeli.
• Lățimea dreaptă a celulei(bază pentru alte difuzoare) nu este specificat... Un al doilea tabel este inserat în interiorul acestei celule, care constă și din două celule.
• Lățimea celulelor tabelului imbricat este setată ca procent..
• Lățimea interioară a mesei trebuie setată la 100% astfel încât această masă să ocupe tot spațiul liber din masa exterioară.
• Lățimile coloanei centrale și din dreapta sunt calculate în raport cu lățimea celulei, nu tabelul exterior în ansamblu.

Exemplu: creați un șablon de pagină cu trei coloane. Utilizați aspectul fluid cu tabelul imbricat:

• coloana din stânga - 150 pixeli;
• coloana din mijloc - 60%;
• coloana din dreapta - 40%;

Setați fundalul coloanelor.

Performanţă:

1 2 3 Atributele etichetei celular și spațiul celulelor sunt necesare aici, astfel încât să nu existe „spațiu” între tabele. Rezultat: Specifică distanța dintre marginile celulelor din tabel. Atributul de spațiere a chenarului nu funcționează când tabelul are setarea de restrângere a chenarului. Sintaxă spațiere la margine: valoare [valoare] Argumente O valoare setează atât distanța verticală, cât și cea orizontală între marginile celulei. Dacă există două argumente, primul definește distanța orizontală, iar al doilea definește distanța verticală. 1 2 3 4 Rezultatul acestui exemplu este prezentat în Fig. 1. Orez. 1. Aplicarea parametrului de spațiere a chenarului Notă Dacă eticheta se adaugă parametrul de spațiere celulă, atunci când se utilizează atributul stil de spațiere a chenarului, acesta nu este luat în considerare și valoarea spațiului de celule este ignorată. Excepția de la această regulă este Internet Explorer, care nu înțelege deloc proprietatea de spațiere a frontierelor. Mese border-collapse setează modul de afișare a marginilor în jurul celulelor tabelului. Acest parametru joacă un rol atunci când un chenar este setat pentru celule, apoi o linie cu grosime dublă va fi obținută la joncțiunea celulelor. Adăugarea valorii de colaps forțează browserul să analizeze astfel de locuri în tabel și să elimine liniile duble din acesta. aspectul tabelului definește modul în care browserul ar trebui să calculeze înălțimea și lățimea celulelor tabelului pe baza conținutului acestuia. border-spacing setează spațiul dintre marginile celulelor din tabel. Atributul de spațiere a chenarului nu funcționează atunci când tabelul are setarea de restrângere a chenarului. CSS vă permite să setați nu numai stilul chenarului tabelului, ci și stilul chenarelor celulelor individuale. Deoarece fiecare celulă are propriile margini, granița dintre celulele adiacente este dublată. Dar este posibil să combinați marginile celulelor vecine într-una singură. Pentru aceasta există o proprietate de colapsare a frontierelor. Preia valorile: border-collapse: separate - fiecare celulă are propriul său border (implicit) border-colaps: colaps - frontiera generală border-collapse: mostenire - valoarea este preluată din elementul părinte De exemplu, să creăm un tabel și să setăm un cadru pentru celulele tuturor tabelelor care vor fi pe pagină. În primul rând, să nu schimbăm nimic pentru a vedea cum va arăta tabelul: Stil: 1 2 3 4 5 6