Aflați cum să creați o margine pentru tabelul CSS în doar cinci minute
Este posibil să fi auzit că tabelele CSS și HTML nu se amestecă. Pur și simplu nu este adevărat. Da, folosirea tabelelor HTML pentru aspect nu mai este o bună practică de design web, fiind înlocuită cu stiluri de layout CSS, dar tabelele sunt încă marcajele corecte care trebuie folosite pentru a adăuga date tabulare la o pagină Web.
Din nefericire, pentru că atât de mulți profesioniști din domeniul web s-au îndepărtat de tabelele care se gândesc că sunt otrava, mulți dintre acești profesioniști au puțină experiență în lucrul cu acest element HTML comun și lupta atunci când trebuie să se ocupe de o pagină web. De exemplu, dacă aveți o masă pe o pagină și doriți să adăugați linii interne la celulele tabelului.
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. De asemenea, puteți utiliza eticheta HR pentru a adăuga linii în interiorul celulelor individuale.
Pentru a aplica stilurile acoperite în acest articol, trebuie să aveți în mod evident un tabel pe pagina dvs. Web. Apoi, ar trebui să creați o foaie de stil ca o foaie de stil internă în capul documentului dvs. (probabil veți face acest lucru doar dacă "site-ul" dvs. este o singură pagină) sau atașat la document ca o foaie de stil externă va face în cazul în care site-ul dvs. este mai multe pagini - permițându-vă să stil toate paginile dintr-o foaie externă). Veți pune stilurile pentru a adăuga linii interioare în acea foaie de stil.
Inainte sa incepi
Mai întâi trebuie să 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 coloane;
- Doar între rânduri; sau
- Î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 efectul asemănător grilei, adăugați următoarele în foaia de stil:
td, th {
margine: solid 1px negru;
}
Cum să adăugați linii între doar coloanele dintr-o masă
Pentru a adăuga linii între coloane (aceasta creează 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;
}
Apoi, dacă nu doriți ca acestea să apară pe prima coloană, va trebui să adăugați o clasă la acele celule th și td . În acest exemplu, presupunem că avem o clasă fără frontiere pe aceste celule și eliminăm frontiera cu această regulă CSS mai specifică. Deci, aici este clasa HTML pe care o vom folosi:
class = „fără frontieră“>
Și apoi am putea adăuga următorul stil la foaia de stil:
.fara limita {
frontieră-stânga: niciuna;
}
Cum se adaugă linii între doar rândurile dintr-o masă
Ca și în cazul adăugării de linii între coloane, puteți face acest lucru doar cu un singur stil simplu adăugat la foaia dvs. de stil. CSS de mai jos ar adăuga linii verticale între fiecare rând al tabelului nostru:
tr {
margine de fund: solid 1px negru;
}
Și pentru a elimina marginea din partea de jos a tabelului, ați adăuga din nou o clasă la acel etichetă tr:
class = „fără frontieră“>
Adăugați următorul stil la foaia de stil:
.fara limita {
frontieră de fund: nici unul;
}
Cum se adaugă linii între coloane sau rânduri specifice într-o masă
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 mult 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;
}
Cum se adaugă linii în jurul unor celule individuale într-o masă
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ătorul CSS în foaia de stil:
.border {
margine: solid 1px negru;
}
Cum să adăugați linii în interiorul celulelor individuale într-o masă
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ă (
).
Sfaturi utile
Dacă observați lacune la frontierele dvs., ar trebui să vă asigurați că stilul de colaps de frontieră este setat pe masa dvs. Adăugați următoarele în foaia de stil:
masa {
colaps de frontieră: colaps;
}
Puteți evita toate CSS de mai sus și utilizați atributul de margine în eticheta dvs. de masă. Realizați totuși că atributul său, deși nu este depreciat, este semnificativ mai puțin flexibil decât CSS, deoarece puteți defini doar lățimea graniței și nu o puteți avea în jurul valorii de toate celulele tabelului sau nici una.