Naučite se, kako ustvariti mejo tabele CSS v samo petih minutah
Morda ste slišali, da se tabele CSS in HTML ne mešajo. To preprosto ni res. Da, uporaba tabel HTML za postavitev ni več najboljša praksa za spletno oblikovanje, temveč je bila zamenjana s slogi postavitve CSS, vendar so tabele še vedno pravilna oznaka za uporabo za dodajanje tabelarnih podatkov na spletno stran.
Na žalost, ker se je veliko spletnih strokovnjakov izogibalo tabeli, ki so mislili, da so strup, mnogi od teh strokovnjakov nimajo dovolj izkušenj, ki delajo s tem skupnim elementom HTML in bojom, ko jih morajo obvladovati na spletni strani. Na primer, če imate tabelo na strani in želite v celice tabele dodati notranje vrstice.
Tabele meja CSS
Ko uporabljate CSS za dodajanje robov tabelam, dodaja le mejo okoli zunanje tabele. Če želite dodati notranje vrstice posameznim celicam te tabele, morate dodati meje notranjim elementom CSS. Oznako HR lahko uporabite tudi za dodajanje vrstic znotraj posameznih celic.
Če želite uporabiti sloge, zajete v tem članku, morate očitno imeti tabelo na svoji spletni strani. Nato v slogu dokumenta ustvarite slogovni list kot notranji slogovni list (verjetno boste to storili samo, če je vaša stran ena stran) ali pa je priložena dokumentu kot zunanji slogovni list (to je tisto, kar ste bo naredil, če bo vaše spletno mesto več strani - vam bo omogočilo, da vse strani natisnete iz enega zunanjega lista). Slogi boste dodali notranje linije v ta slogovni list.
Preden začnete
Najprej se morate odločiti, kam želite, da se vrstice pojavijo v tabeli. Imate več možnosti, vključno z:
- Okoli vseh celic, da se oblikuje mreža;
- Postavitev vrstic med samo stolpci;
- Samo med vrsticami; ali
- Med določenimi stolpci ali vrsticami.
Linije lahko postavite tudi okoli posameznih celic ali znotraj posameznih celic.
Kako dodati črte okrog vseh celic v tabeli
Če želite dodati črte okrog vseh celic v tabeli in ustvariti učinek, podoben omrežju, v svoj slogovni list dodajte naslednje:
td, th {
meja: trdna 1px črna;
}
Kako dodati črte med samo stolpci v tabeli
Če želite dodati črte med stolpci (to ustvari navpične črte, ki se ustvarjajo od zgoraj navzdol v stolpcih tabele), v svoj slogovni list dodajte naslednje:
td, th {
meja-levo: trdna 1px črna;
}
Nato, če ne želite, da se pojavijo v prvem stolpcu, boste morali dodati razred tistim th in td celicam. V tem primeru predpostavljamo, da imamo na teh celicah razred brez meja in odstranimo mejo s tem bolj specifičnim pravilom CSS. Tukaj je razred HTML, ki ga bomo uporabili:
class = "brez meja">
Potem lahko v naš slogovni list dodamo naslednji slog:
.no-meja {
meja-levo: nič;
}
Kako dodati črte med samo vrsticami v tabeli
Tako kot pri dodajanju vrstic med stolpci, lahko to storite z enim preprostim slogom, dodanim v vaš slogovni list. Spodnji CSS bi dodal navpične črte med vsako vrstico naše tabele:
tr {
meja-spodaj: trdna 1px črna;
}
In da bi odstranili mejo z dna tabele, bi znova dodali razred v to oznako tr:
class = "brez meja">
V svoj slogovni list dodajte naslednji slog:
.no-meja {
mejno spodaj: nobeno;
}
Kako dodati črte med posameznimi stolpci ali vrsticami v tabeli
Če želite le vrstice med določenimi vrsticami ali stolpci, morate uporabiti razred v teh celicah ali vrsticah. Dodajanje črte med stolpci je nekoliko težje kot med vrsticami, ker morate dodati razred v vsako celico v tem stolpcu. Če se vaša tabela samodejno ustvari iz neke vrste CMS , to morda ne bo mogoče, vendar če ročno kodirate stran, lahko dodate ustrezne razrede, kot je potrebno, da bi dosegli ta učinek.
class = "side-border">
Dodajanje vrstic med vrsticami je veliko lažje, saj lahko dodate razred samo v vrstico, v katero želite vključiti vrstico.
class = "meja-spodaj">
Nato dodajte CSS na vaš slogovni list:
.border-side {
meja-levo: trdna 1px črna;
}
.border-bottom {
meja-spodaj: trdna 1px črna;
}
Kako dodati črte okoli posameznih celic v tabeli
Če želite dodati črte okrog posameznih celic, dodate razred v celice, za katere želite, da rob:
class = "border">
Na vaš slogovni list dodajte naslednji CSS:
.border {
meja: trdna 1px črna;
}
Kako dodati črte znotraj posameznih celic v tabeli
Če želite dodati črte znotraj vsebine celice, je najlažji način, da to naredite s horizontalno oznako pravilnika (
).
Koristni nasveti
Če opazite vrzeli na vaših mejah, morate poskrbeti, da je slog robovskega razpona nastavljen na vašo mizo. V svoj slogovni list dodajte naslednje:
tabela {
mejni propad: kolaps;
}
Izogibate se lahko vsem zgornjemu CSS-u in uporabite atribut meje v svoji oznaki mize. Zavedajte pa se, da njegov atribut, čeprav ni opuščen, je precej manj fleksibilen kot CSS, saj lahko določite le širino meje in jo lahko uporabljate le okoli celice tabele ali nič.