Svrha lekcije: Poznavanje svojstava tablice i CSS principa izgleda tablice

Pogledajmo osnovna svojstva CSS tablice

granica

Nekretnina se razmatra u jednom i uključuje nekoliko svojstava istovremeno:

• GRANIČNI STIL
• GRANICA-ŠIRINA
• GRANICA-BOJA

Postoji i kolektivno pravilo:

table.collapse (border-kolaps: kolaps;) table.separate (rubni kolaps: odvojeno;)

Rezultat:

širina i visina
(visina i širina stola)

Vrijednosti:

Primjer:

poravnati tekst
(horizontalno poravnanje)

Vrijednosti:

• centar (centrirano)
• lijevo (poravnato lijevo)
• desno (poravnato desno)
• opravdati (širina)

vertikalno poravnati
(vertikalno poravnanje)

Vrijednosti:

• osnovna linija (osnovna linija)
• pod (kao podindeks)
• super (kao nadnaslov)
• gore (gore)
• srednji (srednji)
• donji (donji rub)
• % (od visine proreda)

Primjer:

padding
(podloga za sto)

boja pozadine (pozadina)
boja (boja teksta)

CSS raspored tabele

Zbog velikog broja svojstava tablica i varijacija u njihovom dizajnu, tablice su dugo bile standard za izgled web stranica. Ako ivice tablice učinite nevidljivima, tada možete koristiti njezine pojedinačne ćelije kao zasebne blokove stranice: zaglavlje, izbornik, podnožje itd.

Ali to nije sasvim točno, jer svaka oznaka ima svoju svrhu, a tablice nisu trebale služiti za izgled stranice. Međutim, nedostatak alternative potaknuo je dizajnere da koriste ovu vrstu rasporeda.

Sada postoji još jedan način - korištenje slojeva, koji su postupno zamijenili tablice u ovoj vrsti rada s web stranicom. Međutim, čak i danas neki dizajneri uspješno koriste raspored tablica.

Izgled proračunske tablice u dvije kolone

Jedna od najčešćih metoda rasporeda su dvije kolone, tj. stranica je podeljena na dva dela.

Obično je lijeva strana izbornik i dodatni elementi, a desna je glavna za glavni sadržaj.

U tom slučaju širina lijeve strane postavljena je na određenu vrijednost, tj. teško, a desna strana zauzima ostatak stranice.

U ovom slučaju morate postaviti ukupnu širinu cijele tablice (oznaka tablice) u postocima kroz svojstvo width (100%), a za prvu ćeliju (td oznaka) postaviti širinu (također svojstvo width) u pikselima ili postotak.

Primjer: postavite glavni okvir stranice u dvije kolone: ​​prvu - fiksne veličine, drugu - za ostatak područja preglednika. Izvršite zadatak koristeći CSS stilove ()

Performanse:

</ glava> <tijelo> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "right"> 2</ td> </ tr> </ table> ...

1

2

...

Rezultat:

Pokušajmo sada vizualno odvojiti dvije kolone tablice jedna od druge.

Primjer: postavite različitu pozadinu ćelija (za odvajanje dvije kolone jedna od druge) i postavite udaljenost između stupaca (separator)

Performanse:
Dodajmo nova svojstva stila:

/ * za lijevu ćeliju * ​​/ td # lijevo (širina: 200px; pozadina: #ccc; granica: 1px puna crna; / * privremeno označava granice * /) / * za desnu ćeliju * ​​/ td # desno (pozadina: # fc3; granica: 1px jednobojna crna; / * privremeno označava granice * /) / * za separator * / #razdel (širina: 10px; / * Razmak između stupaca * /)

Zajedno:

</ glava> <tijelo> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "razdel"> <td id = "right"> 2</ td> </ tr> </ table>

1

2

Nova ćelija je dodana za separator.
Rezultat:

Također možete učiniti separator između stupaca manje istaknutim. Da bismo to učinili, koristit ćemo granične stilove.

Primjer: napravite razdjelnik između stupaca tablice pomoću isprekidane ivice susjednih ćelija

Performanse:
Dodajmo nova svojstva obruba za ćelije:

/ * za levu ćeliju * ​​/ td # levo (širina: 200px; pozadina: #ccc; / * Boja pozadine leve kolone * / / * novo * / ivica-desno: 1px isprekidano # 000; / * Desno isprekidane granice granica * / ))

Zajedno:

</ glava> <tijelo> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "right"> 2</ td> </ tr> </ table>

1

2

Rezultat:

Izgled proračunske tablice u tri stupca

Postoji koncept fiksnog ili "fluidnog" izgleda.

CSS sa fiksnim rasporedom

• Upotreba fiksni raspored širina cijele tablice postavljena je u pikselima, i tada će, bez obzira na rezoluciju prozora monitora i preglednika, tablica uvijek imati istu širinu.
• U ovom slučaju širina preostalih stupova također treba biti fiksirana.
• Moguće je ne navesti širinu jedne ćelije, tada će se ona automatski izračunati na osnovu dimenzija preostalih ćelija i cijele tablice.

Primjer: stvorite predložak stranice s tri stupca. Koristite fiksni raspored tablice:

• leva kolona - 150 piksela;
• srednja kolona - 400 piksela;

Performanse:

</ glava> <tijelo> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ table>

1

2

3

Rezultat:

Gumeni model

• Širina stola kada koristite "gumeni" dizajn postavljeno u% širine prozora pregledača... To. kada se promeni prozor pregledača, menja se i veličina tabele.
• Širina svih ćelija može se instalirati u postocima.
• Druga je mogućnost kada širina nekih ćelija je uspostavljeno u postocima, a neke u pikselima.

Bitan: Zbir širina svih stupaca trebao bi biti 100%, bez obzira na širinu tablice.

Primjer:

• lijeva kolona - 20%;
• srednja kolona - 40%;
• desna kolona - 40%;

Postavite pozadinu stupaca i vizualno odvojite stupce obrubom.

Performanse:

</ glava> <tijelo> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ table>

1

2

3

Rezultat:

Razmotrite drugu opciju, kada preglednik automatski bira širinu središnjeg stupca; primjer je slika:

Primjer: stvorite predložak stranice s tri stupca. Koristite fluidni raspored stolova:

• leva kolona - 150 piksela;
• srednja kolona - 40%;
• desna kolona - 200 piksela;

Postavite pozadinu stupaca i vizualno odvojite stupce obrubom.

Performanse:

</ glava> <tijelo> <table id = "maket" cellspacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "central"> 2</ td> <td id = "right"> 3</ td> </ tr> </ table>

1

2

3

Rezultat:
Rezultat će biti približno isti, samo će se "rastezanje" dogoditi zbog središnjeg stupa.

Korištenje ugniježđene tablice u fluidnom rasporedu

Ako je širina dva stupca postavljena u postocima, a treća u pikselima, nećete se moći snaći s jednom tablicom. Dakle, ako je širina cijele tablice 100 posto, prva kolona ima 200 piksela, a preostale kolone 20 posto, tada jednostavna računica pokazuje da je veličina prve kolone 60 posto. U tom slučaju preglednik neće prihvatiti navedenu vrijednost u pikselima, a veličina će se postaviti u postocima.

• Originalna tablica izrađena je s dvije ćelije. Širina tablice postavljena je kao postotak.
• Za lijevu ćeliju(prva kolona) postavljena je širina u pikselima.
• Širina desne ćelije(baza za ostale zvučnike) nije određeno... Unutar ove ćelije umetnuta je druga tablica koja se također sastoji od dvije ćelije.
• Širina ćelija ugniježđene tablice postavljena je kao postotak..
• Unutrašnja širina stola mora biti postavljena na 100 posto tako da ova tablica zauzima sav slobodni prostor u vanjskoj tablici.
• Širine središnjeg i desnog stupca izračunavaju se u odnosu na širinu ćelije, a ne na vanjsku tablicu u cjelini.

Primjer: stvorite predložak stranice s tri stupca. Koristite fluidni raspored sa ugniježđenom tablicom:

• leva kolona - 150 piksela;
• srednja kolona - 60%;
• desna kolona - 40%;

Postavite pozadinu kolona.

Performanse:

1 2 3 Atributi oznake cellpadding i cellpacing ovdje su potrebni, tako da ne postoji "jaz" između tablica. Rezultat: Određuje udaljenost između granica ćelija u tablici. Atribut border-spacing ne radi kada je u tablici postavljeno skupljanje granica na skupljanje. Sintaksa razmak između granica: vrijednost [vrijednost] Arguments Jedna vrijednost postavlja i okomitu i vodoravnu udaljenost između granica ćelije. Ako postoje dva argumenta, prvi definira vodoravnu udaljenost, a drugi vertikalnu udaljenost. 1 2 3 4 Rezultat ovog primjera prikazan je na Sl. 1. Pirinač. 1. Primjena parametra razmaka granica Bilješka Ako oznaka dodaje se parametar ćelijskog razmaka, tada se pri korištenju stila graničnog razmaka ne uzima u obzir, a vrijednost razmaka u ćelijama zanemaruje. Izuzetak od ovog pravila je Internet Explorer, koji uopće ne razumije svojstvo razmaka granica. Tabele border -rupt postavlja način prikaza ivica oko ćelija tablice. Ovaj parametar igra ulogu kada se postavi granica za ćelije, tada će se na spoju ćelija dobiti linija dvostruke debljine. Dodavanje vrijednosti skupljanja tjera preglednik da raščlanjuje takva mjesta u tablici i uklanja dvostruke retke u njoj. layout-table definira kako preglednik treba izračunati visinu i širinu ćelija tablice na temelju njihovog sadržaja. border-spacing postavlja razmak između ivica ćelija u tablici. Atribut border-spacing ne radi ako je tablici postavljeno skupljanje granica da se skupi. CSS vam omogućuje da postavite ne samo stil obruba tablice, već i stil ivica pojedinih ćelija. Budući da svaka ćelija ima svoje granice, granica između susjednih ćelija se udvostručuje. No moguće je kombinirati granice susjednih ćelija u jednu. Za to postoji svojina urušavanja granice. Poprima vrijednosti: border -kolaps: odvojeno - svaka ćelija ima svoju granicu (zadano) granica -urušavanje: urušavanje - opća granica border -kolaps: nasledstvo - vrijednost je preuzeta iz nadređenog elementa Na primjer, napravimo tablicu i postavimo okvir za ćelije svih tablica koje će se nalaziti na stranici. Prvo, nemojmo ništa mijenjati da bismo vidjeli kako će tablica izgledati: Stil: 1 2 3 4 5 6