Nodarbības mērķis: Iepazīšanās ar tabulas īpašībām un CSS tabulu izkārtojuma principiem

Apskatīsim CSS tabulas pamata rekvizītus

robeža

Īpašums tiek aplūkots vienā un ietver vairākus īpašumus vienlaikus:

• ROBEŽAS STILS
• ROBEŽAS PLATUMS
• ROMA-KRĀSA

Ir arī kolektīvs noteikums:

table.collapse (border-collapse: collapse;) table.separate (border-collapse: atsevišķi;)

Rezultāts:

platums un augstums
(galda augstums un platums)

Vērtības:

Piemērs:

teksta līdzināšana
(horizontālais izlīdzinājums)

Vērtības:

• centrs (centrēts)
• pa kreisi (līdzināts pa kreisi)
• pa labi (līdzināts pa labi)
• taisnot (platums)

vertikāli izlīdzināt
(vertikālais līdzinājums)

Vērtības:

• bāzes līnija (bāzes līnija)
• apakš (kā apakšindekss)
• super (kā augšraksts)
• augšā (augšā)
• vidējais (vidējais)
• apakšā (apakšā)
• % (no rindstarpu augstuma)

Piemērs:

polsterējums
(galda polsterējums)

fona krāsa (fons)
krāsa (teksta krāsa)

CSS tabulas izkārtojums

Ņemot vērā tabulu lielo īpašību skaitu un to dizaina variācijas, tabulas jau sen ir tīmekļa lapu izkārtojuma standarts. Ja padarāt tabulas apmales neredzamas, tad tās atsevišķās šūnas varat izmantot kā atsevišķus lapas blokus: galveni, izvēlni, kājeni utt.

Bet tas nav pilnīgi pareizi, jo katram tagam ir savs mērķis, un tabulām nebija paredzēts izmantot lapas izkārtojumu. Tomēr alternatīvas trūkums lika dizaineriem izmantot šāda veida izkārtojuma metodi.

Tagad ir vēl viens veids - izmantojot slāņus, kas pakāpeniski aizstāja tabulas šādā darbā ar tīmekļa lapu. Tomēr arī mūsdienās daži dizaineri veiksmīgi izmanto galdu izkārtojumu.

Divu kolonnu izklājlapas izkārtojums

Viena no izplatītākajām izkārtojuma metodēm ir divas kolonnas, t.i. lapa ir sadalīta divās daļās.

Parasti kreisajā pusē ir izvēlne un papildu elementi, bet labā puse ir galvenā galvenajam saturam.

Šajā gadījumā kreisās puses platums ir iestatīts uz noteiktu vērtību, t.i. cieta, un labā puse aizņem pārējo lapu.

Šajā gadījumā ir jāiestata visas tabulas kopējais platums (tabulas tags) procentos, izmantojot rekvizītu width (100%), un pirmajai šūnai (td tags) jāiestata platums (arī rekvizīts width) pikseļos. vai procenti.

Piemērs: iestatiet lapas galveno rāmi divās kolonnās: pirmā - ar fiksētu izmēru, otrā - pārējai pārlūkprogrammas zonai. Izpildiet uzdevumu, izmantojot CSS stilus ()

Veiktspēja:

</ galva> <ķermenis> <tabulas id = "maket" cellpacing = "0"> <tr> <td id = "pa kreisi"> 1</td> <td id = "pa labi"> 2</td> </ tr> </ tabula> ...

1

2

...

Rezultāts:

Tagad mēģināsim vizuāli atdalīt divas tabulas kolonnas vienu no otras.

Piemērs: iestatīt atšķirīgu šūnu fonu (lai atdalītu divas kolonnas vienu no otras) un iestatītu attālumu starp kolonnām (atdalītājs)

Veiktspēja:
Pievienosim jaunus stila rekvizītus:

/ * kreisajai šūnai * / td # pa kreisi (platums: 200 pikseļi; fons: #ccc; apmale: 1 px, vienkrāsains melns; / * īslaicīgi apzīmē apmales * /) / * labajai šūnai * / td # pa labi (fons: # fc3; apmale: 1 px, vienkrāsains melns; / * īslaicīgi apzīmē apmales * /) / * atdalītājam * / #razdel (platums: 10 pikseļi; / * Atstarpes starp kolonnām * /)

Kopā:

</ galva> <ķermenis> <tabulas id = "maket" cellpacing = "0"> <tr> <td id = "pa kreisi"> 1</td> <td id = "razdel"> <td id = "pa labi"> 2</td> </ tr> </ tabula>

1

2

Atdalītājam ir pievienota jauna šūna.
Rezultāts:

Varat arī padarīt atdalītāju starp kolonnām mazāk pamanāmu. Lai to izdarītu, mēs izmantosim apmales stilus.

Piemērs: izveidojiet atdalītāju starp tabulas kolonnām, izmantojot blakus esošo šūnu svītroto apmali

Veiktspēja:
Pievienosim jaunus apmales rekvizītus šūnām:

/ * kreisajai šūnai * / td # pa kreisi (platums: 200 pikseļi; fons: #ccc; / * Kreisās kolonnas fona krāsa * / / * jauns * / mala-labā: 1 piks. punktēts # 000; / * Labās svītrotās apmales opcijas * / )

Kopā:

</ galva> <ķermenis> <tabulas id = "maket" cellpacing = "0"> <tr> <td id = "pa kreisi"> 1</td> <td id = "pa labi"> 2</td> </ tr> </ tabula>

1

2

Rezultāts:

Trīs kolonnu izklājlapas izkārtojums

Pastāv fiksēta vai "šķidra" izkārtojuma jēdziens.

Fiksēta izkārtojuma CSS

• Izmantojot fiksēts izkārtojums visas tabulas platums ir iestatīts pikseļos, un tad neatkarīgi no monitora un pārlūkprogrammas loga izšķirtspējas tabulai vienmēr būs vienāds platums.
• Šajā gadījumā ir jānosaka arī atlikušo kolonnu platums.
• Ir iespējams nenorādīt vienas šūnas platumu, tad tas tiks aprēķināts automātiski, pamatojoties uz atlikušo šūnu izmēriem un visu tabulu.

Piemērs: izveidojiet lapas veidni ar trim kolonnām. Izmantojiet fiksētu tabulas izkārtojumu:

• kreisā kolonna - 150 pikseļi;
• vidējā kolonna - 400 pikseļi;

Veiktspēja:

</ galva> <ķermenis> <tabulas id = "maket" cellpacing = "0"> <tr> <td id = "pa kreisi"> 1</td> <td id = "centrālais"> 2</td> <td id = "pa labi"> 3</td> </ tr> </ tabula>

1

2

3

Rezultāts:

Gumijas makets

• Tabulas platums izmantojot "gumijas" dizainu iestatīts procentos no pārlūkprogrammas loga platuma... Tas. mainoties pārlūkprogrammas logam, mainās arī tabulas izmērs.
• Visu šūnu platums var uzstādīt procentos.
• Otra iespēja ir kad dažu šūnu platums ir izveidota procentos, a daži pikseļos.

Svarīgs: Visu kolonnu platumu summai jābūt 100%, neatkarīgi no tabulas platuma.

Piemērs:

• kreisā kolonna - 20%;
• vidējā kolonna - 40%;
• labā kolonna - 40%;

Iestatiet kolonnu fonu un vizuāli atdaliet kolonnas ar apmali.

Veiktspēja:

</ galva> <ķermenis> <tabulas id = "maket" cellpacing = "0"> <tr> <td id = "pa kreisi"> 1</td> <td id = "centrālais"> 2</td> <td id = "pa labi"> 3</td> </ tr> </ tabula>

1

2

3

Rezultāts:

Apsveriet otro iespēju, kad pārlūkprogramma automātiski atlasa centrālās kolonnas platumu; piemērs ir attēls:

Piemērs: izveidojiet lapas veidni ar trim kolonnām. Izmantojiet šķidras tabulas izkārtojumu:

• kreisā kolonna - 150 pikseļi;
• vidējā kolonna - 40%;
• labā kolonna - 200 pikseļi;

Iestatiet kolonnu fonu un vizuāli atdaliet kolonnas ar apmali.

Veiktspēja:

</ galva> <ķermenis> <tabulas id = "maket" cellpacing = "0"> <tr> <td id = "pa kreisi"> 1</td> <td id = "centrālais"> 2</td> <td id = "pa labi"> 3</td> </ tr> </ tabula>

1

2

3

Rezultāts:
Rezultāts būs aptuveni vienāds, tikai "izstiepšanās" notiks centrālās kolonnas dēļ.

Ligzdotas tabulas izmantošana šķidrā izkārtojumā

Ja divu kolonnu platums ir iestatīts procentos, bet trešās - pikseļos, jūs nevarēsit iztikt ar vienu tabulu. Tātad, ja visas tabulas platums ir 100 procenti, pirmā kolonna ir 200 pikseļi, bet pārējās kolonnas ir 20 procenti, tad vienkāršs aprēķins parāda, ka pirmās kolonnas izmērs ir 60 procenti. Šajā gadījumā pārlūkprogramma nepieņems norādīto vērtību pikseļos, un izmērs tiks iestatīts procentos.

• Sākotnējā tabula ir izveidota ar divām šūnām. Tabulas platums ir iestatīts procentos.
• Kreisajai šūnai(pirmā kolonna) platums ir iestatīts pikseļos.
• Labais šūnas platums(pamats citiem skaļruņiem) nav precizēts... Šajā šūnā ir ievietota otra tabula, kas arī sastāv no divām šūnām.
• Ligzdotās tabulas šūnu platums ir iestatīts procentos..
• Iekšējais galda platums ir jāiestata uz 100 procentiem lai šī tabula aizņemtu visu brīvo vietu ārējā tabulā.
• Centrālās un labās kolonnas platums ir attiecināms uz šūnas platumu, nevis pret ārējo tabulu kopumā.

Piemērs: izveidojiet lapas veidni ar trim kolonnām. Izmantojiet šķidru izkārtojumu ar ligzdotu tabulu:

• kreisā kolonna - 150 pikseļi;
• vidējā kolonna - 60%;
• labā kolonna - 40%;

Iestatiet kolonnu fonu.

Veiktspēja:

1 2 3 Šeit ir nepieciešami tagu atribūti cellpadding un cellpacing, lai starp tabulām nebūtu "atstarpes". Rezultāts: Norāda attālumu starp tabulas šūnu apmalēm. Apmales atstarpes atribūts nedarbojas, ja tabulai ir iestatīta malu sakukšana. Sintakse borta atstarpe: vērtība [vērtība] Argumenti Viena vērtība nosaka gan vertikālo, gan horizontālo attālumu starp šūnu robežām. Ja ir divi argumenti, pirmais nosaka horizontālo attālumu, bet otrais nosaka vertikālo attālumu. 1 2 3 4 Šī piemēra rezultāts ir parādīts attēlā. 1. Rīsi. 1. Apmales atstarpes parametra pielietošana Piezīme Ja atzīme tiek pievienots cellspacing parametrs, tad, izmantojot border-spacing style atribūtu, tas netiek ņemts vērā un cellspacing vērtība tiek ignorēta. Izņēmums no šī noteikuma ir Internet Explorer, kas vispār nesaprot robežu atstarpes rekvizītu. Tabulas border-collapse nosaka, kā parādīt apmales ap tabulas šūnām. Šim parametram ir nozīme, kad šūnām ir iestatīts rāmis, tad šūnu krustojumā tiks iegūta dubulta biezuma līnija. Sakļautās vērtības pievienošana liek pārlūkprogrammai parsēt šādas tabulas vietas un noņemt tajā dubultās rindas. tabulas izkārtojums nosaka, kā pārlūkprogrammai jāaprēķina tabulas šūnu augstums un platums, pamatojoties uz tās saturu. border-spacing iestata atstarpi starp tabulas šūnu apmalēm. Apmales atstarpes atribūts nedarbojas, ja tabulai ir iestatīta malu sakukšana. CSS ļauj iestatīt ne tikai tabulas apmales stilu, bet arī atsevišķu šūnu apmaļu stilu. Tā kā katrai šūnai ir savas robežas, robeža starp blakus esošajām šūnām tiek dubultota. Bet ir iespējams apvienot blakus esošo šūnu robežas vienā. Šim nolūkam ir robežu sabrukšanas īpašums. Tas pieņem vērtības: border-collapse: atsevišķi — katrai šūnai ir sava apmale (noklusējums) robeža-sabrukums: sabrukums - vispārējā robeža border-collapse: inherit - vērtība tiek ņemta no vecākelementa Piemēram, izveidosim tabulu un iestatīsim rāmi visu tabulu šūnām, kas būs lapā. Pirmkārt, neko nemainīsim, lai redzētu, kā izskatīsies tabula: Stils: 1 2 3 4 5 6