Acasă - Recuperare
Indentare între celule css. Comportamentul celulelor goale

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 FRONTIERĂ
  • 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 superioare)
  • mijloc (în mijloc)
  • jos (de-a lungul marginii de jos)
  • % (din înălțimea distanței dintre linii)

Exemplu:

căptușeală
(liniuțe în tabel)

culoarea de fundal (fondul)
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> ...

    1
    ...

    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>

    1

    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>

    1

    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>

    1 2

    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>

    1 2

    Rezultat:

    Să luăm în considerare a doua opțiune, când lățimea coloanei centrale este selectată automat de browser; Un exemplu este următoarea figură:

    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>

    1 2

    Rezultat:
    Rezultatul va fi aproximativ același, doar „întinderea” va avea loc din cauza 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, de asemenea format 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:

    1
    2

    Atributele etichetei cellpadding și cellspacing sunt necesare aici pentru a se asigura că nu există nici un „decalaj” între tabele.
    Rezultat:

    Specifică distanța dintre marginile celulelor dintr-un tabel. Atributul border-spacing nu funcționează atunci când tabelul are parametrul border-collapse setat la collapse .

    Sintaxă

    margine-spațiere: valoare [valoare]

    Argumente

    O valoare setează atât distanța verticală, cât și cea orizontală dintre marginile celulei. Dacă există două argumente, atunci primul determină distanța orizontală, iar al doilea determină distanța verticală.





    spaţierea graniţelor










    12
    34




    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ă. O excepție de la această regulă este browser de 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 căptușeală. 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:

    1. 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 căptușeală este scris direct pentru celule.

    Să ne uităm la un exemplu:

    Tabel ( chenar: albastru solid de 1 px; restrângere de chenar: separat; spațiere la margine: 5 px; ) td ( chenar: albastru solid de 1 px; umplutură: 10 px; umplutură de 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.

    Am aflat deja că tabelele HTML au cadru, deși browserele nu le afișează implicit. Dar asta nu este tot, fiecare celulă de tabel are și un cadru numit marginea celulei. Dar asta nu este tot, folosind atribute speciale de etichetă

    Puteți modifica distanțele dintre celule și de la celule la cadrul tabelului, precum și umplutura internă de la marginile celulelor la conținutul lor.

    Cadrul de tabel HTML, chenarele celulelor, distanțele dintre ele și umplutura.

    Deci pentru crearea unui cadru Tabelele HTML și limitele celulelor sale este utilizat un singur atribut de etichetă

    - granita. Valoarea atributului este un număr întreg nenegativ (zero în mod implicit) care reprezintă dimensiunea în pixeli. Dar, atenție, dimensiunea se modifică doar la cadrul tabelului, este întotdeauna neschimbată.

    ...

    A schimba distante dintre celule(granițele lor) și de la celule la cadru tabele în tag

    Se aplică atributul de spațiere între celule. Valorile sale pot fi, de asemenea, doar numere care măsoară distanțe în pixeli.

    ...

    Pentru a instala intern umplutură de la marginile celulei la conținutul lor cerut în etichetă

    utilizați atributul cellpadding. Și valorile sale sunt numere care indică dimensiunile pixelilor.

    ...

    Vă rugăm să rețineți că browserele setează în mod implicit valori mici (doi pixeli) pentru spațierea celulelor și spațierea celulelor, așa că pentru a elimina spațierea completă, setați atributele la zero (0).

    Exemplu de chenaruri, cadre și umplutură de tabel HTML

    Borduri de masă, rame și umplutură

    Celula 1.1Celula 1.2Celula 1.3
    Celula 2.1Celula 2.2Celula 2.3
    Celula 3.1Celula 3.2Celula 3.3

    Tabel cu doar chenarele celulelor și chenarele setate:

    Celula 1.1Celula 1.2Celula 1.3
    Celula 2.1Celula 2.2Celula 2.3
    Celula 3.1Celula 3.2Celula 3.3


    Rezultat în browser

    Tabel cu indentări și distanțe modificate:

    Desigur, nu este necesar să desenați un cadru și margini de celule pe tabel pentru a modifica indentările interne și distanțele dintre celule.

    Conform sintaxei HTML, browserele adaugă valorile de spațiere a celulelor și de completare a celulelor la dimensiunile tabelului și celulelor acestuia. De exemplu, dacă setați lățimea celulei la 100 de pixeli și cellpadding="10" - browserele vor adăuga 20 de pixeli la lățime (10 fiecare în stânga și în dreapta) și va deveni 120 pixeli. În general, îți vei da seama pe măsură ce mergi.

    Digresiune de la subiect sau cum să eliminați indentațiile de-a lungul marginilor paginii

    Inițial, toate browserele instalează margini mici de-a lungul marginilor paginii HTML, care sunt adesea inutile, așa că acum veți învăța cum să le eliminați. În general, aceste informații ar trebui plasate la începutul manualului, dar cu greu ți-ar fi de folos acolo.

    La timp, la etichetă Au existat patru atribute care stabileau dimensiunea acestor margini pentru fiecare parte a paginii: marginea superioară (sus), marginea dreaptă (dreapta), marginea inferioară (jos) și marginea stângă (stânga). Acum aceste atribute sunt depășite, așa că vom folosi stiluri (CSS). Deci, puteți modifica distanța marginilor de-a lungul marginilor paginii în mai multe moduri, vă voi arăta două și veți afla despre al treilea dacă vă decideți să învățați CSS.

    Metoda unu. În etichetă specificați atributul de stil cu următoarele valori:

    style="margin:0" >...

    - elimină indentările de pe toate părțile paginii HTML simultan.

    stil= „margin:sus dreapta jos stânga”>...

    - ajustează dimensiunea indentărilor pentru fiecare parte în sensul acelor de ceasornic. De regulă, se folosesc dimensiunile în pixeli, de exemplu: stil= "margin:5px 3px 4px 5px" >...

    Al doilea și mai convenabil mod. În etichetă

    Teme pentru acasă.

    În această lecție, nici nu voi descrie totul în detaliu - doar puncte generale. Pentru a fi complet, uitați-vă la rezultatul exemplului.

    1. Creați trei tabele, fiecare constând dintr-un rând și trei coloane (coloane).
    2. În primul tabel plasați antetul sau „antetul” paginii (a nu se confunda cu „antetul” documentului HTML), în al doilea - meniurile din stânga și din dreapta, precum și conținutul principal (conținut), în al treilea - subsolul sau „subsolul” paginii.
    3. Lățimea primei și ultimei coloane a fiecărui tabel să fie fixă.
    4. Important. Utilizați eticheta doar pentru a crea patru butoane meniu orizontalîn antetul paginii. În alte cazuri, lăsați imaginile să treacă în fundal, iar în a doua celulă ale tabelelor sunt folosite doar culori, iar în primul și ultimul tabel este #99FF99.
    5. Lăsați textul conținutului paginii să fie aliniat pe ambele părți ale celulei tabelului și titlul centrat.
    6. În ceea ce privește distanțele dintre celulele tabelului, precum și indentările celulelor, gândiți-vă singur unde ar trebui să fie eliminate complet și unde ar trebui mărite.

    Buna ziua. Masa ca element are propriile sale caracteristici, care o disting foarte mult de blocurile care sunt mai familiare pentru mulți. Astăzi aș dori să vorbesc despre modul în care distanța dintre celulele tabelului este scrisă în CSS.

    Diferențele cu modelul bloc

    Pentru a seta distanța dintre blocuri, se folosesc de obicei marginile exterioare, dar în cazul celulelor acest lucru nu funcționează. Pot fi specificate indentări interne pentru celule, dar indentările externe nu.

    Aceasta pare a fi o problemă minoră, dar implicit celulele din tabel nu sunt situate aproape una de alta, ci cu mici indentări, care nu sunt întotdeauna necesare. Cum să le eliminați?

    proprietate de spațiere a granițelor

    O proprietate care vine în ajutor este una care este utilizată în CSS special pentru datele tabulare – margine-spațiere. După cum sugerează și numele, definește spațiul liber (marginile) din fiecare celulă.

    Punct important: spațierea marginilor trebuie setată pentru întregul tabel. Adica cam asa:

    Masă(
    Distanța dintre margini: 0;
    }

    Cu această regulă, eliminăm distanța dintre celule și acum sunt apăsate strâns una pe cealaltă. În consecință, puteți seta această distanță în pixeli, dacă este necesar.

    Ar putea fi puțin neobișnuit să aveți o proprietate setată pe un selector de tabel, dar este o caracteristică a tabelului, trebuie doar să o amintiți. Proprietatea nu va funcționa dacă tabelul este, de asemenea, setat la border-collapse: collapse . În acest caz, marginile exterioare ale celulelor sunt eliminate automat și nu este nevoie de spațiere între margini.

    Mod învechit de a seta marginile celulelor

    Anterior pentru aceasta la etichetă

    au adăugat atributul cellspacing, care a determinat indentarea, dar astăzi această metodă nu este recomandată a fi folosită. Acest lucru aglomera codul și nu îndeplinește standardele moderne de dezvoltare web.

    Ideea este că indentarea se referă la aspect element, iar html este complet nepotrivit în acest scop. Standardele precizează cu siguranță că CSS ar trebui să fie responsabil pentru acest lucru.

    După cum puteți vedea, în CSS distanța dintre celulele tabelului poate fi eliminată cu totul sau o puteți controla folosind proprietatea spaţierea graniţelor. Asta e tot pentru azi. Dacă sunteți interesat de subiectul construirii site-ului web, abonați-vă pentru a fi la curent cu noile materiale de pe site.



     

    Citire:



    Utilizarea stilurilor în Excel Cum să vă creați propriul stil nou

    Utilizarea stilurilor în Excel Cum să vă creați propriul stil nou

    Dacă utilizați în mod constant aceleași opțiuni pentru a formata celulele foii de lucru din foile de calcul, ar putea fi o idee bună să creați un stil de formatare...

    Ce erori apar în timpul instalării?

    Ce erori apar în timpul instalării?

    Notă: Programele AutoLISP pot fi executate numai pe versiunea completă a AutoCAD, ele nu funcționează sub AutoCAD LT. (excluzând cazurile de încărcare...

    Statutul social al unei persoane în societate

    Statutul social al unei persoane în societate

    Sugerați ceea ce determină alegerea unei persoane cu privire la statutul său principal. Folosind textul și faptele vieții sociale, faceți două presupuneri și...

    Interpretarea completă a erorilor

    Interpretarea completă a erorilor

    Destul de mulți utilizatori s-au confruntat cu fenomenul ecranului albastru al morții. Ce trebuie să faceți (Windows 7 este cel mai adesea predispus la această problemă)...