Uporaba CSS za dodajanje notranjih meja v tabelo HTML

Morda ste slišali, da se tabele CSS in HTML ne mešajo. To ni tako. Da, z uporabo tabel HTML za postavitev ni več najboljša praksa spletnega oblikovanja, ker so bili zamenjani s slogi postavitve CSS, vendar so tabele še vedno pravilna oznaka, ki jo je treba uporabiti za dodajanje tabelarnih podatkov na spletno stran.

Ker se mnogi strokovnjaki iz spletnega mesta sklanjajo od miz, ki mislijo, da niso nič drugega kot težave, mnogi od teh strokovnjakov nimajo veliko izkušenj, ki delajo s tem skupnim elementom HTML, in se borijo, ko morajo na spletno stran 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 za dodajanje vrstic znotraj posameznih celic.

Če želite uporabiti sloge, zajete v tej vadnici, potrebujete tabelo na spletni strani. Potem ustvarite slogovni list kot notranji slogovni list v glavi dokumenta (če imate opravka z eno samo stranjo) ali je priložen dokumentu kot zunanji slogovni list (če ima spletno mesto več strani). Slogi dodate v notranjo linijo v slogovno stran.

Preden začnete

Odločite se, 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
• 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 omrežja, dodajte na svojo slogovno oznako:

td, th {meja: trdna 1px črna;}

Kako dodati črte med samo stolpci v tabeli

Če želite dodati črte med stolpci, če želite ustvariti navpične črte, ki se na stolpcih tabele prikazujejo od vrha do dna, v slogovno tabelo dodajte naslednje:

td, th {meja-levo: trdna 1px črna;}

Če ne želite, da se v prvem stolpcu prikažejo navpične črte, dodate razred v th in td celice. V tem primeru predpostavimo razred brez meja na teh celicah in odstranite mejo s pravilom CSS. Razred HTML, ki ga uporabljate, je:

class = "brez meja">

Nato na slogovni list dodajte naslednji slog:

.no-meja {meja-levo: nič;}

Kako dodati črte med samo vrsticami v tabeli

Kot pri dodajanju vrstic med stolpci lahko dodate vodoravno črto med vrsticami z enim preprostim slogom, dodanim slogovnemu listu:

tr {meja-spodaj: trdna 1px črna;}

Če želite odstraniti mejo z dna tabele, bi temu še enkrat dodali razred

oznaka:

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 lažje, ker lahko razred dodate v vrstico, v katero želite vključiti vrstico.

class = "meja-spodaj">

Nato dodajte CSS na svojo slogovno oznako:

.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">

Nato dodajte naslednji CSS na svojo slogovno oznako:

.border {meja: trdna 1px črna;}

Kako dodati črte znotraj posameznih celic v tabeli

Če želite dodati črte znotraj vsebine celice, je to najlažje storiti z oznako vodoravnega pravila ().

Koristni nasveti

Če opazite vrzeli na vaših mejah, poskrbite, da je slog robovskega roba nastavljen na tabelo. V svojo slogovno oznako dodajte naslednje:

tabela {mejni propad: kolaps;}

Vse se lahko izognete in uporabite atribut meje v svoji oznaki mize. Realizirajte pa, da je ta atribut, čeprav ni opuščen, bistveno manj prožen kot CSS, saj lahko določite le širino meje in jo lahko imate samo okoli celice tabele ali nič.