Če nastavite širino tabele kot atribut. Obnašanje praznih celic

ustvari niz in oznako :

ustvari glavo tabele, ki se nahaja znotraj oznake - takoj za uvodno oznako. Privzeta glava je nad tabelo in poravnana na njeno sredino.

Naslov tabele

1. celica 1. vrstice	2. celica 1. vrstice
1. celica 2. vrstice	2. celica 2. vrstice

Poravnava tabele. Poravnava vsebine celice

Atribut align oznake se uporablja za poravnavo tabele.

.

Z atributom align lahko tabelo postavite na levi ali desni (align= "left" in align= "right" ) del okna brskalnika ( nadrejeni element) ali v njegovem središču (align="center" ).

Poravnava vsebine vrstic ( oznaka

) in celice ( oznaka , ustvarjanje vrstice tabele nima atributov višine in širine. Višina vrstice ustreza višini celic, ki se nahajajo v njej. In širina vrstice je enaka širini tabele.

Vrednosti višine in širine so določene v slikovnih pikah ali odstotkih glede na prosti prostor. Za nastavitev vrednosti:

Določite pozitivno celo število. V tem primeru bo velikost podana v slikovnih pikah;

Določite pozitivno celo število, ki mu sledi simbol %.

Če vsebina tabele ali celice presega podane dimenzije, jo bo brskalnik prezrl, nove dimenzije pa bodo samodejno izbrane v skladu z dimenzijami vsebine.

) vodoravno in določitev njegove lokacije - nad ali pod mizo.

Privzeto je vsebina celice vodoravno poravnana levo in navpično poravnana na sredino.

Višina in širina tabele in celic

Privzete velikosti ( višina in širina) tako tabele kot celice se spreminjajo glede na velikost njihove vsebine.

Toda višino in širino tako tabele kot njenih posameznih celic je mogoče nastaviti eksplicitno – z uporabo atributov višine in širine.

Oznaka

) vodoravno prav tako z uporabo atributa align, navpično pa z atributom valign: Atribut poravnave sprejema vrednosti levo, desno, sredino in poravnano, ki določajo poravnavo vsebine vrstic in celic na njihovo levo, desno, sredino in širino; Atribut valign, ki ima vrednosti top​, bottom in middle, določa poravnavo vsebine vrstic in celic vzdolž njihovega zgornjega, spodnjega oziroma srednjega roba. Atribut align služi tudi za poravnavo glave ( oznaka

>

Kot je razvidno iz primera: z določitvijo širine ene od celic v stolpcu s tem določite širino celotnega stolpca; in z določitvijo višine ene od celic v vrstici določite višino celotne vrstice.

Obrobe tabele in celice

Tabela in vsaka njena celica ima svoje obrobe, ki privzeto niso vidne.

atribut robne oznake

vam omogoča, da naredite robove vidne in nastavite njihovo debelino. To bo prikazalo obrobe okoli tabele in okoli vsake celice.

Debelina obrobe ( ali okvirji) je podana v slikovnih pikah. Vrednost atributa border je pozitivno celo število. Če je atribut obrobe podan brez vrednosti, bo debelina obrobe 1 slikovna pika.

Debelina obrobe je nastavljena samo za mizo. Debelina obrobe okoli celic je vedno 1 piksel ( ali manjka).

Obroba je privzeto prikazana s 3D učinkom in je črna.

Atribut bordercolor določa barvo obrobe in odpravi učinek 3D. Atribut se lahko uporablja za nastavitev barve obrobe tabele ( oznaka

), nizi ( oznaka ) ali celice ( oznaka - vrstica tabele html
- stolpec (celica) tabele html.

Zdaj pa poskusimo združiti vse oznake v eno tabelo. Da bi to naredili, bomo ustvarili html tabelo, ki je sestavljena iz dveh vrstic in treh stolpcev:

Izdelava takšne html tabele je zelo enostavna. Najprej postavimo oznake same tabele, znotraj katere postavimo zahtevano število vrstic (v našem primeru 2 vrstici):

). Atributa bordercolor ne podpirajo vsi brskalniki, zato ni priporočljiv. Za nastavitev barve obrobe je bolje uporabiti sloge ( je že v CSS). Atribut obrobe ni določen. Zato ni meja. Debelina obrobe tabele je 3 slikovne pike. Celice imajo obrobe 1 slikovne pike! Prikaz delnega roba Obroba tabele in obroba okoli celic sta lahko delno prikazana. Atribut oznake okvirja določa, kje narisati rob tabele. Atribut rules določa, kako prikazati obrobe celic. "500px" frame="hsides" rules="cols" > Nameščeno vodoravno obrobe mize IN so prikazane meje med stolpci Oblazinjenje znotraj in zunaj celic Pri oblikovanju tabel v HTML bo morda potrebno za vizualno predstavitev nekaterih informacij in njihovo priročno zaznavanje koristno uporabo oblazinjenje znotraj in zunaj celic. Notranje oblazinjenje - od robov celic do njihove vsebine, se nastavi z atributom cellpadding oznake . Zunanje obrobe - razdalja med mejami sosednjih celic in razdalja od meja celice do meje tabele se nastavi z atributom cellpacing oznake . Cela števila so določena kot vrednosti atributov pozitivna števila, ki določajo razdaljo v slikovnih pikah. Oddaljenost od vsebine celice do njihovih robov je 10 slikovnih pik Razdalja med celicami in od celic do roba tabele je 25 slikovnih pik Združevanje celic Pri oblikovanju in oblikovanju tabel v HTML morate pogosto združiti sosednje celice. In če se pojavi takšna potreba, potem uporabite atributa colspan in rowspan oznake	. Atribut colspan določa število celic, ki bodo spojene vodoravno, atribut rowspan pa število celic, ki bodo spojene navpično. Oba atributa sta smiselna, če je tabela sestavljena iz več vrstic. 1 2 3 4 1 2 3 4 Ozadje mize. Ozadje celice tabele V HTML je mogoče nastaviti splošno ozadje za celotno tabelo, pa tudi ozadje za ločeno izbrano celico. Atribut oznake ozadja določa sliko, ki bo slika ozadja tabele. Vrednost atributa določa naslov slikovne datoteke - absolutno ali relativno pot do datoteke (). atribut oznake bgcolor nastavi barvo ozadja tabele. Barvo lahko nastavite na dva načina () Z istimi atributi lahko nastavite sliko ozadja in barvo ozadja za katero koli celico tabele ( oznaka , in . Katero koli od njih lahko uporabite za spreminjanje nekaterih lastnosti ene ali več vrstic tabele: to je ponovno poravnava vsebine celic v vrsticah vodoravno in navpično - z uporabo poravnati atribute oziroma valign; in nastavitev barve ozadja celic z uporabo atributa bgcolor. Pri uporabi teh oznak se morate zavedati več odtenkov, ki določajo razlike med njimi. Oznake in mora biti postavljen pred oznako , takoj za uvodno oznako tabele ). Temno roza je barva ozadja mize. Slika ozadja posamezne celice je nebo! Spomnimo se tudi na obstoj atributa cols oznake , ki brskalniku pove število stolpcev v tabeli. Uporaba atributa cols omogoča brskalniku hitrejši prikaz vsebine tabele. Urejanje tabele V tem razdelku si bomo ogledali oznake, ki se uporabljajo pri urejanju več elementov tabele hkrati. Te oznake lahko razdelimo v dve skupini. Prva skupina vključuje oznake in . So skoraj enaki in služijo za nastavitev nekaterih lastnosti in spreminjanje lastnosti enega ali več stolpcev tabele. Ena od teh oznak je nameščena takoj za oznako . Recimo, da je to oznaka . Uporaba atributa span oznake navedite število stolpcev, za katere bodo uporabljeni atributi align, valign ali width ( vodoravno, navpično poravnavo vsebine celic stolpcev ali nastavitev širine stolpcev). Če je atribut span v oznaki manjka, bodo spremenjene značilnosti enega – prvega stolpca tabele. Drugič, ko uporabite oznako lastnosti so nastavljene za naslednje ( naslednji - če atribut span manjka) stolpce tabele itd. "2" širina="70px" > 1 2 3 4 5 1 2 3 4 5 V drugo skupino oznak spadajo tudi oznake, ki so med seboj skoraj enake . Nizi, postavljeni v oznako so predstavljeni na vrhu tabele, vrstice pa so obdane z oznako bo na dnu tabele. Obe oznaki je mogoče uporabiti samo enkrat znotraj iste tabele. Oznaka lahko uporabite večkrat znotraj oznake . "desno" bgcolor="#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 1. Kaj so tabele HTML in zakaj so potrebne? html tabele- to je ena najosnovnejših komponent vsake html strani in s tem vsakega spletnega mesta. Na primer, celotno spletno mesto je sestavljeno iz tabel: slike, besedila, povezave, obrazci za registracijo - vse je postavljeno relativno drug proti drugemu s pomočjo html tabel (v resnici je celotno spletno mesto tudi v eni veliki tabeli). 2. Katere oznake imajo tabele html? Oznake, ki definirajo tabelo html, so zapisane takole: Ker pa vemo, da so vse tabele sestavljene iz vrstic in stolpcev (celic), moramo tudi zanje nastaviti oznake:

Nato vsako vrstico razdelimo na celice z uporabo oznak stolpcev:

- celica 1.1
- celica 1.2
- celica 1.3


- celica 2.1
- celica 2.2
- celica 2.3

Pravzaprav je prva številka v napisih številka vrstice, druga pa številka celice (1x2 - prva vrstica, druga celica itd.).

3. Kako nastaviti barvo ozadja html tabel?

Zdaj pa ugotovimo, kako nastaviti ozadje tabele ali vsake celice posebej.

Torej, za nastavitev ozadja se uporablja atribut bgcolor="barva_ozadja".

Na primer, če moramo nastaviti eno barvo za celoten znak, potem to naredimo takole:

bgcolor="barva_ozadja">

- celica 1.1
- celica 1.2
- celica 1.3


- celica 2.1
- celica 2.2
- celica 2.3

Na primer, če morate narediti znak rumena barva, potem pišemo:

Če je potrebno nastavite barvo ozadja za vrstico html tabelo, nato atribut bgcolor="barva_ozadja" uporabite za oznako

Nastaviti moramo širino tabele, včasih pa moramo spremeniti širino tabele. In to moramo ugotoviti. Kako lahko spremenim širino tabele? Širina tabele se lahko spremeni v slikovnih pikah ali odstotkih... Zdaj bomo začeli spreminjati širino tabele v html! Zadnjič smo naredili tabelo širine 500 pikslov, s tremi stolpci in tremi vrsticami (ne pozabite na atribut border="1 - ki je odgovoren za obrobo)" Tukaj je koda za to tabelo; Zdaj, da bi razumeli, kako spremeniti širino tabele ali stolpca, spremenimo in dodamo nekaj številk naši kodi table width="500" – spremenite v 599. Ta stran je zgrajena na tabelah, širina besedilnega polja, tj. kjer se nahajajo te besede, je 600 slikovnih pik. Dobili bomo: Naredimo širino stolpca št. 2 200 slikovnih pik: Naredimo širino stolpca št. 3 299 slikovnih pik: In dobimo to kodo: Poglejmo našo mizo Sedaj pa spremenimo vrednost atributa širine na polovico = 50%. Pogledamo našo tabelo, ki je 50%. To je vse, kar sem vam želel povedati o tem, kako spremeniti širino tabele. Zdaj pa preidimo na višino mize! obvesti brskalnik, da je tabela dokončana. Vsaka tabela je sestavljena iz stolpcev in vrstic. Oznaka
celico v vrsti. V skladu s tem, kolikor celic je vključenih v vrstico, bo toliko stolpcev v tabeli. Oznaka	ustvarja tudi celico. Njegova razlika od oznake	je, da celica, ustvarjena z oznako	je celica glave: njena vsebina je centrirana in če je besedilo, jo brskalnik prikaže krepko. Vsebina celice, ki jo ustvari oznaka	privzeto se nahaja na njegovi levi strani. Oznaka

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

V tem primeru atribut številka celice kompleti Bela barva besedilo znotraj oznake.

Na popolnoma enak način je določeno barva vsake celice posebej. Na primer, če želite spremeniti barvo celice 1.2 v modro, potem znotraj začetne oznake atribut bgcolor="barva_ozadja":

4. Kako nastaviti velikost širine in višine celic tabele html?

Torej, če želite ročno nastaviti širino in višino celic, uporabite atribute višine in širine. Nastavimo jih lahko za celotno tabelo, za eno vrstico ali za celico (stolpec). Višino in širino lahko določite v slikovnih pikah ali odstotkih. V našem primeru bomo za stolpce (celice) nastavili širino in višino v pikslih.

višina- atribut, ki določa višino celice

premer- atribut, ki določa širino celice

In zdaj za primer:

Zdaj bom razložil, zakaj v vsaki vrstici višino celice nastavimo le enkrat.

Če v vrsti nastavite višino katere koli celice, ki je večja kot za druge, bodo kljub temu vse celice (stolpci) vaše vrstice po višini enake največji. In širino vsake vrstice je najbolje nastaviti ločeno!

Za celotno mizo lahko nastavite višino in širino. V tem primeru bodo vse celice (stolpci) in vrstice enakomerno razdelile prostor, ki jim je dodeljen, če jim teh parametrov ne nastavite osebno (v odstotkih skupne širine (višine) tabele ali v slikovnih pikah).

Prav tako morate zelo pogosto nastaviti višino višino in širino širino v odstotkih:

vsebino celice

Če nastavimo širino celice na 40 odstotkov, kot v našem primeru, to pomeni, da nam ostane še 60 odstotkov za preostale celice, tj. vsota njihovih širin ne sme presegati 60 odstotkov. Vse je zelo preprosto: skupaj imamo le 100%. Štejemo: 100 – 40 = 60.

5. Kako poravnati besedilo v html tabeli?

Zdaj pa ugotovimo, kako poravnati besedilo v naši tabeli html na levo, desno in sredino.

To se naredi z uporabo atributa:

align=”levo”- poravna besedilo znotraj tabele html na levo

align=”center”- poravnava html besedilo mize na sredini

poravnaj=”desno”- poravna besedilo v html tabeli na desno

V skladu s tem lahko atribut poravnave sprejme tudi vrednosti desno in levo. Pomen utemeljitve, kadar se uporablja z oznako atributa align ni mogoče sprejeti.

na primer html kodo tabela z besedilom, poravnanim na sredino, izgleda takole:

align="center"> poravnaj="levo"> 1x1 align="center">1.2 poravnaj="desno"> 1x3 poravnaj="levo">2.1 align="center"> 2x2 poravnaj="desno">2.3

Z registracijo atributa align="center" v odprtju

, smo tabelo html poravnali na sredino strani brskalnika.

To je rezultat, ki ga boste dobili v brskalniku:

1x1	1.2	1x3
2.1	2x2	2.3

Zdaj pa si oglejmo primer, kako poravnati besedilo v html tabeli vzdolž zgornjega ali spodnjega roba, to je, kako lahko zagotovite, da vsebina celice ni le točno na sredini (kot privzeto ), pa tudi na vrhu ali dnu.

Navpična poravnava je določena z atributom:

valign="top"- vsebina se nahaja na vrhu celice

valign="sredina"- vsebina se nahaja v središču celice

valign="spodaj"- vsebina se nahaja na dnu celice

Oglejmo si te atribute na našem primeru:

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

To dobimo, če pogledamo rezultat atributov v brskalniku: poravnati in valign:

1x1	1.2	1x3
2.1	2x2	2.3

6. Kako združiti celice in stolpce html tabele?

V tem delu našega članka bomo govorili o atributih colspan in razpon vrstic.

colspan- določa število stolpcev, ki jih dana celica pokriva

razpon vrstic- določa število vrstic, do katerih se ta celica razteza

Vrednote colspan in razpon vrstic lahko sprejme vrednost od 2 ali več, tj. celica se lahko razteza čez dva ali več stolpcev (vrstic).

Torej, zdaj bomo z uporabo primera raztegnili celico 1x1 v dva stolpca (celice). Za to bomo uporabili atribut colspan="2" in ga dodelili celici 1x1. Koda bo videti takole:

Kot lahko vidimo, se celica 1x1 razteza čez dolžino dveh celic. V skladu s tem je njegova dolžina enaka seštevku dolžin teh dveh celic (160 slikovnih pik). Za celico 1x1 nismo določili atributa širine, a če bi se odločili za to, bi širino nastavili na 160 slikovnih pik. Upoštevajte tudi, da v našem primeru ni celice 1x3, tj. v prvi vrsti sta samo dve celici, zakaj – o tem smo že razpravljali – je celica 1x1 enaka dvema celicama, zahvaljujoč atributu colspan.

Z atributoma colspan in rowspan je treba ravnati zelo previdno. Napaka lahko povzroči, da se vaše spletno mesto zruši.

In zdaj, ko razumemo parameter colspan, poglejmo parameter rowspan. Načelo delovanja je enako:

colspan="2"> 1.1 1.2 2.1 2.2

1.1		1.2
2.1	2.2

Tako smo se naučili združevati celice v vrsticah in stolpcih html tabel.

7. Kako odstraniti, dodati ali spremeniti zamike in kako postaviti okvir za html tabelo?

Torej, prej smo ustvarili tabelo html, vdolbine med celicami so jasno vidne. Da bodo še bolje vidni, dodajmo okvir za našo mizo. To se naredi z uporabo atributov:

border="širina obrobe v slikovnih pikah"- nastavi širino okvirja

bordercolor="barva obrobe"- nastavi barvo okvirja

Dajmo na primer naši html tabeli črn okvir širine 1 piksel.

Za to oznako

dodajte atribute:

Zdaj lahko jasno vidimo zamike med celicami tabele html in zamike od notranjih robov celic do besedila. Zato te vdolbine brez težav uredimo. Atributi so za ta namen:

cellspacing="širina prostora v slikovnih pikah"- prostor med celicami

cellpadding="širina oblazinjenja v slikovnih pikah"- zamik znotraj celice (od roba celice do besedila, slike, povezave...)

Na primer, naredimo zamik med celicami 10 slikovnih pik in povečajmo zamik od roba celice do besedila na 20 slikovnih pik. To se naredi takole:

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

Če pogledamo rezultat v brskalniku, jasno vidimo, da je razdalja med celicami ( razmik celic) naše tabele html se je povečala na 10 slikovnih pik, razdalja med besedilom in notranji rob celic povečali za 20 slikovnih pik.

1.1		1.2
2.1	2.2

Če morate v celoti odstraniti alineje, preprosto navedite cellpadding="0" in razmik celic="0".

8. Kako vstaviti eno html tabelo v drugo?

Bližamo se zadnji fazi preučevanja html tabel. Zdaj se bomo naučili, kako vstaviti eno tabelo v drugo.

Z uporabo primera bomo znotraj celice 1.2 vstavili novo tabelo, sestavljeno iz ene vrstice in dveh stolpcev. V interni html tabeli bomo nastavili rdečo obrobo širine 2 pikslov in razdaljo med celicami 0 pikslov. Na vrh celice bomo postavili tudi notranjo mizo.

To se naredi zelo preprosto:

1.1 3.1 3.2 2.1 2.2

To se je zgodilo zaradi novih transformacij naše tabele (rdeče celice so notranja tabela, ki se nahaja znotraj velike tabele):

1.1		3.1 3.2
2.1	2.2

Na tej točki bomo končali ta članek. Mislim, da se je izkazalo za uspešno in ni težko razumljivo in upam, da ne boste imeli več težav s tabelami.

Specifikacija CSS daje neomejene možnosti za oblikovanje tabel. Tabela in celice tabele privzeto nimajo vidne meje in ozadje, medtem ko celice v tabeli niso sosednje.

Širina celic tabele je določena s širino njihove vsebine, zato je lahko širina stolpcev tabele različna. Višina vseh celic v vrsti je enaka in je določena z višino najvišje celice.

Oblikovanje tabel

1. Obrobe tabele

Tabela in celice v njej so privzeto prikazane v brskalniku brez vidnih robov. Obrobe tabele so določeni z lastnostjo meje:

Tabela ( border-collapse: kolaps; /*odstrani prazne prostore med celicami*/ rob: 1px polna siva; /*nastavljeno za tabelo zunanja meja siva 1px debeline*/ )

Obrobe celic glave vsak stolpec je določen za th element:

Th (obroba: 1px polno siva;)

Meje celic telesa tabel so navedena za element td:

Td (obroba: 1px polno siva;)

Debelina obrob sosednjih celic se ne podvoji, zato lahko nastavite obrobe za celotno tabelo na naslednji način:

Th, td (obroba: 1px polno siva;)

Zunanjo mejo tabele lahko poudarite tako, da ji povečate širino:

Tabela (obroba: 3 slikovne pike polno siva;)

Meje se lahko določijo delno:

/* nastavi sivo zunanjo obrobo debeline 3 slikovnih pik za tabelo */ tabela (obroba-zgornja: 3 slikovne pike polna siva; ) /* nastavi sivo obrobo debeline 1 slikovnih pik za celico telesa tabele */ td (obroba-spodnja: 1 slikovna pika polna siva;)

Več o mejni nepremičnini si lahko preberete.

2. Kako nastaviti širino in višino mize

Privzeto širina in višina mize določena z vsebino njenih celic. Če širina ni določena, bo enaka širini najširše vrstice (vrstice).

Širina tabele in stolpca se nastavi z lastnostjo širine. Če je za tabelo podana tabela (širina: 100 %;), bo širina tabele enaka širini bloka vsebnika, v katerem se nahaja.

Širina tabele in stolpcev je običajno določena v px ali %, na primer:

Tabela (širina: 600 slikovnih pik;) th (širina: 20 %;) td: prvi otrok (širina: 30 %;)

Višina mize ni določeno. Višina vrstice s tabelami je mogoče manipulirati tako, da elementom dodate zgornje in spodnje oblazinjenje in . Fiksiranje višine z lastnostjo višine ni priporočljivo.

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

3. Kako nastaviti ozadje tabele

Privzeto ozadje mize in celice so prozorne. Če ima stran ali blok, ki vsebuje tabelo, ozadje, bo prikazano skozi tabelo. Če je ozadje določeno za tabelo in celice, bo na mestih, kjer se ozadje tabele in celic prekrivajo, vidno samo ozadje celic. Ozadje tabele kot celote in njenih celic je lahko:
polnjenje,
,
.

4. Stolpci tabele

Model tabele CSS je osredotočen predvsem na vrstice (vrstice), oblikovane z uporabo oznake

. V praksi se pojavljajo primeri, ko je potrebno posebno oblikovanje stolpcev, kar je možno na naslednje načine:

z uporabo oznake

Ozadje lahko nastavite za poljubno število stolpcev;

z uporabo izbirnika tabela td:first-child , tabela td:last-child lahko nastavite sloge za prvi ali zadnji stolpec tabele (razen za prvo celico glave tabele);

Z izbirnikom tabele td:nth-child (pravilo za izbiro stolpca) lahko nastavite sloge za poljubne stolpce tabele.

Več o selektorjih CSS lahko preberete.

5. Kako dodati naslov tabele

Tabeli lahko dodate naslov z uporabo oznake , z uporabo lastnosti caption-side pa ga lahko postavite pred ali pod tabelo. Če želite besedilo naslova vodoravno poravnati, uporabite lastnost text-align. Podedovano.

...

Tabela št. 1

Podjetje	Q1	Q2	Q3	Q4

napis (stran napisa: spodaj; poravnava besedila: desno; oblazinjenje: 10px 0; velikost pisave: 14px; ) riž. 2. Primer prikaza glave pod tabelo

6. Kako odstraniti prostor med okvirji celic

Privzeto so okvirji celic tabele ločeni z majhnim presledkom. Če za tabelo nastavite border-collapse: collapse, bo vrzel odstranjena. Nepremičnina se deduje.

Sintaksa

Tabela (border-collapse: collapse;)
riž. 3. Primer tabel z združevanjem in ločenimi okvirji celic

7. Kako povečati prostor med celičnimi okvirji

Z lastnostjo border-spacing lahko spremenite razdaljo med okvirji celic. Ta lastnost velja za tabelo kot celoto. Podedovano.

Sintaksa

Tabela (border-collapse: ločeno; border-spacing: 10px 20px;) tabela (border-collapse: ločeno; border-spacing: 10px;)
riž. 4. Primer tabel s povečanimi presledki med okvirji celic

8. Kako skriti prazne celice tabele

Lastnost praznih celic skrije ali prikaže prazne celice. Vpliva samo na celice, ki ne vsebujejo nobene vsebine. Če je celica nastavljena na ozadje in tabela na tabela (border-collapse: collapse;), potem celica ne bo skrita. Podedovano.

Podjetje	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabela (obroba: 1px polna #69c; border-collapse: ločeno; prazne celice: skrij; ) th, td (obroba: 2px polna #69c;) riž. 5. Primer skrivanja prazne celice tabele

9. Postavite tabelo z lastnostjo table-layout

Postavitev tabele je določena z enim od dveh pristopov: fiksna postavitev ali avtomatska postavitev. Pod postavitvijo v v tem primeru se nanaša na to, kako je širina tabele porazdeljena med širine celic. Nepremičnina se ne deduje.

Sintaksa

Tabela (postavitev tabele: fiksna;)

10. Najboljše postavitve tabel

1. Horizontalni minimalizem

Horizontalne tabele so tabele, v katerih se besedilo bere vodoravno. Vsaka entiteta je ločena vrstica. Takšnim tabelam lahko daste minimalističen videz tako, da pod glavo postavite obrobo dveh slikovnih pik.

Zaposleni	Plača	Bonus	Nadzornik
Stephen C. Cox	$300	$50	Bob
Josephine Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tabela ( družina pisav: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; velikost pisave: 14 slikovnih pik; ozadje: belo; največja širina: 70 %; širina: 70 %; strni rob: strni; besedilo -align: left;) th (font-weight: normal; barva: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; ) td (barva: #669; padding: 9px 8px; prehod: .3s linearno; ) tr:hover td (barva: #6699ff;)

Če je vrstic veliko, jih je zaradi te zasnove tabele težko brati. Če želite rešiti to težavo, lahko pod vse elemente td dodate obrobo ene slikovne pike.

Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; conversion: .3s linear; )/*ostala koda je kot v zgornjem primeru*/

Če elementu tr dodate učinek :hover, bodo tabele, zasnovane v minimalističnem slogu, lažje berljive. Ko z miško premaknete nad celico, so druge celice v isti vrstici hkrati označene, kar olajša sledenje informacijam, če imajo tabele več stolpcev.

Th (teža pisave: normalna; barva: #039; oblazinjenje: 10px 15px; ) td (barva: #669; obroba na vrhu: 1px polna #e8edff; oblazinjenje: 10px 15px; ) tr:hover td (ozadje: #e8edff ;)

2. Vertikalni minimalizem

Čeprav se takšne tabele redko uporabljajo, so navpično usmerjene tabele uporabne za kategorizacijo ali primerjavo opisov predmetov, ki jih predstavlja stolpec. Oblikujete jih lahko v minimalističnem slogu, tako da dodate prostor za ločevanje stolpcev.

Th ( teža pisave: normalno; obroba-spodnja: 2 slikovnih pik polna #6678b1; obroba-desna: 30 slikovnih pik polna #fff; obroba-levo: 30 slikovnih pik polna #fff; barva: #039; oblazinjenje: 8 slikovnih pik 2 slikovnih pik; ) td ( obroba- desno: 30px polno #fff; obroba-levo: 30px polno #fff; barva: #669;

3. "Škatlasti" slog

Najbolj zanesljiv slog za oblikovanje miz vseh vrst je tako imenovani "boxed" stil. Dovolj je, da izberete dobrega barvna shema in nato nastavite barvo ozadja za vse celice. Ne pozabite poudariti razlike med črtami tako, da nastavite obrobe kot ločilo.

Th (velikost pisave: 13px; teža pisave: normalno; ozadje: #b9c9fe; obroba na vrhu: 4px polna #aabcfe; obroba na dnu: 1px polna #fff; barva: #039; oblazinjenje: 8px; ) td ( ozadje : #e8edff; border-bottom: 1px solid #fff; 1px tr:hover td (ozadje: #ccddff);

Najtežje je najti barvno shemo, ki se bo harmonično ujemala z vašo spletno stranjo. Če je spletno mesto zahtevno glede grafike in oblikovanja, boste zelo težko uporabljali ta slog.

Tabela ( družina pisav: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; velikost pisave: 14 slikovnih pik; največja širina: 70 %; širina: 70 %; poravnava besedila: sredina; strnitev obrobe: strnitev ; obroba-top: 7px-spodaj: 7px-size: 13px; font-weight: #e8edff; obroba-levo: 1px polna #9baff1; barva: 8px; obroba-desno: 1px polna #aabcfe; barva: #669; obroba: 8px

4. Horizontalna zebra

Zebra miza izgleda precej privlačno in udobno. Dodatna barva Ozadje lahko ljudem služi kot vizualni znak pri branju tabele.

Th ( teža pisave: normalno; barva: #039; oblazinjenje: 10px 15px; ) td ( barva: #669; obroba na vrhu: 1px polna #e8edff; oblazinjenje: 10px 15px; ) tr:nth-child(2n) ( ozadje: #e8edff;)

5. Časopisni stil

Če želite doseči tako imenovani časopisni učinek, lahko elemente tabele obrobite in se igrate s celicami v notranjosti. Lahek, minimalističen časopisni slog bi lahko izgledal takole: poigrajte se z barvno shemo, dodajte obrobe, oblazinjenje, različna ozadja in učinek lebdenja, ko miškin kazalec premaknete nad črto.

Tabela (obroba: 1px polna #69c;) th (teža pisave: normalna; barva: #039; obroba na dnu: 1px črtkana #69c; oblazinjenje: 12px 17px; ) td (barva: #669; oblazinjenje: 7px 17px; ) tr:hover td (ozadje: #ccddff;)

Tabela (obroba: 1px polna #69c;) th (teža pisave: normalna; barva: #039; oblazinjenje: 10px; ) td (barva: #669; obroba na vrhu: 1px črtkana #fff; oblazinjenje: 10px; ozadje: #ccddff;) tr:hover td (ozadje: #99bcff;)

Tabela (obroba: 1px polna #6cf;) th ( teža pisave: normalna; velikost pisave: 13px; barva: #039; preoblikovanje besedila: velike črke; obroba desno: 1px polna #0865c2; obroba na vrhu: 1px polna #0865c2; obroba-levo: 1px polna #0865c2; obroba-spodnja stran: 20px;

6. Ozadje mize

Če iščete hitro in edinstven način oblikovanje mize, izberite privlačno sliko ali fotografijo, povezano s temo mize, in jo nastavite kot ozadje mize.

Png") 98% 86% brez ponavljanja; ) th ( teža pisave: normalna; velikost pisave: 14 slikovnih pik; barva: #339; oblazinjenje: 10 slikovnih pik 12 slikovnih pik; ozadje: belo; ) td ( barva: #669; obroba- zgoraj: 1px polno belo; ozadje: rgba(51, 51, 153, .2); tr:hover td (ozadje: rgba(51, 51, 153, .1); )

Mere tabele, njena višina in širina se samodejno določijo glede na to, kaj celice vsebujejo. Več kot je vsebine v celicah, večja je velikost tabele in obratno.

Vendar vam funkcije CSS omogočajo spreminjanje velikosti tabele v HTML tako, da natančno določite širino in višino, ki ju potrebujete. Če smo pošteni, je treba opozoriti, da vam atributi tabele omogočajo tudi nastavitev zahtevane velikosti. Vendar bomo za zdaj govorili le o CSS.

Poudariti je treba, da ima vsaka tabela svojo najmanjšo širino in minimalno višino, na kateri vpliva njena vsebina. In tudi če nastavite vrednosti širine in višine še manjše, se ne bo zgodilo nič. Stranice mize ne bodo presegle svojega minimuma.

Če želite določiti širino tabele, morate uporabiti lastnost CSS premer, in za nastavitev višine morate uporabiti lastnost višina.

Na primeru je videti takole.

Tabela (širina: 500 slikovnih pik; višina: 100 slikovnih pik; )

Rezultat v brskalniku:

Celotna koda:

Tabela z danimi velikostmi

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

Vrednosti širine in višine tabele lahko določite kot absolutna vrednost(v slikovnih pikah) in relativno – v odstotkih. Na primer 20 slikovnih pik oziroma 20 %.

Če za nastavitev dimenzij tabele uporabite odstotke, bodo izračunani na podlagi dimenzij nadrejenega elementa. Če govorimo o našem primeru, torej govorimo o o oknu brskalnika.

Obstaja še en pomen - avto. Poseben pa je, ker se z njegovo pomočjo privzeto avtomatsko izračuna širina in višina tabele. V praksi določanje te vrednosti izgleda takole.

Širina: avto;

Višina: avto;

Še na eno stvar bi vas radi opozorili: pomembna točka. Bolje je, da višine ne navedete v odstotkih, saj praviloma v tem primeru ne bodo delovale.

Določanje velikosti posameznih celic in stolpcev

Če menite, da brskalnik ni pravilno nastavil širine stolpcev glede na vsebino celic, potem imate pravico, da sami določite velikosti celic in stolpcev. In zdaj bomo govorili o tem, kako spremeniti velikost celice v tabeli HTML.

Spreminjanje velikosti celic se izvaja z enakimi lastnostmi CSS kot velikosti tabel, in sicer: premer in višina.

Če želite celicam dodati sloge, lahko uporabite eno od dveh možnosti:

1. Dajte celicam imena posameznih razredov. Videti bo takole: class="cell-50px"

   In potem bi morali uporabiti sloge za te razrede.

2. Omogoči atribut stil, znotraj katerega vpišite potrebno kodo CSS.

V praksi bo druga možnost videti takole:

...

Vendar pa želimo opozoriti, da ni treba pogosto spreminjati velikosti posameznih celic. Praviloma se to naredi v situacijah, ko je treba nastaviti določeno širino stolpcev tabele. V tem primeru se težava lažje reši. Samo določiti morate širino celic v prvi vrstici.

Tabela z danimi velikostmi

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

Rezultat v brskalniku:

Kako spremeniti velikost pisave v tabeli

Pogosto je treba spremeniti velikost besedila v tabeli. Na primer v celicah glave. To je mogoče storiti z lastnostjo CSS velikost pisave. Nastavimo velikost pisave za elemente :

Th (velikost pisave: 30px; )

To zaključuje to lekcijo. Predlagam, da dobro premislite o domači nalogi. Samo natančno ga preučite in razmislite o tem. Vse dobro vsem!

 

---

Preberite:
Zakaj sanjate o nevihti na morskih valovih? Računovodstvo obračunov s proračunom Skutni kolački v ponvi - klasični recepti za puhaste sirove kolačke Skutni kolački iz 500 g skute Solata Črni biser s suhimi slivami Solata Črni biser s suhimi slivami Recepti lecho s paradižnikovo pasto