Kui määrate atribuudiks tabeli laiuse. Tühjade rakkude käitumine

loob stringi ja sildi :

loob tabeli päise, asub see sildi sees - kohe pärast avasildi. Vaikimisi päis asub tabeli kohal ja joondatud selle keskele.

Tabeli pealkiri

1. rea 1. lahter	1. rea 2. lahter
2. rea 1. lahter	2. rea 2. lahter

Tabeli joondamine. Lahtri sisu joondamine

Tabeli joondamiseks kasutatakse sildi joondusatribuuti.

.

Kasutades atribuuti align, saate asetada tabeli brauseriakna vasakule või paremale (align= "left" ja align= "right") ossa ( vanem element) või selle keskel (align="center" ).

Ridade sisu joondamine ( tag

) ja rakud ( tag , ei ole tabelirea loomisel kõrguse ja laiuse atribuute. Rea kõrgus vastab selles asuvate lahtrite kõrgusele. Ja rea ​​laius võrdub tabeli laiusega.

Kõrguse ja laiuse väärtused on määratud pikslites või protsentides vaba ruumi. Väärtuste määramiseks:

Määrake positiivne täisarv. Sel juhul määratakse suurus pikslites;

Määrake positiivne täisarv, millele järgneb % sümbol.

Kui tabeli või lahtri sisu ületab määratud mõõtmeid, ignoreerib brauser seda ja vastavalt sisu mõõtmetele valitakse automaatselt uued mõõtmed.

) horisontaalselt ja selle asukoha määramine - tabeli kohal või all.

Vaikimisi on lahtri sisu horisontaalselt joondatud vasakule ja vertikaalselt keskele.

Tabeli ja lahtrite kõrgus ja laius

Vaikimisi suurused ( kõrgus ja laius) muutuvad nii tabelid kui ka lahtrid olenevalt nende sisu suurusest.

Kuid nii tabeli kui ka selle üksikute lahtrite kõrgust ja laiust saab selgesõnaliselt määrata – kasutades vastavalt kõrguse ja laiuse atribuute.

Tag

) tehakse ka horisontaalselt atribuudi align abil ja vertikaalselt atribuudi valign abil: Joondamisatribuut aktsepteerib väärtusi vasakule , paremale , keskele ja joondamisele , mis määravad ridade ja lahtrite sisu joondamise vastavalt nende vasakule, paremale, keskele ja laiusele; Atribuut valign, mis võtab väärtused top , bottom ja middle , määrab ridade ja lahtrite sisu joonduse piki nende ülemist, alumist ja keskmist serva. Joonda atribuuti kasutatakse ka päise joondamiseks ( tag

>

Nagu näitest näha: määrates veerus ühe lahtri laiuse, määrate seeläbi kogu veeru laiuse; ja määrates reas ühe lahtri kõrguse, määrate kogu rea kõrguse.

Tabeli ja lahtri piirid

Tabelil ja igal selle lahtril on oma äärised, mis pole vaikimisi nähtavad.

piirisildi atribuut

võimaldab teha äärised nähtavaks ja määrata nende paksuse. See kuvab äärised nii tabeli kui ka iga lahtri ümber.

Äärise paksus ( või raamid) on määratud pikslites. Piiriatribuudi väärtus on positiivne täisarv. Kui piiri atribuut on määratud ilma väärtuseta, on äärise paksuseks 1 piksel.

Ääriste paksus määratakse ainult tabeli jaoks. Lahtrite äärise paksus on alati 1 piksel ( või puudub).

Vaikimisi kuvatakse ääris 3D-efektiga ja see on must.

Atribuut bordercolor määrab äärise värvi ja kõrvaldab 3D-efekti. Atribuuti saab kasutada tabeli ääriste värvi määramiseks ( tag

), stringid ( tag ) või rakud ( tag - html tabeli rida
- html-tabeli veerg (lahter).

Nüüd proovime ühendada kõik sildid ühte tabelisse. Selleks loome html-tabeli, mis koosneb kahest reast ja kolmest veerust:

Sellise html-tabeli tegemine on väga lihtne. Esiteks paneme tabeli enda sildid, mille sisse asetame vajaliku arvu ridu (meie näites 2 rida):

). Kõik brauserid ei toeta atribuuti bordercolor ja seetõttu pole see soovitatav. Äärise värvi määramiseks on parem kasutada stiile ( see on juba CSS-is). Piiri atribuut ei ole määratud. Seetõttu pole piire. Tabeli äärise paksus on 3 pikslit. Lahtritel on 1 piksli äärised! Osaline ääriste kuva Tabeli ääris ja lahtrite ääris võidakse kuvada osaliselt. Raamisildi atribuut määrab, kuhu tabeli piirjoon tõmmata. Atribuut reeglid määrab, kuidas kuvada lahtri ääriseid. "500px" raam="hsides" rule="cols" > Paigaldatud horisontaalne tabeli piirid JA kuvatakse äärised veergude vahel Polsterdus lahtrite sees ja väljas Tabelite vormindamine HTML-vormingus võib osutuda vajalikuks teabe visuaalseks esitamiseks ja selle mugavaks tajumiseks kasulik kasutamine polsterdus lahtrite sees ja väljas. Sisemine polsterdus – lahtrite ääristest kuni sisuni määratakse sildi atribuudiga cellpadding . Välised täidised - külgnevate lahtrite ääriste vaheline kaugus ja lahtri piiride vaheline kaugus tabeli ääriseni määratakse sildi atribuudiga cellpacking . Täisarvud on määratud atribuudi väärtustena positiivsed numbrid, mis määravad kauguse pikslites. Kaugus raku sisust nende piirini on 10 pikslit Kaugus rakkude vahel ja rakkudest tabeli piirini on 25 pikslit Lahtrite ühendamine HTML-is tabeleid kujundades ja vormindades tuleb sageli kõrvutiasetsevaid lahtreid liita. Ja kui selline vajadus tekib, peaksite kasutama sildi atribuute colspan ja rowspan	. Atribuut colspan määrab horisontaalselt liidetavate lahtrite arvu ja atribuut rowspan määrab lahtrite arvu, mis ühendatakse vertikaalselt. Mõlemad atribuudid on mõistlikud, kui tabel koosneb mitmest reast. 1 2 3 4 1 2 3 4 Tabeli taust. Tabeli lahtri taust HTML-is on võimalik määrata nii üldine taust kogu tabelile kui ka taust eraldi valitud lahtrile. Taustasildi atribuut määrab pildi, millest saab tabeli taustpilt. Atribuudi väärtus määrab pildifaili aadressi – faili absoluutse või suhtelise tee (). bgcolor sildi atribuut määrab tabeli taustavärvi. Värvi saab määrata kahel viisil () Samade atribuutide abil saate määrata iga tabeli lahtri taustapildi ja taustavärvi ( tag , Ja . Igaüht neist saab kasutada tabeli ühe või mitme rea mõningate omaduste muutmiseks: see on jällegi ridade lahtrite sisu joondamine horisontaalselt ja vertikaalselt – kasutades joondada atribuute ja valign vastavalt; ja lahtrite taustavärvi määramine atribuudi bgcolor abil. Nende siltide kasutamisel peaksite olema teadlik mitmetest nüanssidest, mis määravad nendevahelised erinevused. Sildid Ja tuleb panna sildi ette , kohe pärast tabeli algussildi ). Tabeli taustavärv on tumeroosa. Üksiku lahtri taustpilt on taevas! Meenutagem ka sildi atribuudi cols olemasolu , mis ütleb brauserile tabeli veergude arvu. Atribuudi cols kasutamine võimaldab brauseril tabeli sisu kiiremini kuvada. Tabeli redigeerimine Selles jaotises vaatleme silte, mida kasutatakse mitme tabelielemendi korraga redigeerimisel. Need sildid võib jagada kahte rühma. Esimesse rühma kuuluvad sildid Ja . Need on peaaegu identsed ja võimaldavad määrata teatud atribuute ja muuta ühe või mitme tabeli veeru omadusi. Üks neist siltidest asetatakse kohe sildi järele . Oletame, et see on silt . Sildi atribuudi span kasutamine näita veergude arvu, millele rakendatakse joonduse, joonduse või laiuse atribuute ( veeru lahtrite sisu joondamine horisontaalselt, vertikaalselt või veeru laiuste seadistamine). Kui atribuut span on sildis puudub, siis muudetakse ühe – tabeli esimese veeru – omadusi. Teine kord, kui kasutate silti omadused on määratud järgmistele ( järgmine – kui span atribuut puudub) tabeli veerud jne. "2" laius ="70 pikslit" > 1 2 3 4 5 1 2 3 4 5 Teise rühma siltide hulka kuuluvad ka üksteisega peaaegu identsed sildid . Märgisesse pandud stringid on esitatud tabeli ülaosas ja read on sildiga ümbritsetud asub tabeli allosas. Mõlemat silti saab samas tabelis rakendada ainult üks kord. Tag saab sildi sees mitu korda kasutada . "right" bgcolor="#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1. Mis on HTML-tabelid ja miks neid vaja on? html tabelid- see on iga html-lehe ja vastavalt ka iga saidi üks põhikomponente. Näiteks koosneb kogu sait tabelitest: pildid, tekstid, lingid, registreerimisvormid - kõik on paigutatud üksteise suhtes html-tabelite abil (tegelikult asub kogu sait ka ühes suures tabelis). 2. Millised sildid on html-tabelitel? Sildid, mis määratlevad html-tabeli, on kirjutatud järgmiselt: Kuid kuna me teame, et kõik tabelid koosnevad ridadest ja veergudest (lahtritest), peame ka neile määrama sildid:

Seejärel jagame iga rea ​​veerumärgendite abil lahtriteks:

- lahter 1.1
- lahter 1.2
- lahter 1.3


- lahter 2.1
- lahter 2.2
- lahter 2.3

Tegelikult on pealdiste esimene number rea number ja teine ​​​​lahtri number (1x2 - esimene rida, teine ​​lahter jne).

3. Kuidas määrata html-tabelite taustavärvi?

Nüüd mõtleme välja, kuidas määrata tabeli või iga lahtri taust eraldi.

Seega kasutatakse tausta määramiseks atribuuti bgcolor="tausta_värv".

Näiteks kui peame kogu märgi jaoks määrama ühe värvi, siis teeme seda järgmiselt:

bgcolor="tausta_värv">

- lahter 1.1
- lahter 1.2
- lahter 1.3


- lahter 2.1
- lahter 2.2
- lahter 2.3

Näiteks kui teil on vaja teha märk kollane, siis kirjutame:

Vajadusel määrake rea taustavärv html tabel, seejärel atribuut bgcolor="tausta_värv" kohaldada märgistusele

Peame määrama tabeli laiuse, kuid mõnikord peame muutma tabeli laiust. Ja me peame selle välja mõtlema. Kuidas muuta laua laiust? Tabeli laiust saab muuta pikslites või protsentides... Nüüd hakkame muutma tabeli laiust html-is! Eelmine kord tegime 500 piksli laiuse tabeli kolme veeru ja kolme reaga (pidage meeles atribuuti border="1 – mis vastutab piiri eest) Siin on selle tabeli kood; Nüüd, et mõista, kuidas tabeli või veeru laiust muuta, muudame ja lisame oma koodile mõned numbrid tabeli laius = "500" – muutke väärtuseks 599. See leht on üles ehitatud tabelitele ning tekstivälja laius, s.o. kus need sõnad asuvad, on 600 pikslit. Me saame: Teeme veeru nr 2 laiuseks 200 pikslit: Teeme veeru nr 3 laiuseks 299 pikslit: Ja me saame selle koodi: Vaatame oma tabelit Nüüd muudame laiuse atribuudi väärtuseks pool = 50%. Vaatame oma tabelit, mis on 50%. See on kõik, mida ma tahtsin teile öelda, kuidas tabeli laiust muuta. Liigume nüüd laua kõrguse juurde! teavitab brauserit, et tabel on täidetud. Iga tabel koosneb veergudest ja ridadest. Tag
lahter reas. Seega, kui palju lahtreid on real, on tabelis sama palju veerge. Tag	loob ka raku. Selle erinevus sildist	on see sildi loodud lahter	on päiselahter: selle sisu on keskel ja kui see on tekst, kuvab brauser selle paksus kirjas. Märgendiga loodud lahtri sisu	vaikimisi asub see selle vasakul küljel. Tag

bgcolor="#FFFF00"> bgcolor="#0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

1.1	1.2	1.3
2.1	2.2	2.3

Sel juhul atribuut raku number komplektid valge tekst, mis asub sildi sees.

Täpselt samamoodi on see täpsustatud iga lahtri värv eraldi. Näiteks kui soovite muuta lahtri 1.2 värvi siniseks, siis avatava sildi sees atribuut bgcolor="tausta_värv":

4. Kuidas määrata html tabeli lahtrite laiuse ja kõrguse suurust?

Seega kasutage lahtrite laiuse ja kõrguse käsitsi määramiseks kõrguse ja laiuse atribuute. Neid saab määrata kogu tabeli, ühe rea või lahtri (veeru) jaoks. Kõrguse ja laiuse saab määrata kas pikslites või protsentides. Meie puhul määrame veergude (lahtrite) laiuse ja kõrguse pikslites.

kõrgus- atribuut, mis määrab lahtri kõrguse

laius- atribuut, mis määrab lahtri laiuse

Ja nüüd näide:

Nüüd selgitan, miks me määrame lahtri kõrguse igas reas ainult üks kord.

Kui reas määrate mõne lahtri kõrguse, mis on suurem kui teistel, on sellest hoolimata teie rea kõik lahtrid (veerud) võrdsed suurima kõrgusega. Ja iga rea ​​laius on kõige parem määrata eraldi!

Saate määrata kogu laua kõrguse ja laiuse. Sel juhul jagavad kõik lahtrid (veerud) ja read neile antud ruumi võrdselt, kui te neid parameetreid neile isiklikult ei määra (protsendina tabeli kogulaiusest (kõrgusest) või pikslites).

Samuti peate sageli määrama kõrguse kõrguse ja laiuse laiuse protsentides:

lahtri sisu

Kui seame lahtri laiuseks 40 protsenti, nagu meie näites, siis see tähendab, et ülejäänud lahtrite jaoks on meil veel 60 protsenti, s.o. nende laiuste summa ei tohiks ületada 60 protsenti. Kõik on väga lihtne: kokku on meil ainult 100%. Arvestame: 100–40 = 60.

5. Kuidas joondada teksti html-tabeli sees?

Nüüd mõtleme välja, kuidas joondada meie html-tabelis olevat teksti vasakule, paremale ja keskele.

Seda tehakse atribuudi abil:

joonda = "vasak"- joondab html-tabeli teksti vasakule

align=”center”- joondab html tekst tabelid keskel

joondada = "paremale"- joondab html-tabeli teksti paremale

Vastavalt sellele võib joondusatribuut võtta ka väärtused paremale ja vasakule. Põhjenduse tähendus, kui seda kasutatakse koos sildiga atribuuti align ei saa aktsepteerida.

Näiteks html kood keskele joondatud tekstiga tabel näeb välja selline:

joondus="kesk"> joondus = "vasak"> 1x1 joondus="kesk">1.2 joondus = "paremale"> 1x3 joondus = "vasak">2.1 joondus="kesk"> 2x2 joondus = "paremale">2.3

Atribuudi registreerimisega joondus="kesk" avamisel

, joondasime html-tabeli brauseri lehe keskele.

Selle tulemuse saate brauseris:

1x1	1.2	1x3
2.1	2x2	2.3

Vaatame nüüd näidet, kuidas html-tabeli sees teksti joondada mööda ülemist või alumist serva ehk kuidas saab veenduda, et lahtri sisu ei asuks ainult täpselt selle keskel (nagu vaikimisi ), aga ka üla- või alaosas.

Vertikaalse joonduse määrab atribuut:

valign="top"- sisu asub lahtri ülaosas

valign="keskmine"- sisu asub lahtri keskel

valign="alt"- sisu asub lahtri allosas

Vaatame neid atribuute meie näite abil:

valign="top"> 1x1 1.2 valign="top"> 1x3 valign="alt">2.1 2x2 valign="alt">2.3

Selle saame, kui vaatame brauseris atribuutide tulemust: joondada Ja vale:

1x1	1.2	1x3
2.1	2x2	2.3

6. Kuidas kombineerida html-tabeli lahtreid ja veerge?

Meie artikli selles osas räägime atribuutidest colspan Ja reavahe.

colspan- määrab veergude arvu, mida antud lahter katab

reavahe- määrab ridade arvu, milleni see lahter ulatub

Väärtused colspan Ja reavahe võib võtta väärtuse 2 või enamast, st. lahter võib ulatuda üle kahe või enama veeru (rea).

Nüüd, kasutades näidet, venitame 1x1 lahtri kaheks veeruks (lahtriks). Selleks kasutame atribuuti colspan="2", määrates selle 1x1 lahtrile. Kood näeb välja selline:

Nagu näeme, ulatub 1x1 lahter üle kahe lahtri pikkuse. Seega on selle pikkus võrdne nende kahe lahtri summeeritud pikkusega (160 pikslit). Me ei määranud lahtrile 1x1 laiuse atribuuti, kuid kui otsustaksime seda teha, määraksime laiuseks 160 pikslit. Ja lisaks pange tähele, et meie näites pole 1x3 lahtrit, st. esimeses reas on ainult kaks lahtrit, miks - me oleme seda juba arutanud - 1x1 lahter võrdub kahe lahtriga tänu atribuudile colspan.

Colspan ja rowspan atribuute tuleb käsitleda väga ettevaatlikult. Viga võib põhjustada teie saidi krahhi.

Ja nüüd, kui me mõistame colspani parameetrit, vaatame reavahemiku parameetrit. Tööpõhimõte on sama:

colspan="2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

Nii õppisime, kuidas kombineerida HTML-tabelite ridade ja veergude lahtreid.

7. Kuidas eemaldada, lisada või muuta taande ja kuidas määrata html-tabeli raam?

Nii et varem lõime html-tabeli, lahtrite vahelised taanded on selgelt nähtavad. Et need oleksid veelgi paremini nähtavad, lisame oma lauale raami. Seda tehakse atribuutide abil:

border="äärise laius pikslites"- määrab raami laiuse

bordercolor="äärise värv"- määrab raami värvi

Anname näiteks oma html-tabelile 1 piksli laiuse musta raami.

Selle sildi jaoks

lisa atribuudid:

Nüüd näeme selgelt taandeid html-tabeli lahtrite vahel ja taandeid lahtrite siseservadest tekstini. Seetõttu saame neid süvendeid ilma probleemideta hallata. Atribuudid on selleks otstarbeks:

cellpacing="ruumi laius pikslites"- lahtritevaheline ruum

cellpadding="polsterduse laius pikslites"- taane lahtri sees (lahtri servast teksti, pildi, lingi...)

Teeme näiteks lahtritevahelise taande 10 piksli ja suurendame taanet lahtri servast tekstini 20 pikslini. Seda tehakse järgmiselt:

cellpadding="20"cellpading = "10"> 1.1 1.2 2.1 2.2

Kui vaatame tulemust brauseris, näeme selgelt, et lahtrite vaheline kaugus ( rakkude vahekaugus) meie html-tabelis on suurenenud 10 pikslini ning teksti ja vaheline kaugus sisemine serv rakud suurenesid 20 piksli võrra.

1.1		1.2
2.1	2.2

Kui peate taanded täielikult eemaldama, siis lihtsalt öeldes cellpadding="0" Ja lahtrivahe = "0".

8. Kuidas sisestada üks html tabel teise sisse?

Oleme lähenemas html-tabelite uurimise viimasele etapile. Nüüd õpime, kuidas sisestada üks tabel teise sisse.

Näidet kasutades lisame lahtrisse 1.2 uue tabeli, mis koosneb ühest reast ja kahest veerust. Sisemises html-tabelis seame punase äärise laiusega 2 pikslit ja lahtrite vahekaugusega 0 pikslit. Samuti asetame sisemise tabeli lahtri ülaossa.

Seda tehakse väga lihtsalt:

1.1 3.1 3.2 2.1 2.2

See juhtus meie tabeli uute teisenduste tulemusena (punased rakud on sisemine tabel, mis asub suure tabeli sees):

1.1		3.1 3.2
2.1	2.2

Siinkohal lõpetame selle artikli. Ma arvan, et see osutus edukaks ja seda polnud raske mõista ning loodan, et teil ei teki tabelitega enam probleeme.

CSS-i spetsifikatsioon annab piiramatud võimalused tabelite kujundamiseks. Vaikimisi tabelis ja tabeli lahtrites pole nähtavad piirid ja taust, samas kui tabeli sees olevad lahtrid ei külgne üksteisega.

Tabeli lahtrite laiuse määrab nende sisu laius, seega võib tabeli veergude laius varieeruda. Kõigi rea lahtrite kõrgus on sama ja selle määrab kõrgeima lahtri kõrgus.

Tabelite vormindamine

1. Tabeli äärised

Vaikimisi kuvatakse tabel ja selle sees olevad lahtrid brauseris nähtavate ääristeta. Tabeli piirid on määratud piiri atribuudiga:

Tabel ( äärise ahendamine: ahenda; /*eemaldage tühjad ruumid lahtrite vahel*/ ääris: 1px tahke hall; /*tabeli jaoks määratud välispiir hall 1px paksus*/)

Päise lahtri piirid iga veerg on määratud elemendi jaoks:

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

Lahtri piirid elemendi td jaoks on määratud tabeli kehad:

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

Külgnevate lahtrite ääriste paksust ei kahekordistata, seega saate kogu tabeli piire määrata järgmiselt.

Th, td (ääris: 1px ühtlane hall;)

Tabeli välisääre saate esile tõsta, suurendades sellele laiust:

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

Piire saab määrata osaliselt:

/* määra tabelile halli välimise äärise paksusega 3 pikslit */ tabel (ääris-ülaosa: 3 pikslit täishall; ) /* määra tabeli korpuse lahtrile halli äärise paksusega 1 pikslit */ td (ääris-alumine: 1 pikslit tahke hall ;)

Lähemalt saab lugeda piirikinnistu kohta.

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

Vaikimisi laua laius ja kõrgus määrab selle lahtrite sisu. Kui laiust pole määratud, võrdub see kõige laiema rea ​​(rea) laiusega.

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

Tabeli ja veergude laius määratakse tavaliselt px või %, näiteks:

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

Laua kõrgus täpsustamata. Rea kõrgus tabeleid saab manipuleerida, lisades elementidele ülemise ja alumise polsterduse Ja . Kõrgust ei soovitata kõrguse atribuudi abil fikseerida.

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

3. Kuidas määrata laua tausta

Vaikimisi tabeli taust ja rakud on läbipaistvad. Kui tabelit sisaldaval lehel või plokil on taust, kuvatakse see läbi tabeli. Kui taust on määratud nii tabelile kui ka lahtritele, siis kohtades, kus tabeli ja lahtrite taust kattuvad, on näha ainult lahtrite taust. Tabeli kui terviku ja selle lahtrite taust võib olla:
täitmine,
,
.

4. Tabeli veerud

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

. Praktikas on juhtumeid, kus on vaja veergude spetsiaalset vormindamist, mis on võimalik järgmistel viisidel:

silti kasutades

Saate määrata suvalise arvu veergude tausta;

valijatabeli td:first-child , tabeli td:last-child abil saab määrata stiilid tabeli esimesele või viimasele veerule (v.a tabeli päise esimene lahter);

Tabelivalijaga td:nth-child (veeruvaliku reegel) saate määrata mis tahes tabeli veergude stiile.

Lisateavet CSS-i valijate kohta saate lugeda.

5. Kuidas lisada tabeli pealkirja

Tabelile saate lisada pealkirja märgendi abil , ja kasutades pealdisepoolset atribuuti, saab selle asetada tabeli ette või alla. Pealkirja teksti horisontaalseks joondamiseks kasutage atribuuti teksti joondus. Pärandatud.

...

Tabel nr 1

Ettevõte	Q1	Q2	Q3	Q4

pealdis ( pealdise pool: alumine; teksti joondamine: paremale; polsterdus: 10 pikslit 0; fondi suurus: 14 pikslit; ) Riis. 2. Näide tabeli all oleva päise kuvamisest

6. Kuidas eemaldada lahtriraamide vahelt ruumi

Vaikimisi eraldatakse tabeli lahtrite raamid väikese tühikuga. Kui määrate tabeli jaoks border-collapse: ahenda, tühimik eemaldatakse. Vara on päritud.

Süntaks

Tabel (ääris-ahenda: ahenda;)
Riis. 3. Näide tabelitest, kus on ühendatud ja eraldatud lahtriraamid

7. Kuidas suurendada lahtrikaadrite vahelist ruumi

Piirivahe atribuuti kasutades saate muuta lahtriraamide vahelist kaugust. See omadus kehtib kogu tabeli kohta. Pärandatud.

Süntaks

Tabel (ääriste ahendamine: eraldi; ääriste vahe: 10 pikslit 20 pikslit;) tabel (äärise ahendamine: eraldi; äärise vahe: 10 pikslit;)
Riis. 4. Näide tabelitest, kus lahtriraamide vahel on suurendatud tühikuid

8. Kuidas peita tühjad tabeli lahtrid

Atribuut tühjad lahtrid peidab või kuvab tühjad lahtrid. Mõjutab ainult lahtreid, mis ei sisalda sisu. Kui lahter on seatud taustale ja tabel on seatud tabeliks (äärise ahendamine: ahendamine;) , siis lahtrit ei peideta. Pärandatud.

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

tabel (ääris: 1px tahke #69c; äärise ahendamine: eraldi; tühjad lahtrid: peida; ) th, td (ääris: 2px tahke #69c;) Riis. 5. Näide tühja tabeli lahtri peitmisest

9. Paiguta tabel atribuudi table-layout abil

Tabeli paigutuse paigutus määratakse ühe kahest lähenemisviisist: fikseeritud paigutus või automaatne paigutus. Paigutuse all sisse antud juhul viitab sellele, kuidas tabeli laius jaotatakse lahtrite laiuste vahel. Vara ei ole päritav.

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. Saate anda sellistele tabelitele minimalistliku välimuse, asetades päise alla kahepikslise äärise.

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

tabel ( fondiperekond: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; fondi suurus: 14 pikslit; taust: valge; maksimaalne laius: 70%; laius: 70%; ääriste ahendamine: ahendamine; tekst -joondus: vasakule; th ( fondi kaal: tavaline; värv: #039; ääris-alumine: 2px solid #6678b1; polster: 10px 8px; ) td ( värv: #669; polster: 9px 8px; üleminek: .3s lineaarne ) tr:hover td (värv: #6699ff;)

Kui ridu on palju, muudab see tabelikujundus nende lugemise keeruliseks. Selle probleemi lahendamiseks saate kõigi td elementide alla lisada ühe piksli äärise.

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

:hover-efekti lisamine elemendile tr muudab minimalistlikus stiilis kujundatud tabelid hõlpsamini loetavaks. Kui hõljutate kursorit lahtri kohal, tõstetakse sama rea ​​ülejäänud lahtrid esile samaaegselt, muutes teabe jälgimise lihtsamaks, kui tabelitel on mitu veergu.

Th ( fondi kaal: tavaline; värv: # 039; täidis: 10 pikslit 15 pikslit; ) td ( värv: # 669; ääris ülaosas: 1 pikslit ühtlane # e8edff; täidis: 10 pikslit 15 pikslit; ) tr: hover td (taust: # e8edff ;)

2. Vertikaalne minimalism

Kuigi selliseid tabeleid kasutatakse harva, on vertikaalse orientatsiooniga tabelid kasulikud veeruga tähistatud objektide kirjelduste kategoriseerimiseks või võrdlemiseks. Saate kujundada need minimalistlikus stiilis, lisades veergude eraldamiseks ruumi.

Th ( fondi kaal: tavaline; ääris-alumine: 2 pikslit ühtlane #6678b1; ääris-parem: 30 pikslit ühtlane #fff; ääris-vasak: 30px ühtlane #fff; värv: #039; polster: 8px 2px; ) td ( ääris- paremal: 30px solid #ffff: 30px solid #fff: #669;

3. Kasti stiilis

Kõige usaldusväärsem stiil igat tüüpi laudade kujundamisel on nn kasti stiil. Piisab, kui valida hea värviskeem ja seejärel määrake kõigi lahtrite taustavärv. Ärge unustage rõhutada joonte erinevust, määrates äärised eraldajaks.

Th ( fondi suurus: 13 pikslit; fondi kaal: tavaline; taust: #b9c9fe; ääris ülaosas: 4 pikslit ühtlane #aabcfe; ääris-alumine: 1px solid #fff; värv: #039; polster: 8 pikslit; ) td ( taust : #e8edff border-bottom: 1px border-top: 1px solid läbipaistev tr:hover td (taust: #ccddff;)

Kõige keerulisem on leida värvilahendus, mis teie veebisaidiga harmooniliselt sobiks. Kui saidil on palju graafikat ja disaini, on teil seda stiili üsna raske kasutada.

Tabel ( fondiperekond: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; fondi suurus: 14 pikslit; maksimaalne laius: 70%; laius: 70%; teksti joondamine: keskel; ääriste ahendamine: ahendamine ääris-üles: 7px piiri-all: 13px border-right: 1px; tahke #9baff1; polster: 8px;

4. Horisontaalne sebra

Sebralaud näeb välja üsna atraktiivne ja mugav. Lisavärv Taust võib olla inimestele tabeli lugemisel visuaalseks vihjeks.

Th ( fondi kaal: tavaline; värvus: # 039; täidis: 10 pikslit 15 pikslit; ) td ( värv: # 669; ääris ülaosa: 1 pikslit, ühtlane # e8edff; täidis: 10 pikslit 15 pikslit; ) tr:nth-child(2n) ( taust: #e8edff;)

5. Ajalehe stiil

Nn ajaleheefekti saavutamiseks saab tabelielementidele ääriseid peale kanda ja sees olevate lahtritega mängida. Kerge, minimalistlik ajalehestiil võib välja näha selline: mängige värvilahendusega, lisage äärised, polsterdus, erinevad taustad ja hõljutage kursorit joone kohal.

Tabel (ääris: 1px solid #69c;) th ( fondi paksus: tavaline; värvus: #039; ääris-alumine: 1px katkendlik #69c; polster: 12px 17px; ) td ( värv: #669; polster: 7px 17px; ) tr:hover td (taust: #ccddff;)

Tabel (ääris: 1 pikslit täis #69c;) th ( fondi kaal: tavaline; värvus: # 039; polster: 10 pikslit; ) td ( värv: # 669; ääris ülaosa: 1 pikslit katkendlik #fff; täidis: 10 pikslit; taust: #ccddff ) tr:hover td (taust: #99bcff;)

Tabel (ääris: 1px solid #6cf;) th ( fondi kaal: tavaline; fondi suurus: 13 pikslit; värv: #039; teksti teisendus: suurtähed; ääris-parem: 1px solid #0865c2; ääris-ülaosa: 1px solid #0865c2 ääris-vasak: 1px ääris-all: 1px padding: 20px;

6. Tabeli taust

Kui otsite kiiret ja ainulaadne viis lauakujundus, valige tabeliteemaga seotud atraktiivne pilt või foto ja määrake see tabeli taustaks.

Png") 98% 86% no-repeat; ) th ( fondi kaal: tavaline; fondi suurus: 14 pikslit; värv: # 339; polster: 10 pikslit 12 pikslit; taust: valge; ) td ( värv: # 669; ääris- ülemine: 1px valge taust: rgba(51, 51, 153, .2);

Tabeli mõõtmed, kõrgus ja laius määratakse automaatselt sõltuvalt sellest, mida lahtrid sees sisaldavad. Mida rohkem sisu lahtrites, seda suurem on tabeli suurus ja vastupidi.

CSS-i funktsioonid võimaldavad teil aga HTML-is tabeli suurust muuta, määrates täpselt vajaliku laiuse ja kõrguse. Ausalt öeldes tuleb märkida, et tabeli atribuudid võimaldavad ka määrata nõutavad suurused. Kuid praegu räägime ainult CSS-ist.

Tuleb rõhutada, et igal laual on oma minimaalne laius ja minimaalne kõrgus, mida mõjutab selle sisu. Ja isegi kui määrate laiuse ja kõrguse väärtused veelgi väiksemaks, ei juhtu midagi. Laua küljed ei ületa nende miinimumi.

Tabeli laiuse määramiseks peate kasutama CSS-i atribuuti laius, ja kõrguse määramiseks on vaja vara kasutada kõrgus.

Näites näeb see välja selline.

Tabel ( laius: 500 pikslit; kõrgus: 100 pikslit; )

Tulemus brauseris:

Täielik kood:

Tabel antud suurustega

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Tabeli laiuse ja kõrguse väärtusi saab määrata kui absoluutväärtus(pikslites) ja suhteline – protsentides. Näiteks vastavalt 20px ja 20%.

Kui kasutate tabeli mõõtmete määramiseks protsente, arvutatakse need lähteelemendi mõõtmete alusel. Kui me räägime oma näitest, siis me räägime brauseriakna kohta.

On veel üks tähendus - auto. Ja see on eriline, kuna selle abiga arvutatakse vaikimisi automaatselt laua laius ja kõrgus. Praktikas näeb selle väärtuse määramine välja selline.

Laius: auto;

Kõrgus: auto;

Tahaksime juhtida teie tähelepanu veel ühele asjale: oluline punkt. Parem on mitte näidata kõrgust protsentides, kuna reeglina need sel juhul ei tööta.

Üksikute lahtrite ja veergude suuruse määramine

Kui arvate, et brauser ei määranud lahtrite sisu põhjal veergude laiust õigesti, siis on teil õigus lahtrite ja veergude suurused ise määrata. Ja nüüd räägime sellest, kuidas HTML-tabelis lahtri suurust muuta.

Lahtrite suuruse muutmisel kasutatakse samu CSS-i atribuute nagu tabeli suuruste puhul, nimelt: laius Ja kõrgus.

Lahtritele stiilide lisamiseks võite kasutada ühte kahest valikust.

1. Andke lahtritele üksikute klasside nimed. See näeb välja selline: class="cell-50px"

   Ja pärast seda peaksite nende klasside jaoks stiile rakendama.

2. Luba atribuut stiilis, mille sisse kirjutage vajalik CSS-kood.

Praktikas näeb teine ​​​​võimalus välja selline:

...

Siiski tahame märkida, et lahtrite suurust ei ole vaja väga sageli muuta. Reeglina tehakse seda olukordades, kus on vaja tabeli veergudele määrata teatud laius. Sel juhul on probleem lihtsam lahendada. Peate lihtsalt määrama esimese rea lahtrite laiuse.

Tabel antud suurustega

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Tulemus brauseris:

Kuidas muuta tabelis fondi suurust

Sageli on vaja muuta tabelis oleva teksti suurust. Näiteks päise lahtrites. Seda saab teha CSS-i atribuudi abil fondi suurus. Määrame elementide fondi suuruse :

Th (fondi suurus: 30 pikslit;)

Sellega on õppetund lõpetatud. Soovitan teil oma kodutööd hoolikalt läbi mõelda. Lihtsalt uurige seda hoolikalt ja mõelge sellele. Kõike paremat kõigile!

 

---

Loe:
Miks unistate tormist merelainetel? Eelarvega arvelduste arvestus Kodujuustust pannil valmistatud juustukoogid - kohevate juustukookide klassikalised retseptid Juustukoogid 500 g kodujuustust Musta pärli salat ploomidega Musta pärli salat ploomidega Lecho tomatipastaga retseptid