Kako napraviti granice u tablici css

Zadani stilovi preglednika prikazuju tablicu i njezine ćelije bez vidljivih obruba ili pozadine, a ćelije unutar tablice nisu jedna uz drugu. Pomoću CSS stilova možete lijepo dizajnirati tablicu u skladu s njezinim sadržajem.

Tablice s razmacima između redaka pomažu vam da se usredotočite na povezane informacije koje se nalaze u istom retku tablice, ali u susjednim ćelijama. Kako biste odvojili tekst od slike, stavite je u drugu ćeliju, dok spajate dvije ćelije u zaglavlju tablice Model i uklonite desnu granicu između ćelija.

HTML označavanje

CSS stilovi

stol (
razmak obruba: 0 10px;
obitelj fontova: "Open Sans", sans-serif;
težina fonta: podebljano;
}
th (
ispuna: 10px 20px;
pozadina: #56433D;
boja: #F9C941;
granica-desno: 2px puna;
veličina fonta: 0,9em;
}
th:prvo dijete (
poravnanje teksta: lijevo;
}
th:posljednje dijete (
granica-desno: nema;
}
td(
okomito poravnanje: sredina;
ispuna: 10px;
veličina fonta: 14px;
poravnanje teksta: središte;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
granica-desno: 2 px puna #56433D;
}
td: prvo dijete (
granica-lijevo: 2px puna #56433D;
granica-desno: nema;
}
td:nth-child(2)(
poravnanje teksta: lijevo;
}

Koristeći ovu tehniku, možete učinkovito dizajnirati stol koristeći kontrastne boje, koji će se skladno uklopiti u shemu boja vaše stranice.

HTML označavanje

CSS stilovi

stol (

veličina fonta: 14px;
border-collapse: kolaps;
poravnanje teksta: središte;
}
th, td: prvo dijete (
pozadina: #AFCDE7;
boja: bijela;
ispuna: 10px 20px;
}
th, td (
rubni stil: čvrsta;
border-width: 0 1px 1px 0;
boja obruba: bijela;
}
td(
pozadina: #D8E6F3;
}

poravnanje teksta: lijevo;
}

Zahvaljujući dodatku svojstva border-radius specifikaciji CSS3, sada je moguće zaokružiti kutove tablice bez korištenja pozadinske slike. Da biste postigli ovaj učinak, morate zaokružiti kutove odgovarajućih ćelija.

HTML označavanje
- slično primjeru 2.

CSS stilovi

stol (
obitelj-fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
veličina fonta: 14px;
rubni radijus: 10px;
granični razmak: 0;
poravnanje teksta: središte;
}
th (
pozadina: #BCEBDD;
boja: bijela;
tekst-sjena: 0 1px 1px #2D2020;
ispuna: 10px 20px;
}
th, td (
rubni stil: čvrsta;
border-width: 0 1px 1px 0;
boja obruba: bijela;
}
th:prvo-dijete, td:prvo-dijete (
poravnanje teksta: lijevo;
}
th:prvo dijete (

}
th:posljednje dijete (

granica-desno: nema;
}
td(
ispuna: 10px 20px;
pozadina: #F8E391;
}
tr:zadnje-dijete td:prvo-dijete (
radijus granice: 0 0 0 10px;
}
tr:zadnje-dijete td:zadnje-dijete (
radijus granice: 0 0 10px 0;
}
tr td:posljednje dijete (
granica-desno: nema;
}

4. Tablica s odvojenim ćelijama

HTML označavanje

- slično primjeru 2.

CSS stilovi

stol (
obitelj-fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
poravnanje teksta: lijevo;
border-collapse: odvojeno;
rubni razmak: 5px;
pozadina: #ECE9E0;
boja: #656665;
rub: 16px puni #ECE9E0;
rubni radijus: 20px;
}
th (
veličina fonta: 18px;
ispuna: 10px;
}
td(
pozadina: #F5D7BF;
ispuna: 10px;
}

HTML označavanje

CSS stilovi

stol (
obitelj-fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
poravnanje teksta: središte;
border-collapse: kolaps;
rubni razmak: 5px;
pozadina: #E1E3E0;
rubni radijus: 20px;
}
th (
veličina fonta: 22px;
težina slova: 300;
ispuna: 12px 10px;

boja: #F56433;
}
tbody tr:nth-child(2) (
rub-bottom: 2px solid #F56433;
}
td(
ispuna: 10px;
boja: #8D8173;
}

HTML označavanje

CSS stilovi

stol (
obitelj-fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
veličina fonta: 14px;
poravnanje teksta: lijevo;
border-collapse: kolaps;
rubni radijus: 20px;
okvir-sjena: 0 0 0 10px #F2906B;
boja: #452F21;
}
th (
ispuna: 10px 8px;
pozadina: bijela;
}
tablica th:prvo dijete (
border-top-left-radius: 20px;
}
tablica th:last-child (
border-top-right-radius: 20px;
}
td(
border-top: 10px solid #F2906B;
ispuna: 8px;
pozadina: bijela;
}
tablica td:prvo dijete (
rub-bottom-left-radius: 20px;
}
tablica td:posljednje dijete (
granica-dolje-desno-radijus: 20px;
}

Okomita zebra u dizajnu tablice omogućit će vam da naglasite stupce, a učinak kada lebdite iznad retka dodat će atraktivnost takvoj tablici.

HTML označavanje

CSS stilovi

stol (
granični razmak: 0;
prazne ćelije: sakriti;
}
td(
ispuna: 10px 20px;
poravnanje teksta: središte;

prijelaz: svih 0,5s linearno;
}
td: prvo dijete (
poravnanje teksta: lijevo;
boja: #3D3511;
težina fonta: podebljano;
}
th (
ispuna: 10px 20px;
boja: #3D3511;
rub-bottom: 1px solid #F4EEE8;
border-top-left-radius: 10px;
border-top-desno-radius: 10px;
}
td:nth-child(parni) (
pozadina: #F6D27E;
}
td:nth-child(odd) (
pozadina: #D1C7BF;
}
th:nth-child(parni) (
pozadina: #F6D27E;
}
th:nth-child(odd) (
pozadina: #D1C7BF;
}
.okrugli vrh (
border-top-left-radius: 5px;
}
.okruglo dno (
border-bottom-left-radius: 5px;
}
tr: lebdite td(
pozadina: #D1C7BF;
težina fonta: podebljano;
}

HTML označavanje

CSS stilovi

stol (
obitelj-fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
border-collapse: kolaps;
boja: #686461;
}
naslov (
ispuna: 10px;
boja: bijela;
pozadina: #8FD4C1;
veličina fonta: 18px;
poravnanje teksta: lijevo;
težina fonta: podebljano;
}
th (
rub-bottom: 3px solid #B9B29F;
ispuna: 10px;
poravnanje teksta: lijevo;
}
td(
ispuna: 10px;
}
tr:nth-child(odd) (
pozadina: bijela;
}
tr:nth-child(even) (
pozadina: #E8E6D1;
}

HTML označavanje

CSS stilovi

Table_col(
obitelj-fontova: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
veličina fonta: 14px;
širina: 660px;
pozadina: bijela;
poravnanje teksta: lijevo;
border-collapse: kolaps;
boja: #3E4347;
}
.table_col th:prvo dijete, .table_col td:prvo dijete (
boja: #F5F6F6;
granica-lijevo: nema;
}
.table_col th(
težina fonta: normalna;
rub-bottom: 2px solid #F5E1A6;


ispuna: 8px 10px;
}
.table_col td(
granica-desno: 20px jednobojna bijela;
obrub-lijevo: 20px puna bijela;
ispuna: 12px 10px;
boja: #8b8e91;
}

HTML označavanje

CSS stilovi

table_blur(
pozadina: #f5ffff;
border-collapse: kolaps;
poravnanje teksta: lijevo;
}
.table_blur th (
border-top: 1px solid #777777;

box-shadow: umetnuto 0 1px 0 #999999, umetnuto 0 -1px 0 #999999;
pozadina: linearni gradijent (#9595b6, #5a567f);
boja: bijela;
ispuna: 10px 15px;
položaj: relativan;
}
.table_blur th:after (
sadržaj: "";
prikaz: blok;
pozicija: apsolutna;
lijevo: 0;
vrh: 25%;
visina: 25%;
širina: 100%;
pozadina: linearni gradijent(rgba(255, 255, 255, 0), rgba(255,255,255,.08));
}
.table_blur tr:nth-child(odd) (
pozadina: #ebf3f9;
}
.table_blur th:prvo dijete (
obrub-lijevo: 1px puni #777777;
rub-bottom: 1px solid #777777;
box-shadow: umetnuti 1px 1px 0 #999999, umetnuti 0 -1px 0 #999999;
}
.table_blur th:last-child (
obrub-desno: 1px solid #777777;
rub-bottom: 1px solid #777777;
box-shadow: umetnuto -1px 1px 0 #999999, umetnuto 0 -1px 0 #999999;
}
.table_blur td (
rub: 1px puni #e3eef7;
ispuna: 10px 15px;
položaj: relativan;
prijelaz: svih 0,5s lakoća;
}
.table_blur tbody:hover td (
boja: prozirna;
tekst-sjena: 0 0 3px #a09f9d;
}
.table_blur tbody: lebdite tr: lebdite td (
boja: #444444;
text-shadow: nema;
}

Tablice su široko korišten element za prezentiranje različitih podataka u prezentacijama, predavanjima, letcima i dr. Zbog svoje jasnoće, svestranosti i jednostavnosti, tablice se također široko koriste na web stranicama kako bi čitatelju što bolje prenijele potreban materijal. Dodavanjem pune snage stilova u tablice, možete vrlo uspješno uklopiti tablice u dizajn web stranice i prezentirati tablične podatke jasno i lijepo.

Širina stola

Prema zadanim postavkama širinu tablice postavlja sam preglednik na temelju količine tabličnih podataka u njoj. Ako u ćelijama ima puno teksta, tada će tablica zauzeti cijelu širinu koja joj je dostupna, a ako nema dovoljno teksta, tada će se širina tablice automatski smanjiti. Ako na stranici postoji nekoliko tablica, njihove različite širine ponekad izgledaju nemarno. Stoga je bolje eksplicitno postaviti širinu tablice u postocima, pikselima, em ili bilo kojim drugim CSS jedinicama, kao što je prikazano u primjeru 1.

Primjer 1: Širina tablice u postocima

Tablica (širina: 100%;) .tbl-srednja (širina: 60%;) .tbl-mala (širina: 200px;)

U ovom primjeru širina od 100% primjenjuje se na sve tablice. Opet, klase pomažu postaviti širinu za odabrane tablice pomoću prethodno stvorene klase. Da biste tablici dali širinu od 200 piksela, morate dodati elementu

Poravnavanje stolova

U početku se bilo koja tablica nalazi na lijevom rubu prozora preglednika. Možete ga poravnati prema sredini, osim ako stol ne zauzima cijelo dostupno područje, drugim riječima, manje od 100%. Da biste to učinili, dodajte uvlake u stil tablice pomoću svojstva margine s vrijednošću auto, kao što je prikazano u primjeru 2.

Primjer 2: Poravnavanje tablice s koristeći marginu

U ovom primjeru sve su tablice na stranici postavljene na središnje poravnanje.

Boja pozadine

Boja pozadine svih ćelija tablice u isto vrijeme postavlja se kroz svojstvo pozadine, koje se primjenjuje na selektor tablice. U ovom slučaju, trebali biste zapamtiti pravila za korištenje stilova, posebno nasljeđivanje svojstava elementa. Ako u isto vrijeme kada i tablica postavite boju za td ili th selektor, ona će biti postavljena kao pozadina (primjer 3).

Primjer 3: Boja pozadine

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Promijenite boju pozadine

Ako želimo napraviti zebrasti uzorak, što je naziv za izmjenične linije različitih boja, tada bismo trebali upotrijebiti pseudo-klasu :nth-child, dodajući je tr selektoru. Kako bi se zebra protezala samo do tijela tablice, a ne do njenog zaglavlja, odvojimo ih jednu od druge pomoću elemenata I (primjer 4).

Primjer 4: Stvaranje zebre

Rezultat ovog primjera prikazan je na sl. 2.

Riža. 2. Zebra

Parna vrijednost selektora :nth-child primjenjuje stil na sve retke s parnim brojevima i postavlja njihovu boju pozadine. Također ga možete promijeniti u neparan, tada će neparni redovi biti označeni sivom bojom.

Slično, stupci, a ne retci, označeni su bojom; za to biste trebali koristiti selektor tbody td:nth-child(even).

Margine unutar ćelija

Margina je udaljenost između granice ćelije i njenog sadržaja. Bez margina, tekst u tablici se "lijepi" za okvir, čime se otežava njegova percepcija, ali dodavanjem margina poboljšava se čitljivost teksta. U tu se svrhu koristi svojstvo padding style, koje radi s td ili th selektorom, kao što je prikazano gore u primjerima 3 i 4. Obično se specificira jedna vrijednost koja zatim specificira prazan prostor oko sadržaja ćelije na sve strane odjednom. Dvije vrijednosti se pišu kada trebate postaviti različita polja okomito (prva vrijednost) i vodoravno (druga vrijednost).

Udaljenost između ćelija

Postoji mali prazan prostor između ćelija, koji nije vidljiv dok ne postavite rub za ćelije ili boja pozadine. Ovaj razmak je u početku 2 px i može se promijeniti pomoću svojstva border-spacing dodavanjem u birač tablice (Primjer 5).

Primjer 5: Korištenje graničnog razmaka

Tablica ( border-spacing: 3px; /* Razmak između ćelija */ ) thead th ( pozadina: #e08156; /* Boja pozadine zaglavlja */ boja: #333; /* Boja teksta */ ) td, th ( padding: 5px ; /* Polja u ćelijama */ pozadina: #4c715b; /* Boja pozadine ćelija */ boja: #f5e8d0;

Dodavanjem ovog stila bilo kojoj tablici dobivamo rezultat prikazan na sl. 3.

Riža. 3. Prikaz tablice s razmakom između ćelija

Ako se svojstvo border-collapse doda tablici s vrijednošću collapse, tada se border-spacing zanemaruje jer više nema udaljenosti između ćelija.

Obrubi i okviri

Kako bi se jasno odvojio sadržaj jedne ćelije od druge, ćelijama se dodaju granice. Oni se stvaraju svojstvom stila obruba koje se primjenjuje na elemente ( ili ). Međutim, ovdje nas čekaju zamke. Budući da se za svaku ćeliju stvara okvir, dobiva se obrub dvostruke debljine na mjestu dodira ćelija. Postoji nekoliko načina za uklanjanje ove značajke. Najjednostavnije je koristiti svojstvo border-collapse s vrijednošću collapse. Njegova je zadaća pratiti kontakt linija i umjesto dvostruke granice prikazati jednu. Trebate samo dodati ovo svojstvo u selektor tablice, a onda će on sve učiniti sam (primjer 6).

Primjer 6: Korištenje svojstva border-collapse prilikom stvaranja obruba tablice

Razlika između rubova tablice sa i bez svojstva border-collapse prikazana je na sl. 4.

Riža. 4. Prikaz tablice kada se koristi obrub

Na sl. Slika 4a prikazuje zadani okvir tablice. Imajte na umu da unutar tablice sve linije imaju dvostruku debljinu. Dodavanje border-collapse uklanja ovu značajku, a debljina svih linija postaje ista (slika 4b).

Linije ne moraju biti na svim stranama ćelija, ali mogu biti dizajnirane tako da odvajaju jedan red ili stupac od drugog. Da bismo to učinili, koristimo border-bottom, border-left i druga slična svojstva. Primjena obruba na elemente , , I To nije moguće, pa ih dodajemo u tablicu i td selektor (primjer 7).

Primjer 7. Crte između redaka

Rezultat ovog primjera prikazan je na sl. 5.

Riža. 5. Tablica s vodoravnim linijama

Prema zadanim postavkama, tekst u ćeliji tablice poravnat je lijevo i središnje. Izuzetak je element , definira ćeliju zaglavlja u kojoj je poravnanje centrirano. Za promjenu metode poravnanja upotrijebite svojstvo stila poravnanja teksta (primjer 8).

Primjer 8: Horizontalno poravnavanje sadržaja ćelije

U ovom primjeru sadržaj je poravnat ulijevo, a sadržaj - u središtu. Rezultat primjera prikazan je u nastavku (slika 6).

Riža. 6. Poravnanje teksta u ćelijama

Okomito poravnanje u ćeliji uvijek je centrirano osim ako nije drugačije navedeno. Ovo nije uvijek zgodno, posebno za tablice čiji sadržaj ćelija varira u visini. U ovom slučaju, poravnanje je postavljeno na gornji rub ćelije pomoću svojstva vertikalnog poravnanja s vrijednošću top, kao što je prikazano u primjeru 9.

Primjer 9. Okomito poravnavanje sadržaja ćelije

U ovom primjeru, tekst je poravnat s gornjim rubom. Rezultat primjera prikazan je na sl. 7.

Svrha lekcije: Uvod u svojstva tablice i principe CSS izgleda tablice

Pogledajmo osnovna svojstva CSS tablice

granica

Imovina se smatra jednom i uključuje nekoliko nekretnina istovremeno:

• BORDURNI STIL
• ŠIRINA OBRUBE
• OBRUB-BOJA

Postoji i opće pravilo:

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

Proizlaziti:

širina i visina
(visina i širina stola)

Vrijednosti:

Primjer:

poravnanje teksta
(vodoravno poravnanje)

Vrijednosti:

• centar (centar)
• lijevo (uz lijevi rub)
• desno (desni rub)
• poravnati (širina)

okomito poravnati
(okomito poravnanje)

Vrijednosti:

• osnovna linija (duž osnovne linije)
• pod (kao podindeks)
• super (poput superindeksa)
• vrh (uz gornji rub)
• sredina (u sredini)
• dno (uz donji rub)
• % (visine proreda)

Primjer:

podstava
(uvlake u tablici)

boja pozadine (pozadina)
boja (boja teksta)

Izgled CSS tablice

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

Ali to nije sasvim točno, jer svaki tag ima svoju svrhu, a tablice nisu trebale služiti za izgled stranice. Međutim, nedostatak alternative potaknuo je dizajnere da koriste ovu posebnu metodu izgleda.

Sada postoji još jedan način - korištenje slojeva, koji su postupno zamijenili tablice u ovoj vrsti rada s web stranicom. Međutim, čak iu naše vrijeme, neki dizajneri uspješno koriste tablični izgled.

Tablični izgled s dva stupca

Jedna od najčešćih metoda rasporeda su dva stupca, tj. Stranica je podijeljena u dva dijela.

Primjer: postavite glavni okvir stranice iz dva stupca: prvi - s fiksnom veličinom, drugi - za preostalo područje preglednika. Dovršite zadatak koristeći CSS stilove ()

Proizlaziti:

Primjer: postaviti drugačija pozadinaćelije (za odvajanje dva stupca jedan od drugog) i postavljanje udaljenosti između stupaca (razdjelnik)

/* za lijevu ćeliju */ td#left( width:200px; background: #ccc; border:1px solid black; /* privremeno označi granice */ ) /* za desnu ćeliju */ td#right( background: #fc3; border:1px solid black; /* privremeno označite granice */ ) /* za razdjelnik */ #razdel( width: 10px; /* Udaljenost između stupaca */)

Zajedno:

Za separator je dodana nova ćelija.
Proizlaziti:

Primjer: napravite razdjelnik između stupaca tablice pomoću točkaste linije koja obrubljuje susjedne ćelije

/* za lijevu ćeliju */ td#left( width:200px; background: #ccc; /* Boja pozadine lijevog stupca */ /* novo */ border-right: 1px isprekidano #000; /* Opcije desnog isprekidanog obruba * / )

Zajedno:

Proizlaziti:

Izgled tablice s tri stupca

Postoji koncept fiksnog ili "fluidnog" izgleda.

Fiksni CSS izgled

• Korištenje fiksni raspored širina cijele tablice navedena je u pikselima, i tada će, bez obzira na rezoluciju monitora i prozora preglednika, tablica uvijek imati istu širinu.
• U ovom slučaju Širina preostalih stupaca također treba biti fiksna.
• Ne možete odrediti širinu jedne ćelije, tada će se automatski izračunati na temelju veličina preostalih ćelija i cijele tablice.

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

• lijevi stupac - 150 piksela;
• srednji stupac - 400 piksela;

Proizlaziti:

Gumeni model

• Širina stola kada se koristi "gumeni" dizajn postaviti kao % širine prozora preglednika. Da. Kada se promijeni prozor preglednika, mijenja se i veličina tablice.
• Širina svih ćelija može se instalirati u postocima.
• Druga opcija je kada širina nekih ćelija je instaliran u postocima, A neke - u pikselima.

Važno: Zbroj širina svih stupaca treba biti 100%, bez obzira na širinu tablice.

Primjer:

• lijevi stupac - 20%;
• srednji stupac - 40%;
• desni stupac - 40%;

Postavite pozadinu za stupce i vizualno ih odvojite rubom.

Izvođenje:

Proizlaziti:

Razmotrimo drugu opciju, kada preglednik automatski odabire širinu središnjeg stupca; Primjer je sljedeća slika:

Primjer: izradite predložak stranice s tri stupca. Koristite fluidni raspored tablice:

• lijevi stupac - 150 piksela;
• srednji stupac - 40%;
• desni stupac - 200 piksela;

Postavite pozadinu za stupce i vizualno ih odvojite rubom.

Proizlaziti:
Rezultat će biti približno isti, samo će se "istezanje" dogoditi zbog središnjeg stupca.

Korištenje ugniježđene tablice u fluidnom rasporedu

Ako je širina dva stupca postavljena u postocima, a trećeg u pikselima, nećete moći proći samo s jednom tablicom. Dakle, ako je širina cijele tablice 100 posto, prvi stupac 200 piksela, a preostali stupci 20 posto, tada jednostavna računica pokazuje da je veličina prvog stupca 60 posto. U tom slučaju preglednik neće prihvatiti navedenu vrijednost u pikselima, a veličina će biti postavljena kao postotak.

• Izvorna tablica stvorena je s dvije ćelije. Širina tablice postavljena je u postocima.
• Za lijevu ćeliju(prvi stupac) širina je postavljena u pikselima.
• Širina desne ćelije(osnova za druge stupce) nije specificirano. Druga tablica, koja se također sastoji od dvije ćelije, umetnuta je unutar ove ćelije.
• Za ugniježđene ćelije tablice, širina je postavljena kao postotak.
• Širina unutarnje tablice trebala bi biti postavljena na 100 posto tako da ova tablica zauzima sav slobodan prostor u vanjskoj tablici.
• Širina središnjeg i desnog stupca izračunava se u odnosu na širinu ćelije, a ne vanjske tablice kao cjeline.

Primjer: izradite predložak stranice s tri stupca. Koristi fluidni raspored s ugniježđenom tablicom:

• lijevi stupac - 150 piksela;
• srednji stupac - 60%;
• desni stupac - 40%;

Postavite pozadinu za stupce.

Izvođenje:

1 2 3 Atributi oznake cellpadding i cellpacing ovdje su neophodni kako bi se osiguralo da između tablica nema "praznine". Proizlaziti: Svrha lekcije: Uvod u svojstva tablice i principe CSS izgleda tablice Pogledajmo osnovna svojstva CSS tablice granica Imovina se smatra jednom i uključuje nekoliko nekretnina istovremeno: BORDURNI STIL ŠIRINA OBRUBE OBRUB-BOJA Postoji i opće pravilo: table.collapse( border-collapse:collapse; ) table.separate( border-collapse:separate; ) Proizlaziti: širina i visina (visina i širina stola) Vrijednosti: Primjer: poravnanje teksta (vodoravno poravnanje) Vrijednosti: centar (centar) lijevo (uz lijevi rub) desno (desni rub) poravnati (širina) okomito poravnati (okomito poravnanje) Vrijednosti: osnovna linija (duž osnovne linije) pod (kao podindeks) super (poput superindeksa) vrh (uz gornji rub) sredina (u sredini) dno (uz donji rub) % (visine proreda) Primjer: podstava (uvlake u tablici) boja pozadine (pozadina) boja (boja teksta) Izgled CSS tablice Zbog velikog broja svojstava tablica i varijacija u njihovom dizajnu, tablice su dugo bile standard za izgled web stranica. Ako rubove tablice učinite nevidljivima, njezine pojedinačne ćelije možete koristiti kao zasebne blokove stranice: zaglavlje, izbornik, podnožje itd. Ali to nije sasvim točno, jer svaki tag ima svoju svrhu, a tablice nisu trebale služiti za izgled stranice. Međutim, nedostatak alternative potaknuo je dizajnere da koriste ovu posebnu metodu izgleda. Sada postoji još jedan način - korištenje slojeva, koji su postupno zamijenili tablice u ovoj vrsti rada s web stranicom. Međutim, čak iu naše vrijeme, neki dizajneri uspješno koriste tablični izgled. Tablični izgled s dva stupca Jedna od najčešćih metoda rasporeda su dva stupca, tj. Stranica je podijeljena u dva dijela. Tipično, lijeva strana je izbornik i dodatni elementi, a desna strana je glavna, za glavni sadržaj. U ovom slučaju, širina lijevog dijela je postavljena na određenu vrijednost, tj. kruto, a desna strana zauzima preostali dio stranice. U ovom slučaju potrebno je postaviti ukupnu širinu cijele tablice (oznaka tablice) u postocima kroz svojstvo width (100%), a za prvu ćeliju (oznaku td) postaviti širinu (također svojstvo width) u pikselima ili postotke. Primjer: postavite glavni okvir stranice iz dva stupca: prvi - s fiksnom veličinom, drugi - za preostalo područje preglednika. Dovršite zadatak koristeći CSS stilove () Izvođenje: </glava> <tijelo > <tablica id = "maket" cellpacing = "0" > <tr > <td id = "lijevo" > 1</td> <td id = "desno" > 2</td> </tr> </stol> ... 1 2 ... Proizlaziti: Pokušajmo sada vizualno odvojiti dva stupca tablice jedan od drugog. Primjer: postavite različite pozadine ćelija (da odvojite dva stupca jedan od drugog) i postavite udaljenost između stupaca (razdjelnik) Izvođenje: Dodajmo nova svojstva stila: /* za lijevu ćeliju */ td#left( width:200px; background: #ccc; border:1px solid black; /* privremeno označi granice */ ) /* za desnu ćeliju */ td#right( background: #fc3; border:1px solid black; /* privremeno označite granice */ ) /* za razdjelnik */ #razdel( width: 10px; /* Udaljenost između stupaca */) Zajedno: </glava> <tijelo > <tablica id = "maket" cellpacing = "0" > <tr > <td id = "lijevo" > 1</td> <td id = "razdel" > <td id = "desno" > 2</td> </tr> </stol> 1 2 Za separator je dodana nova ćelija. Proizlaziti: Razdjelnik između stupaca također može biti manje istaknut. Da bismo to učinili, koristit ćemo stilove obruba. Primjer: napravite razdjelnik između stupaca tablice pomoću točkaste linije koja obrubljuje susjedne ćelije Izvođenje: Dodajmo nova svojstva obruba za ćelije: /* za lijevu ćeliju */ td#left( width:200px; background: #ccc; /* Boja pozadine lijevog stupca */ /* novo */ border-right: 1px isprekidano #000; /* Opcije desnog isprekidanog obruba * / ) Zajedno: </glava> <tijelo > <tablica id = "maket" cellpacing = "0" > <tr > <td id = "lijevo" > 1</td> <td id = "desno" > 2</td> </tr> </stol> 1 2 Proizlaziti: Izgled tablice s tri stupca Postoji koncept fiksnog ili "fluidnog" izgleda. Fiksni CSS izgled Korištenje fiksni raspored širina cijele tablice navedena je u pikselima, i tada će, bez obzira na rezoluciju monitora i prozora preglednika, tablica uvijek imati istu širinu. U ovom slučaju Širina preostalih stupaca također treba biti fiksna. Ne možete odrediti širinu jedne ćelije, tada će se automatski izračunati na temelju veličina preostalih ćelija i cijele tablice. Primjer: izradite predložak stranice s tri stupca. Koristite fiksni raspored tablice: lijevi stupac - 150 piksela; srednji stupac - 400 piksela; Izvođenje: </glava> <tijelo > <tablica id = "maket" cellpacing = "0" > <tr > <td id = "lijevo" > 1</td> <td id = "centralno" > 2</td> <td id = "desno" > 3</td> </tr> </stol> 1 2 3 Proizlaziti: Gumeni model Širina stola kada se koristi "gumeni" dizajn postaviti kao % širine prozora preglednika. Da. Kada se promijeni prozor preglednika, mijenja se i veličina tablice. Širina svih ćelija može se instalirati u postocima. Druga opcija je kada širina nekih ćelija je instaliran u postocima, A neke - u pikselima. Važno: Zbroj širina svih stupaca treba biti 100%, bez obzira na širinu tablice. Primjer: lijevi stupac - 20%; srednji stupac - 40%; desni stupac - 40%; Postavite pozadinu za stupce i vizualno ih odvojite rubom. Izvođenje: </glava> <tijelo > <tablica id = "maket" cellpacing = "0" > <tr > <td id = "lijevo" > 1</td> <td id = "centralno" > 2</td> <td id = "desno" > 3</td> </tr> </stol> 1 2 3 Proizlaziti: Razmotrimo drugu opciju, kada preglednik automatski odabire širinu središnjeg stupca; Primjer je sljedeća slika: Primjer: izradite predložak stranice s tri stupca. Koristite fluidni raspored tablice: lijevi stupac - 150 piksela; srednji stupac - 40%; desni stupac - 200 piksela; Postavite pozadinu za stupce i vizualno ih odvojite rubom. Izvođenje: </glava> <tijelo > <tablica id = "maket" cellpacing = "0" > <tr > <td id = "lijevo" > 1</td> <td id = "centralno" > 2</td> <td id = "desno" > 3</td> </tr> </stol> 1 2 3 Proizlaziti: Rezultat će biti približno isti, samo će se "istezanje" dogoditi zbog središnjeg stupca. Korištenje ugniježđene tablice u fluidnom rasporedu Ako je širina dva stupca postavljena u postocima, a trećeg u pikselima, nećete moći proći samo s jednom tablicom. Dakle, ako je širina cijele tablice 100 posto, prvi stupac 200 piksela, a preostali stupci 20 posto, tada jednostavna računica pokazuje da je veličina prvog stupca 60 posto. U tom slučaju preglednik neće prihvatiti navedenu vrijednost u pikselima, a veličina će biti postavljena kao postotak. Izvorna tablica stvorena je s dvije ćelije. Širina tablice postavljena je u postocima. Za lijevu ćeliju(prvi stupac) širina je postavljena u pikselima. Širina desne ćelije(osnova za druge stupce) nije specificirano. Druga tablica, koja se također sastoji od dvije ćelije, umetnuta je unutar ove ćelije. Za ugniježđene ćelije tablice, širina je postavljena kao postotak. Širina unutarnje tablice trebala bi biti postavljena na 100 posto tako da ova tablica zauzima sav slobodan prostor u vanjskoj tablici. Širina središnjeg i desnog stupca izračunava se u odnosu na širinu ćelije, a ne vanjske tablice kao cjeline. Primjer: izradite predložak stranice s tri stupca. Koristi fluidni raspored s ugniježđenom tablicom: lijevi stupac - 150 piksela; srednji stupac - 60%; desni stupac - 40%; Postavite pozadinu za stupce. Izvođenje: 1 2 3 Atributi oznake cellpadding i cellpacing ovdje su neophodni kako bi se osiguralo da između tablica nema "praznine". Proizlaziti: U ovom članku ćete vidjeti kako koristiti CSS stilovi tablice formata. U ranim danima interneta, dizajneri su često koristili tablice za izradu izgleda. Sada su gotovo sve stranice označene s CSS pomoć, a tablice se koriste za njihovu namjenu - za prikaz podataka. Oznake za izgled tablice Stol se može izraditi pomoću sljedeće oznake: Tablica se može izraditi pomoću sljedećih oznaka: Definira naslov (više kao potpis) tablice. Definira jedan stupac u tablici. Definira grupu stupaca u tablici. Stvara tablicu. Definira jedan ili više redaka u tablici. Stvara jednu ćeliju u tablici. Definira retke koji se pojavljuju na dnu tablice. Definira naslov za svaki stupac tablice. Dizajniran za pohranu jednog ili više redaka koji su prikazani na vrhu tablice. Stvara redak u tablici. Kao što vidite, veliki broj oznaka može se koristiti u tablicama, više CSS stilova možemo koristiti u svakom konkretnom slučaju. U nastavku će se raspravljati CSS svojstva, koristi se za formatiranje tablica. Granice Ćelije ne nasljeđuju obrube opisane u oznaci tablice. Granice ćelija tablice mogu se opisati pomoću svojstva border, ali to stvara prazninu. Th, td (border:2px full black;) Ovaj se prostor može ukloniti korištenjem svojstva CSS border-spacing (za IE će vam trebati atribut cellpacing oznake tablice). Međutim, ako uklonite razmak, granice će se udvostručiti. Tablica (border-spacing:0;) Da biste se riješili dvostrukih obruba i razmaka, koristite svojstvo border-collapse s vrijednošću collapse. Tablica (border-collapse:collapse;) Udubljenja Uvlake (in HTML atribut cellpadding) definiraju se korištenjem svojstva padding. Može se primijeniti samo na ćelije ( ) ili u ćelije ispod naslova ( ) . Th, td (padding:10px 12px 13px 14px;) Poravnanje svojstvo poravnanja teksta Svojstva text-align (atribut align u HTML-u) i vertical-align poravnavaju sadržaj unutar ćelije tablice. Svojstvo text-align (vrijednosti: lijevo, desno, središte, poravnanje) vodoravno poravnava sadržaj. Opseg oznaka: , , . Th, td, table (text-align:center;) svojstvo okomitog poravnanja Svojstvo vertical-align (vrijednosti: top , baseline , bottom , middle ) poravnava sadržaj okomito. Područje primjene: th , td . Th, td (vertical-align:bottom;) Formatirajte stupce Na oznake col i colgroup možete primijeniti svojstva širine i svojstva grupe pozadine. Ovo je zgodno ako želite istaknuti stupac ili ga postaviti na određenu širinu. Klasa i ID Da biste formatirali određenu ćeliju ili tablicu, ne zaboravite na klase, identifikatore itd. reci prijateljima Cvrkut Samsung igra... Android radna površina je nestala ili pokretač ne radi! Sljedeći članak Xperia Companion - nova aplikacija na Windows računalu za ažuriranje i vraćanje Xperia Pročitajte također Najbolji glazbeni playeri za Android 2024-03-13 00:03:49 Što je hub, switch i router? 2024-03-12 00:04:38 Json dekodiranje kratica 2024-03-11 00:04:21 jQuery galerija slika sa zanimljivim efektom 2024-03-09 00:04:15