Ikasi CSS mahaiaren ertza nola sortu bost minutu barru
Baliteke CSS eta HTML taulak ez nahastea. Hau ez da egia. Bai, diseinuaren HTML taulak erabiliz gero, ez da web diseinuko praktika onenik, CSSren diseinuaren estiloek ordeztu baitute, baina taulak dira oraindik ere tabulazio datuak webgune batera gehitzeko erabiltzen diren markak.
Zoritxarrez, hainbeste web profesionalek pozoiak direla pentsatzen duten mahaietatik urruntzen baziren ere, profesional horietako askok esperientzia gutxi dute HTML elementu komunarekin eta borroka web orri batean kudeatu behar dute. Adibidez, orri batean taula bat baduzu eta barneko lerroak taula-gelaxkak gehitu nahi badituzu.
CSS mahai-mugak
CSS erabiltzen duzunean mahaiak ertzera gehitzeko, taularen kanpoaldeko ertza bakarrik gehitzen du. Barneko lerroak taularen banako gelaxkak gehitu nahi badituzu, barnealdeko CSS elementuen mugak gehitu behar dituzu. HR etiketa ere erabil dezakezu gelaxka banakoetan lerroak gehitzeko.
Artikulu honetan estalitako estiloak aplikatzeko, beharbada zure web orrian taula bat izan beharko zenuke. Estilo-orri bat sortu beharko zenuke zure dokumentuaren buruan barneko estilo-orri gisa (hau da, zuk bakarrik egingo duzu zure "gunea" orri bakar bat bada) edo dokumentuarekin kanpoko estilo-orri gisa (hau da zure webgunea hainbat orrialde baldin badago egiten baduzu, kanpoko orri baten orrialde guztiak estilizatu ahal izango dituzu). Estiloak barruko lerroak gehitzeko estilo-orri honetan sartuko dituzu.
Hasi aurretik
Lehenik eta behin, zure taulan agertuko diren lerroetan nahi duzun erabaki behar duzu. Hainbat aukera dituzu, besteak beste:
- Sare bat osatzeko zelula guztiak inguratuz;
- Zutabeen arteko lerroak kokatzea.
- Errenkaden artean bakarrik; edo
- Zutabe edo errenkaden artean.
Gelaxken banako edo gelaxka bakarreko gelaxken barruan lerroak ere jar ditzakezu.
Nola gehitu mahai baten gela guztietan gelaxkak
Taulako gelaxken inguruko lerroak gehitzeko, sareta-efektu hori sortuz gero, gehitu zure estilo-orriari:
td, th {
mugan: 1px zuria;
}
Nola lerro bat gehitu Taula baten zutabeen artean
Zutabeen arteko lerroak gehitzeko (honek mahaiaren zutabeetatik goitik behetik abiatzen diren lerro bertikalak sortzen ditu), gehitu hau zure estilo-orriari:
td, th {
mugan ezkerrera: 1px zuria;
}
Ondoren, lehenengo zutabean agertzen ez bazara, klase bat gehitu behar duzu th eta td gela hauei. Adibide honetan, zelulak ez diren mugako klasea dugu eta gainazala kenduko dugu CSS arau zehatzago honekin. Hemen HTML motako klaseak erabiliko ditugu:
class = "no gaindiko">
Ondoren, estilo hau gehitu ahal izango genioke estilo-orriari:
.no-border {
mugan ezkerrera: none;
}
Nola lerroen artean lerro batetan gehitzea
Zutabeen arteko lerroak gehituz, zure estiloko orriarekin gehitutako estilo sinple bat besterik ez duzu egin. CSS azpitik lerro bertikalak gehituko lirateke gure taulako taulen artean:
tr {
mugan behean: 1px zuria;
}
Taularen beheko ertza kentzeko, berriro gehitu beharko zenioke klase bat tr etiketa honi:
class = "no gaindiko">
Gehitu estilo hau zure estilo-orriari:
.no-border {
mugan behean: none;
}
Nola gehitu taulan zutabe edo zutabe jakin batzuen arteko lerroak
Errenkada edo zutabeen artean lerro bakarra nahi baduzu, klase bat erabili behar duzu zelulak edo errenkadetan. Zutabeen arteko lerroa gehitzea lerroen artean baino zertxobait zailagoa da, gelaxka zutabe bakoitzeko gelaxka gehitu behar duzulako. Zure taula automatikoki sortutako CMS batetik sortuko balitz, agian hau ez da posible izango, baina orriaren kodifikazioa eskuz eginda badago, beharrezkoak diren klaseak gehi ditzakezu efektu hori lortzeko.
class = "albo gaindiko">
Errenkaden arteko lerroak gehitzea askoz ere errazagoa da, lerroan lerroan nahi duzun lerroa gehitu dezakezu.
class = "border-bottom">
Ondoren, gehitu CSS zure estilo-orriari:
.border-side {
mugan ezkerrera: 1px zuria;
}
.border-bottom {
mugan behean: 1px zuria;
}
Nola gehitu taulan gela bakarreko gelaxken inguruan
Gelaxken banakoaren inguruko lerroak gehitzeko, gelaxka bat ertz bat nahi duzun gelaxkara gehitzen duzu:
class = "border">
Ondoren, gehitu CSS hau zure estilo-orriari:
.border {
mugan: 1px zuria;
}
Nola gehitu taulan gela partikulen barruan barrutiak
Gelaxkaren edukien barruan lerroak gehitzeko nahi baduzu, hau egiteko modu errazena arau horizontalaren etiketa (
) da.
Aholku baliagarriak
Zure mugetan dauden hutsuneak nabarituko badituzu, ziurtatu taulan mugako kolapsoen estiloa ezarrita dagoela. Gehitu ondorengo estilo-orriari:
taula {
mugaz gaindiko kolapsoa: kolapsoa;
}
Goiko CSS guztiak saihestu ditzakezu eta zure taulako taulan mugako atributua erabili. Kontuan izan, ordea, bere atributua, zaharkituta ez dagoen bitartean, CSS baino askoz gutxiago malgua dela, mugaren zabalera bakarrik definitu eta mahaiaren gela guztietan edo bat ere ez.