Meje html tabele je mogoče enostavno spremeniti z uporabo orodij css. Konfiguracija njihovega prikaza je posledica lastnosti: kolaps in razmik. Če želite urediti pogled tabele, uporabite skupino lastnosti meje. Omogoča vam prilagoditev širine, barve, prisotnosti /odsotnosti meja, njihovega sloga in drugih funkcij prikaza.

Osnove

Velikost in pisava besedila, ozadja, zamik od roba okna brskalnika sta določeni v css v ohišju telesa.

telesa {
 družina pisav: Helvetica, Sans-serif;
velikost pisave: 5vw;
barva: črna;
barva ozadja: rgba (228228245);
polnilo: 20vh; 
}

Z uporabo slogov se oblikuje oblika matrike. Meja lastnosti omogoča, da določite vrednosti debeline, vrste in barve obrobe tabele html.

{
 širina meje: 2vw;
slog meje: pikčast;
obrobna barva: skyblue; 
}

Zmanjšana z barvo obrobe: širina.

{
 meja: 1px solid # 4c6ea1; 
}

Za določeno stran nastavite vzorec obrata-vrh (/desno /spodaj /levo).

{
 mejna barva: temno modra; 
} 

Oblazinjenje določa zamik znotraj celice od besedila do okvira, poravnava besedila nastavi poravnavo.

Uporaba slogov ima obliko tabele. Lastnost border vam omogoča, da določite vrednosti debeline, sloga in barve okvira. Padding določa zamik besedila, poravnava besedila nastavi poravnavo.

th, td {
 meja: 1vw solid # 4c6ea1;
oblazinjenje: 1vw;
poravnava besedila: levo; 
}

Brez okvirov

Za določitev obrobne barve, -številke in -stila ni potrebno uporabiti meje ali ločeno, saj je možno, da so html-tabele brez meja popolnoma razvite. Naslednja koda na primer nastavi ozadje, zamiki in zaobljene vogale (zadnja matrika brez notranjih in zunanjih linij).

tabela {
 poravnava besedila: levo;
barva ozadja: rgba (228228245);
radij meja-zgoraj-levo: 15em 1em;
polmer robov spodaj na desni: 15 am 1em; 
}
td, th {
 polnilo: 1.5 vw; 
}

Zaradi zmožnosti določanja ozadja za vsako celico lahko izgleda tabela brez meja, kot če bi bila.

tabela {
 poravnava besedila: levo;
barva ozadja: rgba (228228245);
širina: 70vw;
razmik meje: 2vh 2vh; 
}
td, th {
 oblazinjenje: 1,5 vh; 
}
td {
 barva ozadja: rgba (247247255); 
}

Meje html tabele lahko odstranite tako, da zapustite notranje. V ta namen, na primer, predpiše mejno lastnost za celice (tr), nastavi kolaps na sosednjih straneh in prepovedati risanje linij okrog matrike (skrito). Zadnje dejanje skriva vrstice celic, ki so ob vklopu zrušitvepojavijo na istem mestu, kjer so zunanji robovi tabele.

tabela {
 poravnava besedila: središče;
mejni zlom: propad;
barva ozadja: rgba (228228245);
polmer meje: 50%;
širina: 29vh;
višina: 10vh;
mejni slog: skrit; 
}
td {
 polnilo: 1,5 vh;
meja: 0,5 vh polno črna; 
}

Kolaps in ločeno

Ena od glavnih lastnosti tabele v html - border-collapse - določa, kako bodo prikazane meje celic. Lastnost ima lahko eno vrednost tri: zrušiti, ločiti, podedovati.

tabela {
 meja-kolaps: kolaps; 
}

Privzeto je vrednost nastavljena na ločeno, tako da bo vsaka celica imela svojo omejitev. Zaradi kolapsa lahko celične linije združite tako, da je njihova vsebina ločena z enim okvirjem. Slika prikazuje tri stanja zgoraj opisanih meja: brez slogov; z privzeto vrednostjo za kolaps z mejo; z vrednostjo kolapsa meje med celicami ostane skupna črta.

Dvojni okvirji

Lastnost kolapsa vam omogoča, da omejite celice v html tabeli neodvisno druga od druge in generične. Z njim se pogosto uporablja lastnost mejni razmik, ki ureja razdaljo med okvirjem celic. Določite lahko tudi vodoravno in navpično razdaljo.

tabela {
 razmik meja: 0,5 vw 1vw; 
}

Prva vrednost prikazuje razdaljo med priključki vodoravno, druga pa navpično. Če je okvir določen za samo tabelo, potem je razdalja od nje do celic prav tako sestavljena iz lastnosti spasinga, vendar pa lahko vpliva tudi na oblazinjenje matrice. V primerih, ko ima matrika ozadje, bo prazen prostor med celicami zapolnjen z njimi.

tabela {
 mejni razmik: 0,5 vw 1vw;
meja: 1vw trdna # 4c6ea1;
oblazinjenje: 1vw;
barva ozadja: črna; 
}
td, th {
 meja: 1vw trdna # 4c6ea1;
polnilo: 0.3 vw;
poravnava besedila: levo;
barva ozadja: bela; 
}

Prazne celice

Če tabela ne določa povezave meja celic, lastnost praznih celic omogoča prikaz njihovih linij in ozadij, ki se štejejo za prazne (označene kot vidnost ali nimajo znakov). ) Če želite prikazati okvir in ozadje vsake celice, lastnosti določijo vrednost predstave.

tabela {
 praznih celic: pokaži; 
}

Vrednost skrivnosti skriva mejo in ozadje praznih blokov. Če so vse celice v vrstici prazne, ima niz ničelno višino in samo eno navpično črto.

tabela {
 razmik meja: 0,5 vw 1vw;
meja: 0.1 vw solid # 4c6ea1;
polnilo: 0,5 vw;
barva ozadja: rgba (3331171 012);
prazne celice: skrij; 
}
td, th {
 meja: 0.3 vw solid # 4c6ea1;
polnilo: 0,5 vw;
poravnava besedila: levo;
barva ozadja: bela; 
}

Atribut

Za dodelitev meja skupin elementov (celice, stolpci, vrstice, skupine vrstic ali stolpcev) obstaja atribut pravil. Njegova vrednost je zapisana neposredno v oznako html oznake tabele.

Omogoča selektivno risanje okvirja elementov. Dovolj je, da določite atribut v html, ustvaril bo notranje črte med celicami. Obrobo html-tabele je treba ročno podati v css.

 
glava
glava
glava
 

 
Celica
Celica
Celica
 

 
Celica
Celica
Celica
 
 

tabela {
 meja-vrh: 1vw trdna # 486743;
velikost pisave: 5vw; 
} 

th, td {
 oblazinjenje: 2vw; 
}

Torej prva slika prikazuje čisto delo atributa brez dodatnega uokvirjanja skozi tabelo. Druga slika prikazuje zgornjo vrstico, ki je nameščena skozi navodila.

tabela {
 border-top: 1vw doted # 486743; 
}
 

Atribut ima lahko več vrednosti. Vse ustvari mejo med celicami okvirja z debelino, ki je enaka 1 px. Cols ustvarja črte med stolpci, vrstice - med vrsticami, brez robov. Naslednja slika prikazuje primere tabel z vsemi vrednostmi in vrsticami.

Barvo obrobe celic in širino okvirja lahko spremenite z atributom pravila, ki uporablja obrobo in obrobo.

Konflikti stilov

Celice, vrstice, stolpci in skupine elementov so lahkovrednosti lastnih meja. Hkrati se lahko razlikujejo v treh parametrih: slog, debelina in barva.

V načinu kolapsa obstajajo konflikti napadov. Zaradi dejstva, da se pravilo dveh različnih celic lahko uporabi za eno mejo, je treba določiti prednost izbire sloga. Kot piše E. Malchuk, zmaga najbolj "opazen" (razen skritega).

1. Če je eden od elementov v lastnostih mejnega sloga za sporno mejo nastavljen na skrito, zmaga ta slog. Skrita ima višjo prednost.
2. Najmanjša teža ni nobena. Prav tako narekuje, da se vrstice ne prikažejo, vendar je za dokončanje naročila potrebno, da imajo vsi elementi te vrstice to (nobeno) pravilo.
3. Med prefinjenimi in debelimi mejami je večja prednost.
4. Na enakih mejah, vendar različni slogi vedno osvojijo trdno dvojno, sledi trdna, črtkana, pikčasta.
5. Če so razlike le v barvah, je videz najmanjše komponente vedno višji (zasnova celic ima višjo prioriteto kot niz, in vrstice so višje od tabele).

Ilustracija konflikta

Ilustriranje konflikta slog je preprosto na mizi, ki se že obravnava. Dovolj je dodati več razredov celic in predpisatiza njihovo registracijo. Html ima obliko:

 
glava
glava
glava
 

 
Celica
celica
celica
 

 
celica
celica
celica
 
 
 

Ustrezna css.

telesa {
 družina pisav: Helvetica, Sans-serif;
velikost pisave: 5vw;
barva: črna;
rob: 0;
širina: 80vw;
barva ozadja: bela;
oblazinjenje: 3vw; 
} 

tabela {
 barva ozadja: rgba (3331171 012);
polnilo: 0,5 vw;
mejni zlom: propad;
razmik med robovi: 0,5 vw 1vw;
mejni slog: skrit; 
} 

th {
 oblazinjenje: 1vw;
poravnava besedila: levo;
meja: 0.1 vw solid # 4c6ea1; 
} 

td {
 oblazinjenje: 1vw;
obroba: 0,2 vw pikčasto # 4c6ea1; 
} 

.second_cell {
 obroba: 001 vw solid # 4c6ea1; 
} 

.third_cell {
 meja: 001 vw dvojno rdeča; 
}

Slogi okvirja

Oblika obrobe se lahko nastavi za vsako stran celice posebej. Da bi to naredili, je dovolj, da v mejnem slogu določite ne samo eno vrednost, temveč seznam štirih celic celice.

th, td {
 oblazinjenje: 1vw;
poravnava besedila: levo;
širina meje: 0,5 vw;
obrobna barva: temno;
slog meje: pikčast; 
}


.sest {
 mejna-top barva: skyblue;
mejni vrh: trdna;
border-right-width: 2vw;
slog obrobe spodaj: črtano;
style-border-left: hidden; 
}
 

Podatke lahko določite v eni vrstici tako, da nastavite eno do štiri različne vrednosti. Vsakdo tradicionalno postane pouk za eno od strank.

• Če nastavite dve vrednosti, bo prva ustrezala spodnji in zgornji meji, drugi pa levo in desno.
• Od prvih treh je odgovoren za zgornji, drugi za levi in ​​desni, tretji zaspodnji vrstici
• Štiri vrednosti enolično določajo vsako od linij od zgoraj navzgor proti levi.

Določitev meja celic je mogoče določiti s preprosto identifikacijo podatkov za vsako stran, kot je prikazano zgoraj.

Za okvir je na voljo deset stilov. Vsi spremenijo vrstico ali jo odstranijo:

• nobena - brez meja;
• skrita - resnejša nobena, blokira pojav značilnosti (v konfliktni situaciji);
• pikčasto - iz točk;
• črtkano - pikčasto;
• trdna trdna snov;
• dvojno trdno snov;
• utor - okvir je kot da se stisne v površino;
• grebensko konveksna črta;
• inset - pravzaprav se za eno stran elementa obnaša kot greben, če je uporabljen za celoten element, potem sta zgornji in levi osenčeni, spodnja desna pa je označena;
• Začetek - deluje kot utor, ko se nanaša na eno stran elementa, senčenje spodaj desno, zgornji in levi sta svetlejši.

Vsaka celica (na zgornji in levi strani) uporablja enega od slogov. Da ne tekmujejo med seboj, najbolj "šibke", dajo najvišjo vrednost.

tabela {
 barva ozadja: rgba (3331171 012);
oblazinjenje: 0,5 vw;
meja-kolaps: kolaps;
obroba: 0,3 vw črna; 
} 

th, td {
 oblazinjenje: 1vw;
poravnava besedila: levo; 
} 

.en {
 border-top: skrit;
border-left: hidden; 
} 

.two {
 mejni vrh: 0,4 vw dvojno # 4c6ea1;
meja levo: 0,4 vw dvojno # 4c6ea1; 
} 

.tri {
 mejni-vrh: 0.5 vw trdna # 4c6ea1;
meja levo: 0,5 vw trdna # 4c6ea1; 
}

. {{426) mejni vrh: 0,7 vw prelomljeno # 4c6ea1;
meja levo: 0,7 vw prečrtano # 4c6ea1; 
} 

.five {
 mejni vrh: 0,8 vw pikčasto # 4c6ea1;
meja levo: 0,8 vw pikčasto # 4c6ea1;
}

. {{436) mejni-vrh: 0,9 vw greben # 4c6ea1;
meja levo: 0,9 vw greben # 4c6ea1; 
} 

.seven {
 border-top: 1vw outset # 4c6ea1;
border-left: 1vw outset # 4c6ea1; 
}

. Osem {
 mejnega vrha: 1.1 vw groove # 4c6ea1;
meja levo: 1.1 vw utor # 4c6ea1; 
} 

.nine {
 mejni vrh: 1.2 vw inset # 4c6ea1;
meja levo: 1.2 vw inset # 4c6ea1; 
}
 

Strukturiranje gradiva

Narava podatkov, predstavljenih v matriki, pogosto zahteva spreminjanje meja same tabele, okvirjev njenih celic, vrstic ali stolpcev. Uporabite ga lahko za to:

• ponastavitev linij (meja-širina označuje vrednost v 0px);
• skrito.

Prednost je skrita v moči njegove prednostne naloge. Če pravilo deluje na meji dveh elementov hkrati in je v enem od njih mejni slog nastavljen na skrito, vrstica ne bo prikazana. To pomeni, da lahko varno naredite celotno tabelo in nato selektivno odstranite nepotrebne okvirje.

Uporaba skritih v povezavi s celicami onemogoča obnovo meje z drugimi metodami (razen težkih! Imporant). Torej, če morate odstraniti nekatere strani celice, je bolje, da jih ne uporabljate.

Recimo, da je tabela. Namen je odstraniti navpične meje znotraj prve vrstice. Označena je z ločeno oznako (glavo), zato dodatni razred ni potreben. Če uporabite skrito oznako za celotno oznako, jo zapišete z mejo levo, skupaj z notranjimi mejami in en del strani tabele, ki ga pogoj ne zahteva. Če ne uporabljate nič in matrične črte, potem bosta za notranjega hudiča obstajala dva neskladna pravila in nihče ne bo nasprotoval zunanjemu robu nobenega.pravilo, podano v tabeli, in stranka bo ostala v veljavi.

Odstranitev posameznih celičnih linij se izvede z uporabo razredov, ki so predpisani z ustreznimi elementi, kot je prikazano za posamezen slog, širino in barvno nalogo.

Medtem ko je odstranjevanje stranske meje v html tabeli lažje zaradi sklicevanja na zunanje matrične okvirje, ki kažejo na tabelo. Dovolj je, da napišete ukaz na določeno vrstico v css.

tabela {
 border-left-style: hidden; 
}

Odstranjevanje okvirov v vrsticah je enostavno izvajati z uporabo lastnosti meje z vrednostjo, skrito v tr. Ne izginejo le vodoravne črte tabele, temveč tudi stranske. Matrica se degenerira v vertikalne stolpce.