Tunni eesmärk: Tabeli omaduste ja CSS -i tabeli paigutuse põhimõtete tundmine

Vaatame CSS -i tabeli põhiomadusi

piir

Kinnisvara käsitletakse ühes ja see hõlmab korraga mitut kinnisvara:

• PIIRI-STIIL
• PIIRI-LAIUS
• PIIR-VÄRV

On ka kollektiivne reegel:

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

Tulemus:

laius ja kõrgus
(laua kõrgus ja laius)

Väärtused:

Näide:

teksti joondamine
(horisontaalne joondus)

Väärtused:

• keskel (keskel)
• vasakule (joondatud vasakule)
• parem (joondatud paremale)
• õigustama (laius)

vertikaalselt joondada
(vertikaalne joondus)

Väärtused:

• lähtejoon (lähtejoon)
• alam (alamindeksina)
• super (ülaindeksina)
• üleval (üleval)
• keskel (keskel)
• alumine (alumine serv)
• % (reavahe kõrgusest)

Näide:

polsterdus
(laudpolster)

taustavärv (taust)
värv (teksti värv)

CSS tabeli paigutus

Tabelite omaduste suure hulga ja nende kujunduse variatsioonide tõttu on tabelid juba pikka aega olnud veebilehtede paigutuse standardiks. Kui muudate tabeli äärised nähtamatuks, saate selle üksikuid lahtreid kasutada lehe eraldi plokkidena: päis, menüü, jalus jne.

Kuid see pole täiesti õige, sest igal sildil on oma eesmärk ja tabeleid ei pidanud lehe paigutuse jaoks kasutama. Kuid alternatiivi puudumine ajendas disainereid kasutama seda tüüpi paigutusmeetodit.

Nüüd on veel üks viis - kihtide kasutamine, mis järk -järgult asendasid tabelid sellises töötamises veebilehega. Kuid isegi tänapäeval kasutavad mõned disainerid edukalt laua kujundust.

Kahe veeruga arvutustabeli paigutus

Üks levinumaid paigutusmeetodeid on kaks veergu, s.t. leht on jagatud kaheks osaks.

Tavaliselt on vasak pool menüü ja täiendavad elemendid ning parem pool on põhisisu jaoks peamine.

Sellisel juhul on vasaku külje laius seatud teatud väärtusele, s.t. kõvasti ja parem pool võtab ülejäänud lehe.

Sel juhul peate määrama kogu tabeli (tabelisildi) kogulaiuse protsendi ulatuses atribuudi laius (100%) abil ja esimese lahtri (td -märgend) jaoks laiuse (ka laiuse atribuudi) pikslites või protsenti.

Näide: seadke lehe põhiraam kahte veergu: esimene - kindla suurusega, teine ​​- ülejäänud brauseriala jaoks. Tehke ülesanne CSS -stiilide abil ()

Jõudlus:

</ pea> <keha> <tabeli id ​​= "maket" cellpacing = "0"> <tr> <td id = "vasak"> 1</ td> <td id = "õige"> 2</ td> </ tr> </ tabel> ...

1

2

...

Tulemus:

Nüüd proovime tabeli kahte veergu visuaalselt üksteisest eraldada.

Näide: määrake lahtrite erinev taust (kahe veeru eraldamiseks) ja veergude vahekaugus (eraldaja)

Jõudlus:
Lisame uued stiiliomadused:

/ * vasaku lahtri jaoks * / td # vasak (laius: 200 pikslit; taust: #ccc; ääris: 1 pikslit must; / * tähistavad ajutiselt piire * /) / * parema lahtri jaoks * / td # parem (taust: # fc3; ääris: 1 pikslit must; / * tähistavad ajutiselt piire * /) / * eraldaja jaoks * / # razdel (laius: 10 pikslit; / * Veergude vahekaugus * /)

Koos:

</ pea> <keha> <tabeli id ​​= "maket" cellpacing = "0"> <tr> <td id = "vasak"> 1</ td> <td id = "razdel"> <td id = "õige"> 2</ td> </ tr> </ tabel>

1

2

Eraldaja jaoks on lisatud uus lahter.
Tulemus:

Samuti saate veergude vahelise eraldaja vähem silmatorkavaks muuta. Selleks kasutame äärisstiile.

Näide: tehke tabelite veergude vahel eraldaja, kasutades külgnevate lahtrite kriipsjoont

Jõudlus:
Lisame lahtritele uued äärisomadused:

/ * vasaku lahtri jaoks * / td # vasak (laius: 200 pikslit; taust: #ccc; / * Vasaku veeru taustavärv * / / * uus * / ääris-parem: 1 pikslit katkendlik # 000; / * Parempoolse katkendliku äärise valikud * / )

Koos:

</ pea> <keha> <tabeli id ​​= "maket" cellpacing = "0"> <tr> <td id = "vasak"> 1</ td> <td id = "õige"> 2</ td> </ tr> </ tabel>

1

2

Tulemus:

Kolme veeruga arvutustabeli paigutus

On olemas fikseeritud või "vedeliku" paigutuse kontseptsioon.

Fikseeritud paigutusega CSS

• Kasutades fikseeritud paigutus kogu tabeli laius on määratud pikslites, ja siis, sõltumata monitori ja brauseriakna eraldusvõimest, on tabel alati sama lai.
• Sel juhul fikseerida tuleks ka ülejäänud veergude laius.
• Võimalik on ühe lahtri laiust mitte määrata, siis arvutatakse see automaatselt ülejäänud lahtrite ja kogu tabeli mõõtmete alusel.

Näide: looge kolme veeruga lehe mall. Kasutage fikseeritud tabeli paigutust:

• vasak veerg - 150 pikslit;
• keskmine veerg - 400 pikslit;

Jõudlus:

</ pea> <keha> <tabeli id ​​= "maket" cellpacing = "0"> <tr> <td id = "vasak"> 1</ td> <td id = "keskne"> 2</ td> <td id = "õige"> 3</ td> </ tr> </ tabel>

1

2

3

Tulemus:

Kummist makett

• Tabeli laius"kummist" disaini kasutamisel seadistatud% brauseriakna laiusest... See. kui brauseriaken muutub, muutub ka tabeli suurus.
• Kõigi lahtrite laius saab paigaldada protsentides.
• Teine võimalus on millal mõne lahtri laius on kehtestatud protsentides, a mõni pikslites.

Tähtis: Kõigi veergude laiuste summa peaks sõltumata tabeli laiusest olema 100%.

Näide:

• vasak veerg - 20%;
• keskmine veerg - 40%;
• parem veerg - 40%;

Määrake veergude taust ja eraldage veerud visuaalselt äärisega.

Jõudlus:

</ pea> <keha> <tabeli id ​​= "maket" cellpacing = "0"> <tr> <td id = "vasak"> 1</ td> <td id = "keskne"> 2</ td> <td id = "õige"> 3</ td> </ tr> </ tabel>

1

2

3

Tulemus:

Mõelge teisele võimalusele, kui brauser valib automaatselt keskmise veeru laiuse; näide on pilt:

Näide: looge kolme veeruga lehe mall. Kasutage sujuva laua paigutust:

• vasak veerg - 150 pikslit;
• keskmine veerg - 40%;
• parem veerg - 200 pikslit;

Määrake veergude taust ja eraldage veerud visuaalselt äärisega.

Jõudlus:

</ pea> <keha> <tabeli id ​​= "maket" cellpacing = "0"> <tr> <td id = "vasak"> 1</ td> <td id = "keskne"> 2</ td> <td id = "õige"> 3</ td> </ tr> </ tabel>

1

2

3

Tulemus:
Tulemus on ligikaudu sama, ainult "venitamine" toimub keskveeru tõttu.

Pesastatud tabeli kasutamine sujuva paigutusega

Kui kahe veeru laius on määratud protsentides ja kolmanda - pikslites, ei saa te ühe tabeliga hakkama. Niisiis, kui kogu tabeli laius on 100 protsenti, esimene veerg on 200 pikslit ja ülejäänud veerud 20 protsenti, siis lihtne arvutus näitab, et esimese veeru suurus on 60 protsenti. Sel juhul ei aktsepteeri brauser määratud väärtust pikslites ja suurus määratakse protsentides.

• Algne tabel on loodud kahe lahtriga. Tabeli laius on määratud protsendina.
• Vasaku raku jaoks(esimese veeru) laius on määratud pikslites.
• Lahtri õige laius(teiste kõlarite alus) täpsustamata... Sellesse lahtrisse sisestatakse teine ​​tabel, mis koosneb samuti kahest lahtrist.
• Pesastatud tabeli lahtrite laius määratakse protsendina..
• Sisemine laua laius peab olema 100 % nii et see laud võtab kogu vaba ruumi välislaual.
• Keskmise ja parema veeru laius arvutatakse lahtri laiuse, mitte välimise tabeli tervikuna.

Näide: looge kolme veeruga lehe mall. Kasutage pesastatud tabeliga vedeliku paigutust:

• vasak veerg - 150 pikslit;
• keskmine veerg - 60%;
• parem veerg - 40%;

Määrake veergude taust.

Jõudlus:

1 2 3 Sildi atribuudid cellpadding ja cellpacing on siin kohustuslikud, et tabelite vahel ei oleks tühikut. Tulemus: Määrab tabeli lahtrite piiride vahelise kauguse. Atribuut Border-Spacing ei tööta, kui tabelis on ahendamiseks määratud border-collapse. Süntaks äärisevahe: väärtus [väärtus] Argumendid Üks väärtus määrab nii vertikaalse kui ka horisontaalse kauguse lahtri piiride vahel. Kui on kaks argumenti, määratleb esimene horisontaalse kauguse ja teine ​​vertikaalse kauguse. 1 2 3 4 Selle näite tulemus on näidatud joonisel fig. 1. Riis. 1. Piirivahe parameetri rakendamine Märge Kui silt lisatakse parameeter cellpacing, siis atribuudi border-spacing kasutamisel seda arvesse ei võeta ja lahtrite vahe väärtust eiratakse. Sellest reeglist on erandiks Internet Explorer, mis ei mõista piiridevahelist atribuuti üldse. Tabelid border-collapse määrab, kuidas kuvada ääriseid tabeli lahtrite ümber. See parameeter mängib rolli, kui lahtritele on seatud piir, siis saadakse kahekordse paksusega joon lahtrite ristmikul. Ahendamise väärtuse lisamine sunnib brauserit selliseid kohti tabelis analüüsima ja topeltjooned sealt eemaldama. tabeli paigutus määratleb, kuidas brauser peaks selle sisu põhjal arvutama tabeli lahtrite kõrguse ja laiuse. border-spacing määrab tabeli lahtrite piiride vahekauguse. Atribuut Border-Spacing ei tööta, kui tabelis on ahendamiseks määratud border-collapse. CSS võimaldab määrata mitte ainult tabeli ääristiili, vaid ka üksikute lahtrite piiride stiili. Kuna igal lahtril on oma piirid, kahekordistub piir külgnevate lahtrite vahel. Kuid naaberrakkude piire on võimalik ühendada üheks. Selleks on olemas piirikollaps. See võtab väärtused: border -collapse: eraldi - igal lahtril on oma piir (vaikimisi) piir -kollaps: kollaps - üldine piir border -collapse: pärida - väärtus võetakse põhielemendilt Näiteks loome tabeli ja seadistame raami kõigi lehel olevate tabelite lahtritele. Esiteks, ärgem muutkem midagi, et näha, kuidas tabel välja näeb: Stiil: 1 2 3 4 5 6