Este posibil să fi auzit că tabelele CSS și HTML nu se amestecă. Nu este cazul. Da, folosirea tabelelor HTML pentru aspect nu mai este o practică optimă pentru designul de web, deoarece acestea au fost înlocuite de stilurile de aspect CSS, dar tabelele sunt încă marcajele corecte care trebuie folosite pentru a adăuga date tabulare pe o pagină Web.
Deoarece atât de mulți profesioniști din domeniu sunt timizi de la tabele, considerând că nu sunt altceva decât probleme, mulți dintre acești profesioniști au puțină experiență în acest element HTML comun și se luptă atunci când trebuie să adauge linii interne la celulele de pe o pagină Web.
CSS Tabelul frontierelor
Când utilizați CSS pentru a adăuga margini la mese, acesta adaugă numai marginea în afara tabelului. Dacă doriți să adăugați linii interne la celulele individuale ale acelei mese, trebuie să adăugați margini la elementele CSS interioare. Puteți utiliza eticheta HR pentru a adăuga linii în interiorul celulelor individuale.
Pentru a aplica stilurile acoperite în acest tutorial, aveți nevoie de un tabel pe o pagină Web. Apoi, creați o foaie de stil ca o foaie de stil internă în capul documentului dvs. (dacă aveți de-a face doar cu o singură pagină) sau atașați la document ca o foaie de stil externă (dacă site-ul are mai multe pagini). Ați pus stilurile pentru a adăuga linii interioare în foaia de stil.
Inainte sa incepi
Decideți unde doriți ca liniile să apară în tabel. Aveți mai multe opțiuni, inclusiv:
- În jurul tuturor celulelor pentru a forma o rețea
- Poziționarea liniilor între doar coloanele
- Doar între rânduri
- Între coloane sau rânduri specifice.
De asemenea, puteți poziționa liniile în jurul celulelor individuale sau în interiorul celulelor individuale.
Cum se adaugă linii în jurul tuturor celulelor dintr-o masă
Pentru a adăuga linii în jurul tuturor celulelor din tabel, creând un efect de grilă, adăugați următoarele în foaia de stil:
td, th {margine: solid 1px negru;} Pentru a adăuga linii între coloane pentru a crea linii verticale care rulează de sus în jos pe coloanele tabelului, adăugați următoarele în foaia de stil: td, th {marginea stângă: solid 1px negru;} Dacă nu doriți ca liniile verticale să apară în prima coloană, adăugați o clasă la lea și td celule. În acest exemplu, presupuneți o clasă de fara limita pe aceste celule și scoateți frontiera cu o regulă CSS. Clasa HTML pe care o utilizați este: class = „fără frontieră“> Apoi, adăugați următorul stil la foaia de stil: .fara limita {frontieră-stânga: niciuna;} Ca și în cazul adăugării de linii între coloane, puteți adăuga linii orizontale între rânduri cu un stil simplu adăugat la foaia de stil, după cum urmează: tr {margine de fund: solid 1px negru;} Pentru a elimina marginea din partea de jos a tabelului, ați adăuga încă o dată o clasă etichetă: class = „fără frontieră“> Adăugați următorul stil la foaia de stil: .fara limita {frontieră de fund: nici unul;} Dacă doriți doar linii între rânduri sau coloane specifice, trebuie să utilizați o clasă pe acele celule sau rânduri. Adăugarea unei linii între coloane este puțin mai dificilă decât între rânduri, deoarece trebuie să adăugați clasa în fiecare celulă din coloana respectivă. Dacă tabelul dvs. este generat automat dintr-un CMS de un fel, este posibil să nu fie posibil, dar dacă aveți o pagină de codificare manuală, puteți adăuga clase adecvate după cum este necesar pentru a obține acest efect. class = "side-border"> Adăugarea de linii între rânduri este mai ușoară deoarece puteți adăuga clasa la rândul pe care doriți linia. class = "border-bottom"> Apoi, adăugați CSS în foaia de stil: .bordul {marginea stângă: solid 1px negru;}.bord-jos {margine de fund: solid 1px negru;} Pentru a adăuga linii în jurul celulelor individuale, adăugați o clasă celulelor pe care doriți să le înconjurați: class = "border"> Apoi adăugați următoarea CSS în foaia de stil: .border {margine: solid 1px negru;} Dacă doriți să adăugați linii în interiorul conținutului unei celule, cel mai simplu mod de a face acest lucru este cu eticheta de regulă orizontală (). Dacă observați lacune în marginea dvs., asigurați-vă că stilul de colaps de margine este setat pe masă. Adăugați următoarele în foaia de stil: masa {colaps de frontieră: colaps;} Puteți evita toate și utilizați atributul de margine în eticheta de tabelă. Realizați totuși că acest atribut, deși nu este depreciat, este semnificativ mai puțin flexibil decât CSS, deoarece puteți defini doar lățimea marginii și nu o puteți avea în jurul tuturor celulelor din tabel sau nici una. Cum să adăugați linii între doar coloanele dintr-o masă
Cum se adaugă linii între doar rândurile dintr-o masă
Cum se adaugă linii între coloane sau rânduri specifice într-o masă
Cum se adaugă linii în jurul unor celule individuale într-o masă
Cum să adăugați linii în interiorul celulelor individuale într-o masă
Sfaturi utile
