Learje hoe't jo krekt in fiif minuten in tabblêd fan CSS oanmeitsje
Jo hawwe heard dat CSS en HTML tabellen net ming binne. Dit is gewoan net wier. Ja, it brûken fan HTML- tabellen foar layout is net langer in web design best practice, mar is ferfongen troch CSS-layoutstilen, mar tabellen binne noch de korrekte markearring om te brûken tabelike gegevens oan in webside.
Spitigernôch, om't safolle web-profesjoners fan tabellen ôfsluten binne tinke dat se gif binne, in protte fan dy profesjonals hawwe net folle ûnderfining mei wurkje mei dit mienskiplike HTML-elemint en de striid wannear't se har hawwe moatte op in webside. Bygelyks as jo in tabel hawwe op in side en jo wolle ynterne linen taheakje oan 'e tafelsels.
CSS Tafelrânen
As jo CSS brûke om grinzen te tafeljen nei tafels, dan falt allinich de grins om it bûten fan it tafel. As jo ynterne rigels taheakje wolle oan de yndividuele sellen fan dy tabel, moatte jo grinzen tafoegje oan de ynteressante CSS-eleminten. Jo kinne ek de HR-tag brûke om rigels yn yndividuele sellen te foegjen.
Om de stilen yn dit artikel te brûken, moatte jo fansels in tabel hawwe op jo webside. Jo moatte dan in stylblêd meitsje as in ynterne stylblêd yn 'e holle fan jo dokumint (jo sille allinich dit dwaan as jo "side" in inkele side is) of oan it dokumint as in ekstern stijlblêd oanbean (dit is wat jo sil dwaan as jo side meardere siden is - wêrtroch jo alle siden opnij meitsje fan ien eksterne blêd). Jo sille de stilen sette om ynterne linen yn dizze stylblêd ta te foegjen.
Foardat'st begjinst
Earst moatte jo beslute hoe't jo de linen wolle yn jo tabel wolle. Jo hawwe ferskate opsjes, ynklusief:
- Om alle sellen hinne om in gers te foarmjen;
- It linen fan de linen tusken just de kolommen;
- Just tusken de rigen; of
- Tusken spesifike kolommen of rigen.
Jo kinne ek de rigels omgeane fan yndividuele sellen of binnen yndividuele sellen.
Hoe kinne Lines tafoegje om alle sellen yn in tabel
Om rigels om alle sellen te tafoege yn jo tabel, meitsje dy grid-like effekt, add it folgjende nei jo stylblêd:
td, th {
grins: solid 1px swart;
}
Hoefolle Linjen taheakje tusken gewoan de kolommen yn in tabel
Om rigels te meitsjen tusken de kolommen (dit soarget foar fertikale rigels dy't fan boppen nei ûnderen op 'e tafel sitte), add the following to your style sheet:
td, th {
border-left: solid 1px swart;
}
Dan, as jo net wolle dat se op 'e earste kolom ferskine, moatte jo in klasse oan dy th en td- sellen taheakje. Yn dit foarbyld jouwe wy út dat wy in klasse fan no-grins hawwe op dy sellen en wy ferwiderje de grins mei dit mear spesifike CSS-regel. Dus hjir binne de HTML-klasse dy't wy brûke:
class = "no-border">
En dan kinne wy de folgjende styl oan ús stylblêd taheakje:
.no-râne {
border-left: none;
}
Hoefolle Linjen taheakje tusken gewoan de rigen yn in tabel
As mei tafoegjen fan linen tusken de kolommen, kinne jo dit dwaan mei just ien ienfâldige styl tafoege oan jo stylblêd. De ûnderste CSS soe fertikale linen tafoegje tusken elke rige fan ús tabel:
tr {
border-bottom: solid 1px swart;
}
En om de grins fan 'e boaiem fan' e tafel te ferwiderjen, wurde jo wer in klasse oan dy tr tag taheakje:
class = "no-border">
Foegje de folgjende styl nei jo stylblêd:
.no-râne {
border-bottom: none;
}
Hoe kinne Lines tafoegje tusken spesifike kolommen of rigen yn in tabel
As jo allinich linen hawwe tusken spesifike rigen of kolommen, moatte jo in klasse brûke op dizze sellen of rigen. It oanmeitsjen fan in line tusken kolommen is wat swierder as tusken rigen omdat jo de klasse oan elke sellen taheakje moatte yn dizze kolom. As jo tabel automatysk fan in CMS automatysk generearret, dan kin dit net mooglik wêze, mar as jo de side kodearje, kinne jo passende klassen taheakje as jo nedich binne om dit effekt te berikken.
class = "side-râne">
It oanmeitsjen fan rigels tusken rigen is folle makliker, lykas jo kinne de klasse just taheakje oan de rige dy't jo de riging wolle.
class = "border-bottom">
Dêrnei add de CSS oan jo stylblêd:
.border-side {
border-left: solid 1px swart;
}
.border-bottom {
border-bottom: solid 1px swart;
}
Hoe kinne Lines tafoegje oan yndividuele toanen yn in tabel
Om rigels om yndividuele sellen te foegjen, sette jo in klasse oan 'e sellen dy't jo in rânom wolle:
class = "border">
En add this CSS nei jo stylblêd:
.border {
grins: solid 1px swart;
}
Hoe kinne Lines ynlade yndividueel selden yn in tabel
As jo linen tafoegje yn 'e ynhâld fan in sel, dan is de maklikste manier om dit te dwaan mei it horizontale regeletiket (
).
Useful Tips
As jo lücken yn jo grinzen besjen, moatte jo derfoar soargje dat de rânebestânstyl op jo tabel stiet. Folgje de folgjende ta oan jo stylblêd:
tafel {
border-collapse: collapse;
}
Jo kinne allegearre fan 'e boppesteande CSS foarkomme en it grûnattributje yn jo tabel tag brûke. Ferklearje lykwols, dat syn attribus, wylst net ferwurde, signifikant minder fleksibel is as CSS, lykas jo allinich de breedte fan 'e grins kinne definiearje en kin allinich om alle sellen fan' e tafel of gjinien hawwe.