Foghlaim conas teorainn an tábla CSS a chruthú i cúig nóiméad amháin
D'fhéadfá a chuala nach mbraitheann na táblaí CSS agus HTML. Níl sé seo fíor go simplí. Sea, níl dea-chleachtas dearadh gréasáin á úsáid ag táblaí HTML le haghaidh an leagan amach, agus stíleanna leagan amach CSS á n-ionad, ach tá na táblaí fós mar an marc ceart chun úsáid a bhaint as sonraí cluaisíní a chur ar leathanach gréasáin.
Ar an drochuair, toisc go bhfuil an oiread sin de lucht gairme gréasáin ar shiúl ó na táblaí ag smaoineamh go bhfuil siad nimhiúil, níl mórán taithí ag cuid mhór de na gairmithe sin ag obair leis an ngné seo chomhchoiteann HTML agus an streachailt nuair a bhíonn orthu iad a láimhseáil ar leathanach gréasáin. Mar shampla, má tá tábla agat ar leathanach agus gur mhaith leat línte inmheánacha a chur leis na cealla tábla.
Teorainneacha Tábla CSS
Nuair a úsáideann tú CSS chun teorainneacha a chur le táblaí, cuireann sé ach an teorainn timpeall lasmuigh den tábla. Más mian leat línte inmheánacha a chur le cealla aonair an tábla sin, is gá duit teorainneacha a chur leis na heilimintí CSS taobh istigh. Is féidir leat an chlib AD a úsáid freisin chun línte a chur taobh istigh de chealla aonair.
D'fhonn na stíleanna atá clúdaithe san airteagal seo a chur i bhfeidhm, ba chóir go mbeadh tábla agat ar do leathanach gréasáin. Ba chóir duit bileog stíl a chruthú ansin mar bhileog stíl inmheánach i gceann do dhoiciméid (ní dócha go ndéanfaidh sé seo ach má tá do "láithreán" ina leathanach amháin) nó atá ceangailte leis an doiciméad mar bhileog stíl seachtrach (is é seo an rud atá agat déanfaidh an leathanach seo leathanaigh il-leathanaigh - rud a ligeann duit na leathanaigh go léir a stiúradh ó bhileog seachtrach amháin). Cuirfidh tú na stíleanna chun línte taobh istigh a chur leis an mbileog stíl sin.
Sula dTosaíonn tú
Ar dtús ní mór duit cinneadh a dhéanamh cá háit ar mhaith leat na línte a bheith i do bhord. Tá roinnt roghanna agat, lena n-áirítear:
- Ag timpeall na gcealla go léir le greille a chruthú;
- Na línte a shuí idir na colúin ach;
- Díreach idir na sraitheanna; nó
- Idir colúin nó sraitheanna sonracha.
Is féidir leat na línte a sheasamh timpeall cealla aonair nó taobh istigh de chealla aonair.
Conas Línte a Chur Tairgí Gach Cill i dTábla
Le línte a chur ar fud gach cealla i do bhord, ag cruthú an ghleille sin, cuir an méid seo a leanas ar do bhileog stíl:
td, th {
teorainn: soladach 1px dubh;
}
Conas Línte Idir Na Colúin a Dhéanamh i Tábla
Le línte a chur idir na colúin (cruthaíonn sé seo línte ingearacha a reáchtáil ó bharr go barr ar cholúin an tábla), cuir an méid seo a leanas ar do bhileog stíl:
td, th {
teorainn-chlé: soladach 1px dubh;
}
Ansin, más rud é nach mian leat iad a bheith le feiceáil ar an gcéad cholún, beidh ort rang a chur leis na cealla th agus cealla seo. Sa sampla seo, glacaimid go bhfuil aicme neamhtheorann againn ar na cealla sin agus go mbainfimid an teorainn leis an riail CSS níos sainiúla seo. Mar sin anseo is é an rang HTML ba mhaith linn a úsáid:
rang = "gan teorainn">
Agus ansin d'fhéadfaimis an stíl seo a leanas a chur leis an mbileog stíl againn:
.no-teorainn {
teorainn-chlé: none;
}
Conas Línte a Chur Idir Díreach na Rothaí i dTábla
Mar aon leis na línte a chur idir na colúin, is féidir leat é seo a dhéanamh le stíl simplí amháin a chuirtear le do bhileog stíl. Chuirfeadh an CSS thíos línte ingearacha idir gach sraith dár tábla:
tr {
bun teorann: soladach 1px dubh;
}
Agus an teorainn a bhaint as bun an tábla, ba mhaith leat arís rang a chur leis an gclib tr:
rang = "gan teorainn">
Cuir an stíl seo a leanas le do bhileog stíl:
.no-teorainn {
bun teorann: none;
}
Conas Línte Idir Colúin nó Rásanna Sonracha a chur i dTábla
Más mian leat línte idir sraitheanna nó colúin ar leith, ní mór duit aicme a úsáid ar na cealla nó na sraitheanna sin. Tá beagán níos deacra le líne a chur idir colúin ná idir sraitheanna toisc go gcaithfidh tú an rang a chur leis gach cill sa cholún sin. Má ghintear do thabla go huathoibríoch ó CMS de chineál éigin , d'fhéadfadh sé seo a bheith indéanta, ach má tá tú ag códú an leathanaigh, d'fhéadfá aicmí cuí a chur leis mar is gá chun an éifeacht seo a bhaint amach.
class = "taobh teorann">
Tá na línte idir sraitheanna a chur i bhfad níos éasca, mar is féidir leat an rang a chur leis an tsraith a bhfuil tú ag iarraidh an líne a chur air.
class = "border-bottom">
Ansin cuir CSS leis do bhileog stíl:
.border-side {
teorainn-chlé: soladach 1px dubh;
}
béim-bhun {
bun teorann: soladach 1px dubh;
}
Conas Línte a Chur Ar Thimpeall Cásanna Aonair i dTábla
Le línte a chur le chéile faoi chealla aonair, cuirfidh tú rang ar na cealla a dteastaíonn uait teorainn timpeall:
rang = "teorainn">
Agus ansin cuir an CSS seo a leanas chuig do bhileog stíl:
foinse {
teorainn: soladach 1px dubh;
}
Conas Línte a Chur isteach i gCillíní Aonair i dTábla
Más mian leat línte a chur taobh istigh d'ábhar cille, is é an bealach is éasca é seo a dhéanamh leis an gclib riail chothrománach (
).
Leideanna Úsáideacha
Má thugann tú faoi deara bearnaí i do theorainneacha, ba cheart duit a chinntiú go bhfuil an stíl tubaiste teorann leagtha ar do bhord. Cuir an méid seo a leanas ar do bhileog stíl:
tábla {
tubaiste teorann: titim;
}
Is féidir leat gach ceann de na CSS thuas a sheachaint agus an tréith teorann a úsáid i do chlib tábla. Aithnímid, áfach, go bhfuil a tréith, cé nach bhfuil sé neamhchosanta, i bhfad níos lú solúbtha ná CSS, toisc nach féidir leat ach leithead na teorann a shainmhíniú agus ní féidir ach é a chur timpeall gach cealla den tábla nó aon cheann.