Leer hoe om 'n CSS-tabel grens in net vyf minute te skep
Jy het dalk gehoor dat CSS en HTML tabelle nie meng nie. Dit is eenvoudig nie waar nie. Ja, die gebruik van HTML- tabelle vir uitleg is nie meer 'n beste praktyk vir die ontwerp van webwerwe nie, maar is vervang deur CSS-uitlegstyle, maar tabelle is steeds die korrekte opmaak om tabulêre data by 'n webblad te voeg.
Ongelukkig, omdat so baie webprofessors van tafels weggejaag het en dink dat hulle gif is, het baie van die professionele persone min ervaring met hierdie gemeenskaplike HTML-element en die stryd wanneer hulle hulle op 'n webblad moet hanteer. Byvoorbeeld, as jy 'n tabel op 'n bladsy het en jy wil interne lyne by die tafelselle voeg.
CSS Tafelgrense
As jy CSS gebruik om grense aan tafels te voeg, voeg dit net die grens aan die buitekant van die tafel by. As jy interne lyne by die individuele selle van die tabel wil voeg, moet jy grense aan die CSS-elemente van die binneland voeg. U kan ook die HR-tag gebruik om lyne in individuele selle by te voeg.
Om die style wat in hierdie artikel behandel word, toe te pas, moet u natuurlik 'n tafel op u webblad hê. U moet dan 'n stylblad as 'n interne stylblad in die kop van u dokument skep (u sal waarskynlik dit slegs doen as u "webwerf" 'n enkele bladsy is) of aan die dokument geheg word as 'n eksterne stylblad (dit is wat u sal doen as jou webwerf veelvuldige bladsye is - sodat jy al die bladsye van een eksterne blad kan stoor). Jy sal die style plaas om binnelyne in die stylvel te voeg.
Voor jy begin
Eerstens moet jy besluit waar jy die lyne in jou tafel wil sien. U het verskeie opsies, insluitend:
- Om al die selle omring om 'n rooster te vorm;
- Posisionering van die lyne tussen net die kolomme;
- Net tussen die rye; of
- Tussen spesifieke kolomme of rye.
U kan ook die lyne rondom individuele selle of binne individuele selle posisioneer.
Hoe om lyne rondom al die selle in 'n tabel te voeg
Om lyne rondom alle selle in u tabel by te voeg, skep die roosteragtige effek, voeg die volgende by jou stylvel:
td, th {
grens: soliede 1px swart;
}
Hoe om lyne tussen net die kolomme in 'n tabel te voeg
Om lyne tussen die kolomme te voeg (dit skep vertikale lyne wat van bo na onder in die kolomme van die tabel loop), voeg die volgende by jou stylvel:
td, th {
grens-links: soliede 1px swart;
}
Dan, as jy nie wil hê dat hulle in die eerste kolom verskyn nie, moet jy 'n klas by die th- en td- selle voeg. In hierdie voorbeeld neem ons aan dat ons 'n klas van geen grens op daardie selle het en ons verwyder die grens met hierdie meer spesifieke CSS-reël. So hier is die HTML klas wat ons sal gebruik:
class = "no-grens">
En dan kan ons die volgende styl by ons stylblad voeg:
.grens
border-left: none;
}
Hoe om lyne tussen net die ryke in 'n tabel te voeg
Soos met die toevoeging van lyne tussen die kolomme, kan jy dit doen met net een eenvoudige styl wat by jou stylblad gevoeg word. Die onderstaande CSS sal vertikale lyne tussen elke ry van ons tabel voeg:
tr {
rand-bodem: soliede 1px swart;
}
En om die rand van die onderkant van die tafel te verwyder, sal jy weer 'n klas by die tr-tag voeg:
class = "no-grens">
Voeg die volgende styl by jou stylblad:
.grens
grensbodem: geen;
}
Hoe om lyne tussen spesifieke kolomme of rye in 'n tabel te voeg
As jy net lyne tussen spesifieke rye of kolomme wil hê, moet jy 'n klas op daardie selle of rye gebruik. 'N Lyn tussen kolomme is effens moeiliker as tussen rye omdat jy die klas by elke sel in daardie kolom moet byvoeg. As u tabel outomaties van ' n CMS afkomstig is, kan dit dalk nie moontlik wees nie, maar as u die bladsy met die hand koder, kan u toepaslike klasse byvoeg om dit te bewerkstellig.
class = "side-grens">
Om lyne tussen rye te voeg, is baie makliker, want jy kan net die klas byvoeg in die ry waarin jy die lyn wil hê.
class = "border-bottom">
Voeg dan die CSS by jou stylblad:
.border-kant {
grens-links: soliede 1px swart;
}
.border-bottom {
rand-bodem: soliede 1px swart;
}
Hoe om lyne rondom individuele selle in 'n tabel te voeg
Om lyne rondom individuele selle by te voeg, voeg jy 'n klas by die selle waaroor jy 'n grens wil hê:
class = "grens">
En voeg dan die volgende CSS by jou stylblad:
.border {
grens: soliede 1px swart;
}
Hoe om lyne binne individuele selle in 'n tabel te voeg
As u lyne in die inhoud van 'n sel wil voeg, is die maklikste manier om dit te doen met die horisontale reëlmerk (
).
Nuttige wenke
As jy gapings in jou grense sien, moet jy seker maak dat die grens-ineenstortingstyl op jou tafel gestel word. Voeg die volgende by jou stylblad:
tafel {
grens-ineenstorting: ineenstorting;
}
U kan al die bogenoemde CSS vermy en die grensattribuut in u tabeletiket gebruik. Besef egter dat sy kenmerk, terwyl dit nie verouderd is, aansienlik minder buigsaam is as CSS nie, aangesien jy net die breedte van die grens kan definieer en dit net rondom alle selle van die tafel of geen kan hê.