|
CSS vă permite să setați nu numai stilul marginii tabelului, ci și stilul marginilor celulelor individuale. Deoarece fiecare celulă are propriile margini, granița dintre celulele adiacente este dublă. Dar este posibil să combinați limitele celulelor învecinate într-una singură. Există o proprietate de prăbușire a graniței pentru asta. Ia valori:
border-collapse: separat - fiecare celulă are propriul ei chenar (implicit)
border-collapse: colaps - chenar partajat
border-collapse: inherit - 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ă. Să nu schimbăm nimic la început pentru a vedea cum va arăta tabelul:
Stil:
1
2
3
4
5
6
|
Pagină
Rezultat acest exemplu niciunul nu este prezentat în fig. 1.
Orez. 1. Aplicarea parametrului de spațiere a marginilor
Nota
Dacă să etichetezi se adaugă parametrul cellspacing, apoi atunci când se folosește atributul de stil border-spacing nu este luat în considerare și valoarea cellspacing este ignorată. Excepția de la această regulă este browserul Internet Explorer, care nu înțelege deloc proprietatea de spațiere a granițelor.
Mesele
border-collapse setează modul de afișare a chenarelor în jurul celulelor tabelului. Acest parametru joacă un rol atunci când este instalat un cadru pentru celule, apoi la joncțiunea celulelor veți obține o linie de grosime dublă. Adăugarea valorii de restrângere obligă browserul să analizeze locuri similare din tabel și să elimine linii duble din acesta.table-layout specifică modul în care browserul ar trebui să calculeze înălțimea și lățimea celulelor tabelului pe baza conținutului acestuia.border-spacing specifică distanța dintre marginile celulelor din tabel. Atributul border-spacing nu funcționează când tabelul are parametrul border-collapse setat la colaps.
Deci, am studiat cel mai mult cu tine pași simpli, care se poate face cu limite de tabel. Și acum masa arată mult mai plăcută din punct de vedere estetic. Cu toate acestea, umplerea celulelor se sprijină direct pe granițe. Acest lucru poate fi rezolvat cu ușurință prin simpla indentare a celulelor din tabelul HTML. Și apoi textul din interiorul cadrului, din celulă, va fi mai lizibil.
Pentru a indenta o celulă, utilizați atributul umplutură celulară pentru etichetă
. Cu toate acestea, există o altă opțiune, mai preferabilă: CSS.
În acest caz, indentarea este setată folosind proprietatea umplutura. Cu ajutorul acestuia, nu va fi dificil să indentați acolo unde este necesar, adică în partea de sus, dreapta, jos sau stânga, folosind, respectiv, una dintre aceste proprietăți: padding-top, umplutura-dreapta, captuseala-fundŞi padding-stânga.
Puteți specifica exact câți pixeli ar trebui să fie indentarea. Să dăm un exemplu în care va fi liniuța de jos 20
pixeli, iar restul vor fi 10
. Astfel de CSS-codul va arata astfel: Td ( umplutură: 10px; umplutură-partea inferioară: 20px; ) O cod complet stiluri în această etapă: Tabel ( chenar: solid 1px albastru; border-collapse: collapse; ) td ( chenar: solid 1px albastru; umplutură: 10px; padding-bottom: 20px; ) Rezultat în browser:
Spații dintre celule
De regulă, problemele asociate cu crearea tabelelor pot fi rezolvate folosind etichete, atribute și proprietăți care vă permit să creați cadre, indentări în celule și, de asemenea, să setați culoarea de fundal a celulelor în sine.
Indentările din tabele nu se găsesc numai în interiorul celulelor. Ele pot fi prezente și între celule în sine.
Există două opțiuni pentru a face indentări între celule:
- folosind atributul spațierea celulelor pentru etichetă
.
- folosind CSS-proprietăți spaţierea graniţelor.
Trebuie subliniat că spaţierea graniţelor este specificat pentru tabel ca un întreg, în timp ce proprietatea umplutura este scris direct pentru celule.
Să ne uităm la un exemplu: Tabel ( chenar: albastru solid 1px; restrângere chenar: separat; spațiere margine: 5 px; ) td ( chenar: albastru solid 1 px; umplutură: 10 px; umplutură- jos: 20 px; ) Și rezultatul rezultat:
Permiteți-ne să precizăm imediat că nu ar trebui să încercați să faceți astfel de indentări folosind border-colaps: colaps. La urma urmei, atunci când utilizați această opțiune, celulele se „lipesc” unele de altele.
Și pentru a le menține separate unul de celălalt, ar trebui să le utilizați border-colaps: separat. Este important să înțelegeți că această valoare este valoarea implicită. Și este folosit doar pentru a arăta în mod clar cum se rezolvă această problemă. Dacă ștergem această linie, rezultatul sub formă de celule situate separat unul de celălalt va fi salvat.
Obiectivul lecției: Introducere în proprietățile tabelelor și principiile de aspect al tabelelor CSS
Să ne uităm la principal Proprietăți CSS mesele
frontieră
O proprietate este considerată într-una singură și include mai multe proprietăți simultan:
- STIL DE FRUNTĂ
- LĂȚime-chenar
- BORDA-CULOARE
Există și o regulă generală:
table.collapse( chenar-restrângere:comprimare; ) table.separate( chenar-restrângere:separare; )
Rezultat:
latime si inaltime
(inaltime si latime mese)
Valori:
Exemplu:
alinierea textului
(alinierea orizontala)
Valori:
- centru (centru)
- stânga (de-a lungul marginii din stânga)
- dreapta (marginea dreapta)
- justifica (latime)
vertical-align
(aliniere pe verticală)
Valori:
- linia de bază (de-a lungul liniei de bază)
- sub (ca subindex)
- super (ca superindex)
- de sus (de-a lungul marginii de sus)
- mijloc (în mijloc)
- jos (de-a lungul marginii de jos)
- % (din înălțimea distanței dintre linii)
Exemplu:
umplutura
(inclinații interne în tabel)
culoare de fundal (fond)
culoare (culoarea textului)
Dispunerea tabelului CSS
Datorită un număr mare proprietățile meselor și variațiile în designul lor, tabele pentru o lungă perioadă de timp au fost un standard pentru aspectul paginii web. Dacă faceți invizibile marginile tabelului, puteți utiliza celulele sale individuale ca blocuri separate ale paginii: antet, meniu, subsol etc.
Dar acest lucru nu este în întregime corect, deoarece fiecare etichetă are propriul său scop, iar tabelele nu ar fi trebuit folosite pentru aspectul paginii. Cu toate acestea, lipsa unei alternative i-a determinat pe designeri să folosească această metodă specială de aspect.
Acum există o altă modalitate - folosirea straturilor, care au înlocuit treptat tabelele în acest tip de lucru cu o pagină web. Cu toate acestea, chiar și în timpul nostru, unii designeri folosesc cu succes aspectul tabelului.
Aspect tabelar cu două coloane
Una dintre cele mai comune metode de aspect este două coloane, de exemplu. 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 părții din stânga este setată la o anumită valoare, adică. rigid, iar partea dreaptă ocupă zona rămasă a paginii.
- În acest caz, trebuie să setați lățimea totală a întregului tabel (eticheta tabelului) în procente prin proprietatea width (100%), iar pentru prima celulă (eticheta td) setați lățimea (și proprietatea width) în pixeli sau procente.
Exemplu: setați cadrul principal al paginii din două coloane: prima - cu o dimensiune fixă, a doua - pentru zona rămasă a browserului. Finalizați sarcina folosind stiluri CSS ()
Execuţie:
| </cap>
<corp >
<ID tabel = "maket" cellspacing = "0" >
<tr >
<td id = "stânga" > 1</td>
<td id = "dreapta" > 2</td>
</tr>
</table>
...
|
...
Rezultat:
- Acum să încercăm să separăm vizual două coloane ale tabelului una de cealaltă.
Exemplu: setați fundaluri de celule diferite (pentru a separa două coloane una de cealaltă) și setați distanța dintre coloane (separator)
Execuţie:
Să adăugăm noi proprietăți de stil: /* pentru celula din stânga */ td#left( width:200px; background: #ccc; border:1px solid black; /* marcați temporar marginile */ ) /* pentru celula din dreapta */ td#right( background: #fc3; border:1px solid black /* marcați temporar marginile */ ) /* pentru separator */ #razdel( width: 10px; /* Distance between columns */ )
Toți împreună:
| </cap>
<corp >
<ID tabel = "maket" cellspacing = "0" >
<tr >
<td id = "stânga" > 1</td>
<td id = "razdel" >
<td id = "dreapta" > 2</td>
</tr>
</table>
|
A fost adăugată o nouă celulă pentru separator.
Rezultat:
- Separatorul dintre coloane poate fi, de asemenea, mai puțin proeminent. Pentru a face acest lucru, vom folosi stiluri de chenar.
Exemplu: faceți un separator între coloanele tabelului folosind o linie punctată care mărginește celulele adiacente
Execuţie:
Să adăugăm noi proprietăți de chenar pentru celule: /* pentru celula din stânga */ td#left( lățime: 200px; fundal: #ccc; /* Culoare de fundal coloanei din stânga */ /* nou */ margine-dreapta: 1px întreruptă #000; /* Opțiuni pentru marginea dreapta întreruptă * / )
Toți împreună:
| </cap>
<corp >
<ID tabel = "maket" cellspacing = "0" >
<tr >
<td id = "stânga" > 1</td>
<td id = "dreapta" > 2</td>
</tr>
</table>
|
Rezultat:
Dispunerea tabelului cu trei coloane
Există un concept de aspect fix sau „fluid”.
Aspect CSS fix
- Când se utilizează aspect fix lățimea întregului tabel este specificată în pixeli, iar 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 fixă.
- Nu puteți specifica lățimea unei celule, atunci aceasta 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 un aspect fix de masă: - coloana din stânga - 150 pixeli;
- coloana din mijloc - 400 pixeli;
Execuţie:
| </cap>
<corp >
<ID tabel = "maket" cellspacing = "0" >
<tr >
<td id = "stânga" > 1</td>
<td id = "central" > 2</td>
<td id = "dreapta" > 3</td>
</tr>
</table>
|
Rezultat:
Machetă din cauciuc
- Lățimea mesei atunci când utilizați design „cauciuc”. setați ca % din lățimea ferestrei browserului. Că. Când fereastra browserului se schimbă, se modifică și dimensiunea tabelului.
- Lățimea tuturor celulelor poate fi instalat în procente.
- A doua opțiune este când latimea unor celule este instalat î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 un fundal pentru coloane și separați vizual coloanele cu un chenar.
Execuţie:
| </cap>
<corp >
<ID tabel = "maket" cellspacing = "0" >
<tr >
<td id = "stânga" > 1</td>
<td id = "central" > 2</td>
<td id = "dreapta" > 3</td>
</tr>
</table>
|
Rezultat:
Să luăm în considerare a doua opțiune, când lățimea coloanei centrale este selectată automat de browser; Un exemplu este imaginea următoare:
Exemplu: creați un șablon de pagină cu trei coloane. Utilizați un aspect fluid al tabelului: - coloana din stânga - 150 pixeli;
- coloana din mijloc - 40%;
- coloana din dreapta - 200 pixeli;
Setați un fundal pentru coloane și separați vizual coloanele cu un chenar.
Execuţie:
| </cap>
<corp >
<ID tabel = "maket" cellspacing = "0" >
<tr >
<td id = "stânga" > 1</td>
<td id = "central" > 2</td>
<td id = "dreapta" > 3</td>
</tr>
</table>
|
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, iar a treia în pixeli, nu vă veți putea descurca cu un singur tabel. Deci, dacă lățimea întregului tabel este de 100 la sută, prima coloană este de 200 de pixeli, iar coloanele rămase sunt de 20 la sută, atunci un calcul simplu arată că dimensiunea primei coloane este de 60 la sută. În acest caz, valoarea specificată în pixeli nu va fi acceptată de browser, iar dimensiunea va fi setată ca procent.
- Tabelul original este creat cu două celule. Lățimea tabelului este setată ca procent.
- Pentru celula din stânga lățimea (prima coloană) este setată în pixeli.
- Lățimea celulei corecte(baza pentru alte coloane) nu este specificat. Un al doilea tabel, format tot din două celule, este introdus în interiorul acestei celule.
- Lățimea celulelor imbricate din tabel este setată ca procent.
- Lățimea mesei interioare trebuie setată la 100%. astfel încât această masă să ocupe tot spațiul liber din masa externă.
- Lățimea coloanelor din centru și din dreapta este calculată în funcție de lățimea celulei, nu de 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 pentru coloane.
Execuţie:
|
Atributele etichetei cellpadding și cellspacing sunt necesare aici pentru a vă asigura că nu există nici un „decalaj” între tabele.
Rezultat:
Salutare tuturor! Deci, acum știți cum să creați tabele elementare care constau din câte rânduri și coloane este necesar. Nu-i rău, nu-i rău. Acum să vorbim despre designul acestor mese.
În lecția anterioară, tabelele au fost afișate fără margini. Și, vezi tu, arată așa, așa că nici măcar nu poți numi asta un semn. Pentru a crea chenarele tabelului în HTML, ar trebui să adăugați la etichetă
atribut frontieră, dându-i o valoare diferită de zero.
Deci, să facem chenarele pentru masă. De exemplu, pentru cel pe care îl avem deja:
| Celula din stânga sus | Celula din dreapta sus |
| Celula din stânga jos | Celula din dreapta jos |
Rezultat în browser:
Cum să eliminați chenarele tabelului
La rândul său, pentru a elimina marginile tabelului HTML, sau puteți spune, de asemenea, să le faceți invizibile, aveți nevoie de atributul frontieră valoarea stabilită 0
. După acești pași simpli, cadrul va fi îndepărtat.
Atributul vă permite să creați, dar nu să gestionați, limite. Vă permite doar să le schimbați grosimea.
Prin urmare, acum vom vorbi despre CSS, ale căror proprietăți fac posibilă utilizarea frontieră creați diferite margini, atât în interiorul fiecărei celule, cât și externe, în jurul mesei în ansamblu.
Să ne uităm la cum să folosiți CSS pentru a crea marginile exterioare și interioare ale unui tabel.
Pentru a face acest lucru, eliminați atributul border din tabelul nostru și adăugați stiluri:
Exemplu de tabel
| Celula din stânga sus |
Celula din dreapta sus |
| Celula din stânga jos |
Celula din dreapta jos |
Rezultat în browser:
Acum haideți să adăugăm și borduri pentru fiecare celulă. Pentru a face acest lucru, adăugați pur și simplu stiluri:
Rezultat în browser:
Cum să eliminați umplutura între celule dintr-un tabel HTML
De acord că limita specificată cu folosind CSS, nu are așa ceva aspect, așa cum ne-am dori. Fără îndoială, din punct de vedere estetic, există ceva de lucrat. Pe pagina browserului puteți vedea că în mod implicit afișează separat chenarele tabelului și celulelor. Exemplul demonstrează clar acest lucru.
Cu toate acestea, puteți scăpa complet de astfel de chenare, care sunt numite duble, dacă utilizați proprietatea CSS border-collapse. În practică arată astfel: Tabel (chenar: albastru solid 1px; chenar-restrângere: restrângere; ) ... Ca rezultat, distanța dintre celule este eliminată:
Valoarea de restrângere atribuită atributului de chenar vă permite să eliminați chenarele duble. După cum puteți vedea, rezultatul este prăbușirea marginilor celulelor adiacente, precum și a cadrelor de celule și a cadrului exterior al tabelului. În ceea ce privește acesta din urmă, acesta poate fi îndepărtat complet. Și dacă este nevoie să-l afișați, trebuie să-i măriți lățimea. Astfel am scăpat de separatoarele din tabel. Și în lecția următoare vom vorbi despre cum puteți stabili limite verticale și orizontale. Mult succes tuturor!
Fotografii provocatoare ale lui Alexander Mavrin
Cum să restabiliți ciclul menstrual după naștere:
|
|
|
