Tabel on lahtrite vaheline kaugus.

Niisiis, oleme koos teiega uurinud kõige lihtsamaid toiminguid, mida saab teha tabelipiiridega. Ja nüüd näeb laud palju esteetilisem välja. Lahtrite täitmine toetub aga otse piiridele. Selle saate hõlpsalt parandada, kui taandate HTML -tabeli lahtrid. Ja siis on tekst kaadris, lahtris, loetavam.

Lahtrisse taande tegemiseks kasutage atribuuti mobiilirakendus sildi jaoks

... Siiski on veel üks, eelistatavam variant: CSS.

Sellisel juhul määratakse taanded atribuudi abil polsterdus... Tema abiga ei ole raske vajaduse korral taanduda, st ülevalt, paremalt, alt või vasakult, kasutades vastavalt ühte järgmistest omadustest: polster-top, polster-paremal, polster-alt ja polster-vasak.

Saate määrata, mitu pikslit taandatakse. Siin on näide, kus jääb alumine äär 20 pikslit ja kõik ülejäänud on 10 ... Selline CSS-kood näeb välja selline:

Td (polster: 10 pikslit; polsterdatud põhi: 20 pikslit;)

Ja stiilide täielik kood selles etapis:

Tabel (ääris: tahke 1px sinine; ääris-ahendamine: ahenda;) td (ääris: tahke 1px sinine; polster: 10px; polster-põhi: 20px;)

Tulemus brauseris:

Taandumine rakkude vahel

Tavaliselt saab tabelite loomisega seotud ülesandeid lahendada siltide, atribuutide ja atribuutide abil, mis võimaldavad teil luua ääriseid, taandeid lahtrites ja määrata ka lahtrite enda värvitausta.

Tabelite taanded ei ole ainult lahtrite sees. Need võivad esineda ka rakkude endi vahel.

Lahtrite vahel saab taanduda kahel viisil:

kasutades atribuuti rakkude vahe sildi jaoks

kasutades CSS-kinnistud piiride vahekaugus.

Tuleb rõhutada, et piiride vahekaugus on kirjutatud tabeli jaoks tervikuna, samas kui vara polsterdus määrab otse rakkudele.

Vaatame näidet:

Tabel (ääris: tahke 1 piksel sinine; äärise kokkuvarisemine: eraldi; äärisevahe: 5 pikslit;) td (ääris: tahke 1 piksel sinine; polster: 10 pikslit; polsterdatud põhi: 20 pikslit;)

Ja sellest tulenev tulemus:

Teeme kohe kindlaks, et te ei tohiks proovida selliseid taandeid kasutades kasutada border-collapse: kokkuvarisemine... Tõepoolest, selle valiku kasutamisel jäävad rakud üksteise külge.

Ja selleks, et neid üksteisest eraldi hoida, peaksite kasutama piir-kokkuvarisemine: eraldi... Oluline on mõista, et see väärtus on vaikimisi. Ja seda kasutatakse ainult selleks, et selgelt näidata, kuidas seda probleemi lahendatakse. Kui me selle rea kustutame, salvestatakse tulemus üksteisest eraldi asuvate lahtrite kujul.

CSS spetsifikatsioon annab laua kujundamiseks piiramatud võimalused. Vaikimisi ei ole tabelil ja tabeli lahtritel nähtavaid piire ega tausta ning tabeli lahtrid ei asu üksteise kõrval.

Tabeli lahtrite laius määratakse nende sisu laiuse järgi, seega võivad tabeli veergude laius olla erinev. Kõigi reas olevate lahtrite kõrgus on sama ja see määratakse kõrgeima lahtri kõrguse järgi.

Tabelite vormindamine

1. Tabelipiiride piir

Tabel ja selle sees olevad lahtrid kuvatakse brauseris vaikimisi ilma nähtavate piirideta. Tabeli äärised määratud piiriomandiga:

Tabel (ääris-ahendamine: ahendamine; / * eemaldage lahtrite vahelt tühjad ruumid * / ääris: 1 pikslit hall; / * määrake tabeli jaoks välimine äär 1 pikslit halliks * /)

Päise lahtri piirid iga veeru jaoks on seatud th element:

Th (ääris: 1 tk täishall;)

Lahtrite piirid tabeli kehad on määratud elemendile td:

Td (ääris: 1 tk täishall;)

Külgnevate lahtrite ääriste paksust ei kahekordistata, nii et saate määrata kogu tabeli äärised järgmiselt.

Th, td (ääris: 1 tk helehall;)

Tabeli välispiiri saab valida, suurendades selle laiust:

Tabel (ääris: 3 tk täishall;)

Piire saab osaliselt määrata:

/ * määrake tabelile 3 pikslit halli välispiiri * / tabel (ääris-ülaosa: 3 pikslit hall hall;) / * määrake tabeli keharakule 1-piksine hall ääris * / td (ääris-alumine: 1 tk täishall;)

Piirikinnistu kohta saab lähemalt lugeda.

2. Kuidas määrata laua laiust ja kõrgust

Vaikimisi laua laius ja kõrgus määratakse selle rakkude sisu järgi. Kui laiust pole määratud, on see võrdne kõige laiema rea (joone) laiusega.

Tabeli ja veeru laius määrata atribuudi laius abil. Kui tabeli jaoks on määratud tabel (laius: 100%;), siis on tabeli laius võrdne konteineriploki laiusega, milles see asub.

Tabeli ja veergude laius on tavaliselt määratud pikslites või%, näiteks:

Tabel (laius: 600 pikslit;) th (laius: 20%;) td: esimene laps (laius: 30%;)

Laua kõrgus pole määratud. Ridade kõrgus tabeleid saab muuta, lisades elementidele ülemise ja alumise polstri

... Praktikas on aeg, mil vajate veergude spetsiaalset vormindamist, mis on võimalik järgmistel viisidel.

märgendit kasutades

Saate määrata suvalise arvu veergude tausta;

kasutades tabelit td: first-child, table td: last-child selector, saate stiilida tabeli esimest või viimast veergu (välja arvatud tabeli päise esimene lahter);

kasutades tabelit td: n-nda alamvalijat (veeruvaliku reegel), saate stiilida tabeli mis tahes veerge.

Lisateavet CSS -i valijate kohta saate lugeda.

5. Kuidas lisada tabelisse pealkiri

Märgendi abil saate tabelile pealkirja lisada

... Kõrgust pole soovitatav kinnitada kõrguse omaduse abil.

Th, td (polster: 10px 15px;)

3. Kuidas määrata tabeli tausta

Vaikimisi tabeli taust ja rakud on läbipaistvad. Kui tabelit sisaldaval lehel või plokil on taust, siis paistab see tabelist läbi. Kui taust on seatud nii tabelile kui ka lahtritele, siis on tabeli ja lahtrite tausta kattuvates kohtades nähtav ainult lahtrite taust. Tabeli kui terviku ja selle lahtrite taust võib olla järgmine:
täitma,
,
.

4. Tabeli veerud

CSS -i tabelimudel on keskendunud peamiselt märgendi abil moodustatud stringidele (ridadele)

ja kasutades pealdisepoolset atribuuti, saab selle paigutada tabeli ette või alla. Teksti joondamise omadust kasutatakse pealkirja teksti horisontaalseks joondamiseks. Päritud.

...

Tabel nr 1
Ettevõte	Q1	Q2	Q3	Q4

pealdis (pealdis-pool: all; teksti joondamine: parem; polster: 10 pikslit 0; fondi suurus: 14 pikslit;)

Riis. 2. Näide päise kuvamisest tabeli all

6. Kuidas eemaldada lahtrite raamide vahe

Tabeli lahtrite vaikimisi piirid eraldatakse väikese tühikuga. Kui määrate piiri ahendamise: ahendage tabeli jaoks, tühimik eemaldatakse. Vara on päritud.

Süntaks

Tabel (piir-kollaps: ahenda;)
Riis. 3. Näide tabelitest, milles on lahtrite liitmine ja poolitamine

7. Kuidas suurendada rakkude piiride vahelist ruumi

Kasutades atribuudi äärisevahed, saate muuta lahtrite piiride vahelist kaugust. See omadus kehtib laua kohta tervikuna. Päritud.

Süntaks

Tabel (äärise ahendamine: eraldi; piiride vahekaugus: 10 pikslit 20 pikslit;) tabel (äärise ahendamine: eraldi; piiride vahe: 10 pikslit;)
Riis. 4. Näide tabelitest, mille lahtrite vahel on suurenenud lüngad

8. Kuidas peita tühjad tabeli lahtrid

Tühjade lahtrite omadus peidab või näitab tühje lahtreid. Mõjutab ainult rakke, mis ei sisalda sisu. Kui lahtri jaoks on määratud taust ja tabeli jaoks on määratud tabel (border-collapse: collapse;), siis lahtrit ei peideta. Päritud.

Ettevõte	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabel (ääris: 1px tahke # 69c; piiri ahendamine: eraldi; tühjad lahtrid: peida;) th, td (ääris: 2px tahke # 69c;)

Riis. 5. Näide tühja tabeli lahtri peitmisest

9. Tabeli paigutuse paigutus atribuudi table-layout abil

Tabeli paigutuse paigutuse määrab üks kahest lähenemisviisist: fikseeritud paigutus või automaatne paigutus. Paigutus tähendab sel juhul seda, kuidas tabeli laius jaotub lahtrite laiuse vahel. Kinnisvara ei ole päritud.

Süntaks

Tabel (tabeli paigutus: fikseeritud;)

10. Parimad tabelipaigutused

1. Horisontaalne minimalism

Horisontaalsed tabelid on tabelid, milles teksti loetakse horisontaalselt. Iga olem on eraldi rida. Selliseid tabeleid saate minimalistlikus stiilis kujundada, asetades kahe pealkirja äärise pealkirja alla.

Töötaja	Palk	Boonus	Juhendaja
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tabel (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; taust: valge; max-width: 70%; width: 70%; border-collapse: collapse; text -joondus: vasak;) th (fondi kaal: normaalne; värv: # 039; ääris-põhi: 2 pikslit tahke # 6678b1; polster: 10 pikslit 8 pikslit;) td (värv: # 669; polster: 9 pikslit 8 pikslit; üleminek: .3 s lineaarne;) tr: hover td (värv: # 6699ff;)

Suure hulga ridade tõttu raskendab selline tabelite kujundus nende lugemist. Selle probleemi lahendamiseks saate kõigi td-elementide alla lisada ühe piksli äärise.

Td (ääris-põhi: 1px tahke #ccc; värv: # 669; polster: 9px 8px; üleminek: .3s lineaarne;) / * ülejäänud kood on nagu ülaltoodud näites * /

Kui lisate tr -elemendile a: hover efekti, siis on stiililt minimalistlikud tabelid hõlpsamini loetavad. Kui viite hiire lahtri kohale, tõstetakse sama rea ülejäänud lahtrid korraga esile, mis lihtsustab teabe jälgimise protsessi, kui tabelites on mitu veergu.

Th (fondi kaal: normaalne; värv: # 039; polster: 10 pikslit 15 pikslit;) td (värv: # 669; ääris: 1 tk tahke # e8edff; polster: 10 pikslit 15 pikslit;) tr: hover td (taust: # e8edff ;)

2. Vertikaalne minimalism

Kuigi selliseid tabeleid kasutatakse harva, on vertikaalselt orienteeritud tabelid kasulikud veergude objektide kirjelduste kategoriseerimiseks või võrdlemiseks. Saate neid kujundada minimalistlikus stiilis, lisades veerge eraldava tühiku.

Th (fondi kaal: normaalne; ääris-alumine: 2 pikslit tahke # 6678b1; ääris-parem: 30 pikslit tahke #fff; ääris-vasak: 30 pikslit tahvel #fff; värv: # 039; polster: 8 pikslit 2 pikslit;) td (ääris- paremal: 30 pikslit tahke #fff; ääris-vasakul: 30 pikslit tahvel #fff; värv: #669; polster: 12 pikslit 2 pikslit;)

3. "Kasti" stiil

Kõige usaldusväärsem stiil igat tüüpi laudade kaunistamiseks on niinimetatud "kasti" stiil. Piisab, kui valida hea värviskeem ja seejärel määrata kõigi lahtrite taustavärv. Ärge unustage rõhutada ridade erinevust, määrates piirid eraldajateks.

Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: # 039; polster: 8px;) td (taust : # e8edff; ääris-alumine: 1 tk tahke #fff; värv: # 669; ääris-ülaosa: 1 tk tahke läbipaistev; polster: 8 pikslit;) tr: hover td (taust: #ccddff;)

Kõige raskem on leida värviskeem, mis sobib teie saidiga harmooniliselt. Kui sait on täis graafikat ja kujundust, on teil seda stiili üsna raske kasutada.

Tabel (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- vasakul: 1 tk tahke # 9baff1; värv: # 039; polster: 8 pikslit;) td (taust: # e8edff; ääris-parem: 1 tk tahke # aabcfe; äär-vasak: 1 tk tahke # aabcfe; värv: # 669; polster: 8 pikslit ;)

4. Horisontaalne sebra

Sebra laud näeb välja üsna atraktiivne ja mugav. Täiendav taustavärv võib olla tabeli lugemiseks visuaalseks vihjeks.

Th (fondi kaal: normaalne; värv: # 039; polster: 10 pikslit 15 pikslit;) td (värv: # 669; ääris-ülaosa: 1 tk tahke # e8edff; polster: 10 pikslit 15 pikslit;) tr: n. Laps (2n) ( taust: # e8edff;)

5. Ajalehe stiil

Niinimetatud ajaleheefekti saavutamiseks saate tabeli elementidele ääriseid rakendada ja seestpoolt lahtritega mängida. Kerge, minimaalne ajalehestiil võib välja näha selline: mängige värviskeemiga, lisage äärised, polsterdus, erinevad taustad ja a: hõljutuse efekt joone kohal.

Tabel (ääris: 1 tk tahke # 69c;) th (fondi kaal: normaalne; värv: # 039; ääris-põhi: 1 tk katkendlik # 69c; polster: 12 pikslit 17 pikslit;) td (värv: # 669; polster: 7 pikslit 17 pikslit; ) tr: hover td (taust: #ccddff;)

Tabel (ääris: 1 tk tahke # 69c;) th (font-weight: normal; color: # 039; polster: 10px;) td (color: # 669; border-top: 1px katkendlik #fff; polster: 10px; taust: #ccddff;) tr: hover td (taust: # 99bcff;)

Tabel (ääris: 1px tahke # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; text-transform: suurtähed; ääris-parem: 1px tahke # 0865c2; ääris-ülaosa: 1px tahke # 0865c2; ääris-vasak: 1 tk tahke # 0865c2; ääris-alumine: 1 pikslit tahke #fff; polster: 20 pikslit;) td (värv: # 669; ääris-parem: 1 tk katkendlik # 6 cf; polster: 10 pikslit 20 pikslit;)

6. Tabeli taust

Kui otsite kiiret ja ainulaadset viisi oma laua kujundamiseks, valige laua teemaga seotud atraktiivne pilt või foto ja määrake see laua taustaks.

Png ") 98% 86% ei korda;) th (fondi kaal: normaalne; fondi suurus: 14 pikslit; värv: # 339; polster: 10 pikslit 12 pikslit; taust: valge;) td (värv: # 669; ääris- ülaosa: 1px valge valge; polster: 10px 12px; taust: rgba (51, 51, 153, .2); üleminek: .3s;) tr: hover td (taust: rgba (51, 51, 153, .1); )

Tere kõigile! Niisiis, nüüd teate, kuidas luua elementaarseid tabeleid, mis koosnevad nii paljudest ridadest ja veergudest kui vaja. Pole paha, pole paha. Nüüd räägime nende laudade kujundusest.

Viimases tunnis olid tabelid kuvatud piirideta. Ja näete, see tundub nii-nii, te ei saa seda isegi märgiks nimetada. HTML -is tabelipiirde tegemiseks lisage märgendile

atribuut piir, andes sellele muu väärtuse kui null.

Nii et teeme lauale piirid. Näiteks selle jaoks, mis meil juba on:

Ülemine vasak lahter	Ülemine parempoolne lahter
Alumine vasak lahter	Alumine parempoolne lahter

Tulemus brauseris:

Kuidas eemaldada tabeli piire

HTML -tabeli piiride eemaldamiseks või ka nähtamatuks muutmiseks on vaja atribuuti piir seatud väärtus 0 ... Pärast neid lihtsaid toiminguid eemaldatakse raam.

Atribuut võimaldab teil luua, kuid mitte hallata piire. See võimaldab teil ainult nende paksust muuta.

Seetõttu räägime nüüd sellest CSS mille omadused seda võimaldavad piir luua erinevaid piire, nii iga lahtri sees kui ka väljaspool, laua ümber tervikuna.

Vaatame, kuidas CSS -i rakendada tabeli välimise ja sisemise piiri loomiseks.
Selleks eemaldage meie tabelist atribuut border ja lisage stiilid:

Tabeli näide

Ülemine vasak lahter	Ülemine parempoolne lahter
Alumine vasak lahter	Alumine parempoolne lahter

Tulemus brauseris:

Nüüd lisame iga lahtri jaoks ka piirid. Selleks lisage lihtsalt stiilid:

Tulemus brauseris:

Kuidas eemaldada HTML -tabeli lahtrite vaheline polster

Nõustuge sellega, et CSS -iga määratletud äärisel pole sama välimust, kui soovite. Kahtlemata on esteetika seisukohast tööd teha. Brauseri lehel näete, et vaikimisi kuvab see tabelite ja lahtrite piirid eraldi. Näide näitab seda selgelt.

Sellistest piiridest, mida nimetatakse kahekordseteks, on aga täiesti võimalik vabaneda, kui kasutada piiri-kollaps CSS atribuuti. Praktikas näeb see välja selline:

Tabel (ääris: kindel 1 piksel sinine; ääris-kokkuvarisemine: ahenda;) ...

Selle tulemusena eemaldatakse rakkude vaheline kaugus:

Atribuudile border ahendatud väärtus eemaldab topeltpiirid. Nagu näete, on tulemuseks külgnevate lahtri piiride, samuti lahtrite piiride ja tabeli välispiiride kokkuvarisemine. Viimase osas saab selle täielikult eemaldada. Ja kui on vaja seda kuvada, peate selle laiust suurendama. Seega vabanesime tabelis olevatest eraldajatest. Ja järgmises õppetükis räägime sellest, kuidas saate vertikaalseid ja horisontaalseid piire seada. Palju õnne kõigile!

Tabeli andmed- teave, mida saab kuvada tabeli kujul ja loogiliselt jagada veergudeks ja ridadeks. HTML -märgendit kasutatakse tabelite andmete kuvamiseks veebilehtedel

, mis on konteiner tabeli sisuga. HTML -tabeli sisu kirjeldatakse rida -realt, iga rida algab avamärgendiga ja lõpeb sulguriga .

Sildi sees

tabeli lahtrid asuvad, tähistatud siltidega saate rakendada ainult ühte CSS-i atribuuti, taustavärvi, kuid selle elemendi hõljumist (the: hover pseudo-class) ei saa otse taustavärvi määrata. Selles näites vaatame, kuidas tabeli veergu ainult CSS -i abil esile tõsta.

Näide tabeli veergude ja ridade esiletõstmisest hõljutamisel

või

... Lahtrid sisaldavad kogu veebilehel kuvatavat tabelisisu.

Laua raam

Vaikimisi renderdatakse veebilehe HTML -tabel ilma ääristeta; tabeli äärise lisamiseks, nagu kõik muud elemendid, kasutatakse CSS -i äärisomadust. Kuid tuleb märkida, et kui lisate äärise ainult elemendile

, siis kuvatakse see kogu tabeli ümber. Selleks, et tabeli lahtritel oleks ka ääris, peate elementide jaoks määrama piiri atribuudi ja ja nende stiil.

Näide tabeli veergude esiletõstmisest

Tabel, th, td (ääris: 1 pikslit must;) Proovige "

Nüüd on nii tabelil kui lahtritel piirid, samas kui igal lahtril ja tabelil on oma piirid. Selle tulemusel tekkis kaadrite vahele tühi ruum; atribuudiga piiridevahe võimaldab teil kontrollida selle ruumi suurust, mis on määratud kogu tabeli jaoks. Teisisõnu, te ei saa erinevate rakkude vahelisi erinevusi eraldi kontrollida.

Isegi kui me eemaldame tühikud lahtrite vahel, kasutades piiridevahe omaduse väärtust 0, puudutavad lahtrite piirid üksteist, kahekordistudes. Piiri ahendamise atribuuti kasutatakse lahtrite piiride ühendamiseks. See võib võtta kaks väärtust:

eraldi: on vaikimisi. Lahtrid kuvatakse üksteisest lühikese vahemaa tagant, igal lahtril on oma piir.
ahendamine: ühendab kõrvuti asetsevad raamid üheks, ignoreeritakse kõiki lahtrite vahelisi, samuti lahtrite ja tabeliraami vahelisi lünki.

Dokumendi nimi

Nimi	Perekonnanimi
Homer	Simpsonid
Marge	Simpsonid

Nimi	Perekonnanimi
Homer	Simpsonid
Marge	Simpsonid

Proovige "

Tabeli suurus

Pärast raamide lisamist tabeli lahtritesse sai märgatavaks, et lahtrite sisu oli servadele liiga lähedal. Täitmise atribuudi abil saate lahtrite servade ja nende sisu vahele tühikut lisada:

Th, td (padding: 7px;) Proovi seda "

Tabeli suurus sõltub selle sisust, kuid sageli tekivad olukorrad, kui laud on liiga kitsas ja tekib vajadus seda venitada. Tabeli laiust ja kõrgust saab muuta laiuse ja kõrguse atribuutide abil, määrates soovitud mõõtmed kas tabelile või lahtritele:

Tabel (laius: 70%;) th (kõrgus: 50 pikslit;) Proovige "

Teksti joondamine

Vaikimisi on tabeli päise lahtrites olev tekst joondatud keskele ja normaalsete lahtrite tekst on vasakule joondatud, kasutades atribuuti text-align, saate juhtida teksti horisontaalset joondamist.

Vertikaalse joondamise CSS-i omadus võimaldab teil kontrollida tekstisisu vertikaalset joondamist. Vaikimisi on tekst vertikaalselt joondatud lahtrite keskele. Vertikaalset joondamist saab alistada ühe vertikaalse joondamise atribuudi väärtustega.

ülaosa: tekst on joondatud lahtri ülaosale
keskel: joondab teksti keskele (vaikimisi)
alt: tekst on joondatud lahtri põhjaga

Dokumendi nimi

Nimi	Perekonnanimi
Homer	Simpsonid
Marge	Simpsonid

Proovige "

Tabeliridade taustavärvi vaheldumine

Kui vaadata suuri tabeleid, mis sisaldavad palju ridu ja sisaldavad palju teavet, võib olla raske jälgida, millised andmed kuuluvad konkreetsele reale. Kasutajate navigeerimiseks saate vaheldumisi kasutada kahte erinevat taustavärvi. Kirjeldatud efekti loomiseks saate kasutada klassi valijat, lisades selle tabeli igale teisele reale:

Dokumendi nimi

Nimi	Perekonnanimi	Asend
Homer	Simpsonid	isa
Marge	Simpsonid	ema
Bart	Simpsonid	poeg
Lisa	Simpsonid	tütar

Proovige "

Klassi atribuudi lisamine igale teisele reale on tüütu ülesanne. Selle probleemi alternatiivseks lahendamiseks on CSS3 lisatud: n-lapse pseudoklass. Nüüd saab põimimise efekti saavutada ainult CSS -i abil, muutmata dokumendi HTML -märgistust. Pseudoklassiga: n-laps saate tabelis valida kõik paaris või paaritu read, kasutades üht märksõna paaris (paaris) või paaritu (paaritu):

Tr: n-laps (paaritu) (taustavärv: # EAF2D3;) Proovi seda "

Muutke hõljutamise ajal joone tausta

Teine võimalus tabeliandmete loetavuse parandamiseks on rea taustavärvi muutmine, kui hõljutate kursorit selle kohal. See aitab esile tuua soovitud tabeli sisu ja parandada andmete visuaalset tajumist.

Selle efekti rakendamine on väga lihtne, selleks peate tabelirea valijasse lisama: hover pseudo-klassi ja määrama soovitud taustavärvi:

Tr: hõljutage kursorit (taustavärv: # E0E0FF;) Proovige "

Tabeli joondamine keskele

HTML -tabeli joondamine keskpunkti on võimalik ainult siis, kui tabeli laius on väiksem kui selle põhielemendi laius. Tabeli keskele joondamiseks peate kasutama atribuudi atribuuti, määrates sellele vähemalt kaks väärtust: esimene väärtus vastutab tabeli välimise veerise eest üla- ja alaosas ning teine - automaatse keskjoondamise eest :

Tabel (veerised: 10 pikslit automaatne;) Proovige "

Kui vajate tabeli üla- ja alaosas erinevaid veeriseid, saate määrata atribuudi väärtuseks kolm väärtust: esimene vastutab ülemise veerise eest, teine horisontaalse joondamise eest ja kolmas alumise veerise eest:

Tabel (veerised: 10 pikslit automaatne 30 pikslit;)

Oleme kaalunud mitmeid lehe elementide kujundamise meetodeid, nagu tekstiteave, lingid, pildid, pealkirjad, kuid sellest kõigest ei piisa veel. Oma artiklites kasutan sageli HTML -elemente, näiteks tabeleid, sest enamikul juhtudel on need aidata korraldada olulist teavet ja hõlbustada selle esitamist.

Selles artiklis tutvustan teile HTML -tabelite kujundamise nõtkusi ja saate teada nende eesmärkide saavutamiseks loodud uusi CSS -i omadusi.

Hüperteksti märgistuskeele HTML on pakkunud meile palju võimalusi siduda CSS -stiilid kümne unikaalse sildiga, mis on loodud töötama tabelitega, soovitan neid enne täiendavat uurimist korrata:

(Tabeli jalus) taustavärv - korall, elemendi jaoks (Tabeli "Päis") määrake taustavärv hõbedane.

Asjade jaoks

mis on elemendi sees (tabeli sisu) määrake hõljumisel taustavärvi muutmine (pseudoklass: hõljuk) c valge värvi kohta khaki(kogu rida on esile tõstetud).

Meie näite tulemus:

Riis. 153 Tabelite ridade kujundamise näide

Järgmine näide näitab, kuidas nurga ümardamist tabeli lahtritele (atribuut) rakendada.

Näide lahtri nurkade ümardamisest

Silt

Kirjeldus


Määrab tabeli sisu.

Määrab tabeli nime.
		Määrab tabeli päise lahtri.

Määrab tabelis rea.
		Määrab tabeli andmeelemendi.

Kasutatakse tabeli grupipeatise (tabeli pealkiri) sisaldamiseks.

Kasutatakse tabeli "keha" sisaldamiseks.

Kasutatakse tabeli (jalus) jalusena.

Määrab märgendi iga veeru jaoks määratud veeru atribuudid

Määrab tabeli veergude rühma.

Töö tabeli taanetega

Polsterduse kasutamine tabelis

Tabeli taanded
1	2	3	4
2
3
4

Selles näites me:

Asetas laua keskele, kasutades horisontaalset tsentreerimistehnikat koos välisservaga (veeris: 0 automaatne).
Tabeli nime jaoks (silt

) seadsime alumisele polsterdusele 19 pikslit. Loodan, et ebaühtlased numbrid teid segadusse ei aja :)

Meie näite tulemus:

Lahtrite vaheline kaugus

Pärast ülaltoodud näidet olete võib -olla märganud, et meil on kõigi tabeli lahtrite vahel tühimik. Vaatame, kuidas eemaldada tabeli lahtrite vahe või seda suurendada.

Naaberrakkude piiride vahelise kauguse määramiseks peate kasutama atribuuti CSS - border -spacing.

Muutke tabelite vahekaugust

piiridevahe: 30 pikslit 10 pikslit;
1	2	3
2
3

piiridevahe: 0;
1	2	3
2
3

piiridevahe: 0,2em;
1	2	3
2
3

Selles näites me:

ujuk: vasakul). Kui jäite ujuvate elementide teemast ilma, siis saate selles õpetuses selle juurde alati tagasi tulla - "".
Lisaks seadsime paremal asuva lauapolstri väärtuseks 30 pikslit ja seadsime tabelite vertikaalse joonduse (elemendi ülaosa on joondatud kõrgeima elemendi ülaosaga). Selle vara juurde naaseme selles artiklis üksikasjalikult.

) - julge.

Tabeli lahtrite (päise ja andmeelementide) jaoks määrasime 1-pikslise täispiiri # F50 kuusnurgaga ja määrasime polsterduseks 19 pikslit kõigi külgede jaoks.

Esimese lauaga koos klassiga .esiteks määrasime tabeli lahtrite vahelise kauguse (piiridevahe) 30px 10px, teise tabeli puhul koos klassiga .sekund võrdub nulliga, kolmanda tabeli puhul koos klassiga .kolmas võrdub 0,2 em.

Juhin teie tähelepanu asjaolule, et kui piiridevahe atribuudis on määratud ainult üks pikkuse väärtus, siis näitab see vahekaugust nii horisontaalselt kui ka vertikaalselt ning kui on määratud kaks pikkuse väärtust, siis esimene määrab horisontaalse kauguse ja teine vertikaalne. Külgnevate lahtrite piiride vahekaugust saab määrata CSS ühikutes (px, cm, em jne). Negatiivsed väärtused pole lubatud.

Meie näite tulemus:

Kuva piirid tabeli lahtrite ümber

Võite öelda: - Niisiis, eemaldasime lahtrite vahekauguse, kasutades piiridevahe omadust väärtusega 0, kuid miks on meil nüüd lahtrite piirid ristuvad?

Topeltpiirid tekivad seetõttu, et ühe lahtri alumine äär lisatakse lahtri ülemisele piirile, mis asub selle all, sarnane olukord tekib lahtrite külgedel ja see on kuvamise seisukohast loogiline tabelit, kuid õnneks on võimalik brauserile öelda, et me oleme sellised, mida me ei taha näha.

Selleks peate kasutama atribuudi border-collapse CSS. Kummalisel kombel on atribuudi border-collapse kasutamine ahendamise väärtusega parim viis lahtritevahelise lõhe eemaldamiseks ilma nende vahele topeltpiire saamata.

Kaaluge piirikäitumise võrdlust, kui kasutate atribuuti, mille piirid on vahemikus 0, ja atribuudi border-collapse, mille väärtus on ahendatud.

Näide tabeli lahtrite ümber piiride kuvamisest

piiridevahe: 0;
1	2	3
2
3

border-collapse: kokkuvarisemine;
1	2	3
2
3

Selles näites me:

Panime meie lauad hõljuma ja vasakule joondama (ujuk: vasakule), seadke nende parempoolne polster 30 pikslile.
Määrake tabeli nimi (silt

) - julge.

Tabeli lahtrite (päise ja andmeelementide) jaoks määrasime 5 piksli täisjoone äärisega # F50 ja määrasime fikseeritud laiuse 50 pikslit ja kõrguse 75 pikslit.

Esimese lauaga koos klassiga .esiteks määrame tabeli lahtrite vahe nulliks (piiridevahe: 0;) ja teise tabeli puhul koos klassiga .sekund määrake atribuudi border-collapse ahendamiseks, mis ühendab lahtrite piirid võimaluse korral üheks.

Meie näite tulemus:

Tühi rakkude käitumine

CSS -i abil saate määrata, kas kuvada tabelis tühjade lahtrite äärised ja taust või mitte. Selle käitumise eest vastutab tühjade lahtrite omadus, mis kuvab vaikimisi tühjad lahtrid, nagu olete eelmistest näidetest märganud.

Liigume edasi näite juurde:

Näide tühjade tabeli lahtrite kuvamisest

tühjad lahtrid: näita;
1	2	3
2		☺
3	☺

tühjad lahtrid: peida;
1	2	3
2		☺
3	☺

Selle näite põhjal tühjade lahtrite omaduste toimimise mõistmiseks on väga lihtne, kui see on peidetud, siis tühjad lahtrid ja nende taust on peidetud, kui see on määratud näitama (vaikimisi), siis need kuvatakse.

Tabeli päise asukoht

Vaatame veel ühte lihtsat atribuuti tabelite kujundamiseks - caption -side, mis määrab tabeli pealdise asukoha (tabeli kohal või all). Vaikimisi on pealdisepoolne atribuut seatud ülaossa, mis asetab pealdise tabeli kohale. Pealkirja tabeli alla paigutamiseks peate kasutama alumise väärtusega atribuuti.

Vaatame selle vara kasutamise näidet:

Näide atribuudi-poolse atribuudi kasutamise kohta

Suund laua kohale
Nimi	Hind
Kala	350 rubla
Liha	250 rubla

Pealkiri tabeli all
Nimi	Hind
Kala	350 rubla
Liha	250 rubla

Selles näites oleme loonud kaks klassi mis kontrollivad tabeli päise asukohta. Esimene klass ( .topCaption) asetab tabeli pealkirja selle kohale, rakendasime seda esimesele tabelile ja teisele klassile ( .bottomCaption) asetab tabeli pealkirja selle alla, rakendasime selle teisele tabelile. Klass .topCaption sellel on vaikimisi tiitrite poolne atribuut ja see loodi tutvustamiseks.

Meie näite tulemus:

Horisontaalne ja vertikaalne joondus

Enamikul juhtudel peate tabelitega töötades kohandama päise ja andme lahtrite sisu joondamist. Teksti joondamise atribuuti kasutatakse horisontaalseks joondamiseks sarnaselt mis tahes tekstiteabega. Arutasime selle atribuudi kasutamist teksti jaoks varem artiklis "".

Lahtrite sisu joondamise määramiseks peate kasutama teksti-joondamise atribuudiga spetsiaalseid märksõnu. Vaatleme järgmises näites selle atribuudi märksõnade rakendamist.

Näide horisontaalsest joondamisest tabelis

Tähendus	Kirjeldus
vasakule	Joondab lahtri teksti vasakule. See on vaikimisi (kui teksti suund on vasakult paremale).
õige	Joondab lahtri teksti paremale. See on vaikimisi (kui teksti suund on paremalt vasakule).
Keskus	Joondab lahtri teksti keskele.
õigustada	Pikendab ridu nii, et igal real on sama laius (venitab lahtriteksti laiuse järgi).

Selles näites oleme loonud neli klassi, mis määras lahtritesse erineva horisontaalse joonduse ja rakendas need tabeli ridadele. Lahtri väärtus vastab atribuudi text-align väärtusele

Meie näite tulemus:

Lisaks horisontaalsele joondamisele saate vertikaalset joondamist tabeli lahtrites määrata ka vertikaalse joondamise atribuudi abil.

Pange tähele, et tabeli lahtritega töötamisel kasutatakse ainult selle atribuudi järgmisi väärtusi*:

* -Tabeli lahtrile rakendatud alam-, super-, tekst-ülaosa, teksti-alumine, pikkuse ja% väärtused käituvad nii, nagu kasutaksid baasväärtust.

Vaatame kasutamise näidet:

Näide tabeli vertikaalsest joondamisest

Tähendus	Kirjeldus
lähtejoon	Joondab lahtri baastaseme lähtejoonega. See on vaikimisi.
top	Joondab lahtri sisu vertikaalselt ülespoole.
keskel	Joondab lahtri sisu vertikaalselt keskele.
alt	Joondab lahtri sisu vertikaalselt põhjaga.

Selles näites oleme loonud neli klassi, mis määras lahtrites erineva vertikaalse joondamise ja rakendas neid tabeliridade jaoks. Lahtri väärtus vastab sellele reale rakendatud vertikaalse joondamise atribuudi väärtusele.

Tabeli paigutuse paigutamise algoritm brauseri poolt

CSS kasutab vaikimisi brauseri automaatset tabeli paigutuse algoritmi. Sel juhul veeru laiuse määrab lahtri kõige laiem katkematu sisu... See algoritm võib mõnel juhul olla aeglane, kuna brauser peab enne lõpliku paigutuse määramist lugema kogu tabeli sisu.

Tabeli paigutuse tüübi muutmiseks brauseri abil nupuga automaatne peal fikseeritud, peate kasutama tabeli paigutuse CSS-i atribuuti fikseeritud väärtusega.

Sellisel juhul sõltub horisontaalne paigutus ainult tabeli laiusest ja veergude laiusest, mitte lahtrite sisust. Brauser hakkab tabelit kuvama kohe pärast esimese rea vastuvõtmist. Sellest tulenevalt võimaldab fikseeritud algoritm sellise tabeli paigutuse luua kiiremini kui automaatse versiooni kasutamine. Suurte tabelitega töötamisel saate jõudluse parandamiseks kasutada fikseeritud algoritmi.

Vaatame selle atribuudi rakendust järgmise näitega:

Näide atribuudi table-layout kasutamisest

tabeli paigutus: automaatne;
Nimi	2009	2010	2011	2012	2013	2014	2015	2016
Nisu	125	215	2540	33287	695878	1222222	125840000	125

laua paigutus: fikseeritud;
Nimi	2009	2010	2011	2012	2013	2014	2015	2016
Nisu	125	215	2540	33287	695878	1222222	125840000	125

Selles näites me:

Tabeli ridade ja veergude kujundamine

Oleme juba osaliselt puudutanud tabeli ridade ja veergude kujundamise meetodeid artiklis "". Selles artiklis vaatlesime rühma pseudoklassi kasutamist, mis võimaldab väärtuste abil tabelites reastiile vahetada isegi (aus) ja kummaline (kummaline) või elementaarselt matemaatiline valem.

Vaatame uuesti eelnevaid tehnikaid ja uurime uusi viise tabelite ridade ja veergude kujundamiseks. Liigume edasi näidete juurde.

Näide: n-lapse pseudoklassi kasutamise kohta tabelitega

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

Selles näites me:

Meie näite tulemus:

Liigume järgmise näite juurde, kus vaatame tabeliridade kujundamise võimalusi.

Näide tabelite ridade kujundamisest

Teenindus	Hind
Summa	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

Selles näites me:

Määrake tabeli laiuseks 100% emaelemendi laiusest, määrake päis ja andmerakud 1 piksli täispiirile.
Üksuse jaoks installitud

1	2	3	4	5

Selles näites me:

Keskendage laud polsterdustega, määrake päise lahtrite laiuseks ja kõrguseks 50 pikslit läbipaisteväär 5 pikslit.
Leiti, et kui hõljutada (pseudoklass: hõljutus) päise lahtri kohal, saab see tausta sinine värvid, Oranž teksti värv, ääris oranž värvid 5 pikslit ja raadius 100%.
Läbipaistev piir on vajalik piirile ruumi reserveerimiseks, mis kuvatakse hõljumisel, kui seda ei tehta, siis tabel "hüppab".

Meie näite tulemus:

Järgmine näide puudutab HTML -elementide kasutamist

Avalduse number	Teenindus	hind, hõõruge.	Kokku
1	Laulmine	6 000	6 000
2	pesemine	2 000	2 000
3	Puhastamine	1 000	1 000
4	Närimine	1 500	1 500
5	Lugemine	3 000	3 000

Selles näites me:

Meie näite tulemus:

Noh, ja viimane näide, mida on üsna raske mõista ja mis nõuab CSS -is põhjalikke teadmisi, kuna puudutab selle kursuse raames üksikasjalikuks uurimiseks kavandatud tulevasi teemasid.

Eelmises näites mõistsime, et HTML -element

Avalduse number	Teenindus	hind, hõõruge.	Kokku
1	Laulmine	6 000	6 000
2	pesemine	2 000	2 000
3	Puhastamine	1 000	1 000
4	Närimine	1 500	1 500
5	Lugemine	3 000	3 000

Selles näites me:

Seadsime oma tabeli hõivama 100% emaelemendist, tabeli lahtrid hõivavad 25% emaelemendist ja neil on 1 piksline roheline tahke ääris, päised ja andmeelemendid on 45 pikslit kõrged. Lahtrite vahelise tühiku eemaldasime väärtuse border-collapse abil

Ja nii, lisades :: pärast pseudoelementi, lisage sisu pärast iga elementi.

hõljukil. Pseudoelementi :: pärast kasutatakse tingimata koos atribuudiga sisu, tänu millele sisestame taustavärviga plokielemendi metsahaljas ja on absoluutne positsioneerimine.

Absoluutne positsioneerimine on siin vajalik elemendi nihutamiseks selle esivanema määratud serva suhtes, samas kui esivanemal peab olema muu positsiooniväärtus kui vaikestaatiline, vastasel juhul loendatakse see arv brauseriakna määratud serva suhtes. seadsime lauale suhteline positsioneerimine(sugulane).

Seadsime oma genereeritud plokile ülemise atribuudi, mis näitab positsioneeritud elemendi nihkumise suunda ülemisest servast, ja alumise omaduse, mis näitab positsioneeritud elemendi nihkumise suunda alumisest servast. Mõlema atribuudi puhul määrati väärtus 0, nii et plokk hõivab elemendi täielikult tabeli alt ja ülaosast, selle ploki laiuseks määrati 25%, see väärtus vastab lahtri laiuse väärtusele ise.

Ja viimane omadus, mille me sellele plokile määrasime: z-indeks väärtusega "-1" määrab positsioneeritud elementide järjekorra Z -telg... See atribuut on vajalik selleks, et tekst oleks selle ploki ees, mitte selle taga, kui te ei määra väärtust alla nulli, siis plokk sulgeb teksti.

Meie näite tulemus:

Kui te ei saa uuringu praeguses etapis elementide positsioneerimise protsessist aru, siis ärge heitke meelt, see on keeruline teema, mida me ka ei kaalunud, kuid me käsitleme seda kindlasti järgmises artiklis õpetus "Elementide positsioneerimine CSS -is".