Dysgwch sut i greu ffiniau tabl CSS mewn dim ond pum munud
Efallai eich bod wedi clywed nad yw tablau CSS a HTML yn cymysgu. Nid yw hyn yn wir yn wir. Ydw, nid yw defnyddio tablau HTML ar gyfer gosodiad yn arfer gorau dylunio ar y we, ar ôl i arddulliau gosod CSS eu disodli, ond mae'r tablau'n dal i fod y marc cywir i'w ddefnyddio i ychwanegu data tabl i dudalen we.
Yn anffodus, oherwydd bod cymaint o weithwyr proffesiynol gwe wedi cuddio oddi wrth dablau yn meddwl eu bod yn wenwyn, nid oes gan lawer o'r gweithwyr proffesiynol hynny lawer o brofiad yn gweithio gyda'r elfen HTML gyffredin hon a'r frwydr pan fydd yn rhaid iddynt eu trin ar dudalen we. Er enghraifft, os oes gennych dabl ar dudalen ac rydych am ychwanegu llinellau mewnol i'r celloedd tabl.
Gororau Tabl CSS
Pan fyddwch yn defnyddio CSS i ychwanegu ffiniau i dablau, dim ond y ffin sydd o gwmpas y tu allan i'r tabl sy'n ei ychwanegu. Os ydych chi eisiau ychwanegu llinellau mewnol i gelloedd unigol y bwrdd hwnnw, mae angen ichi ychwanegu ffiniau at elfennau CSS tu mewn. Gallwch hefyd ddefnyddio'r tag AD i ychwanegu llinellau y tu mewn i gelloedd unigol.
Er mwyn cymhwyso'r arddulliau a gwmpesir yn yr erthygl hon, mae'n amlwg y dylech chi gael tabl ar eich tudalen we. Yna dylech greu daflen arddull fel dalen arddull fewnol ym mhennaeth eich dogfen (fe fyddwch yn debygol o wneud hyn dim ond os yw eich "safle" yn un dudalen) neu sydd ynghlwm wrth y ddogfen fel dalen arddull allanol (dyma chi yn gwneud os yw eich gwefan yn dudalennau lluosog - gan eich galluogi i arddull yr holl dudalennau o un ddalen allanol). Byddwch yn gosod yr arddulliau i ychwanegu llinellau tu mewn i'r ddalen arddull honno.
Cyn i chi Dechrau
Yn gyntaf, mae angen i chi benderfynu ble rydych chi am i'r llinellau ymddangos yn eich tabl. Mae gennych sawl opsiwn, gan gynnwys:
- Ymyl yr holl gelloedd i ffurfio grid;
- Rhoi'r llinellau rhwng y colofnau yn unig;
- Ychydig rhwng y rhesi; neu
- Rhwng colofnau neu rhesi penodol.
Gallwch hefyd osod y llinellau o amgylch celloedd unigol neu y tu mewn i gelloedd unigol.
Sut i Ychwanegu Llinellau o amgylch yr holl gelloedd mewn Tabl
I ychwanegu llinellau o gwmpas pob celloedd yn eich bwrdd, gan greu'r effaith grid hwnnw, ychwanegwch y canlynol i'ch dalen arddull:
td, th {
ffin: solet 1px du;
}
Sut i Ychwanegu Llinellau Rhwng Dim ond y Colofnau mewn Tabl
I ychwanegu llinellau rhwng y colofnau (mae hyn yn creu llinellau fertigol sy'n rhedeg o'r top i'r gwaelod ar golofnau'r bwrdd), ychwanegwch y canlynol i'ch dalen arddull:
td, th {
ffin-chwith: solet 1px du;
}
Yna, os nad ydych am iddyn nhw ymddangos ar y golofn gyntaf, bydd angen i chi ychwanegu dosbarth i'r celloedd th a th yl . Yn yr enghraifft hon, rydym yn tybio bod gennym ddosbarth o ddim-ffin ar y celloedd hynny ac rydym yn dileu'r ffin gyda'r rheol CSS fwy penodol hon. Felly dyma'r dosbarth HTML y byddem yn ei ddefnyddio:
dosbarth = "dim-ffin">
Ac yna gallem ychwanegu'r arddull ganlynol at ein dalen arddull:
.no-ffin {
ffin-chwith: dim;
}
Sut i Ychwanegu Llinellau Rhwng Dim ond y Ffrwdiau mewn Tabl
Fel ag ychwanegu llinellau rhwng y colofnau, gallwch wneud hyn gyda dim ond un arddull syml sydd wedi'i ychwanegu at eich dalen arddull. Byddai'r CSS isod yn ychwanegu llinellau fertigol rhwng pob rhes o'n tabl:
tr {
gwaelod y ffin: solet 1px du;
}
Ac i gael gwared ar y ffin o waelod y bwrdd, byddech unwaith eto yn ychwanegu dosbarth i'r tr tag hwnnw:
dosbarth = "dim-ffin">
Ychwanegwch yr arddull ganlynol at eich dalen arddull:
.no-ffin {
gwaelod y ffin: dim;
}
Sut i Ychwanegu Llinellau Rhwng Colofnau Penodol neu Gyfres mewn Tabl
Os mai dim ond llinellau sydd rhwng rhesi neu golofnau penodol, mae angen i chi ddefnyddio dosbarth ar y celloedd neu'r rhesi hynny. Mae ychwanegu llinell rhwng colofnau ychydig yn fwy anodd na rhwng rhesi oherwydd mae'n rhaid ichi ychwanegu'r dosbarth i bob cell yn y golofn honno. Os caiff eich bwrdd ei gynhyrchu'n awtomatig o CMS o ryw fath , efallai na fydd hyn yn bosib, ond os ydych chi'n codio'r dudalen ar y llaw, gallech chi ychwanegu dosbarthiadau priodol yn ôl yr angen i gyflawni'r effaith hon.
dosbarth = "ochr-ffin">
Mae ychwanegu llinellau rhwng rhesi yn llawer haws, gan mai dim ond ychwanegwch y dosbarth i'r rhes yr ydych am i'r llinell fynd ymlaen.
class = "border-bottom">
Yna, ychwanegwch y CSS i'ch dalen arddull:
.border-side {
ffin-chwith: solet 1px du;
}
.border-bottom {
gwaelod y ffin: solet 1px du;
}
Sut i Ychwanegu Llinellau O Gwmpas Celloedd Unigol mewn Tabl
I ychwanegu llinellau o gwmpas celloedd unigol, rydych chi'n ychwanegu dosbarth i'r celloedd rydych am gael ffin o gwmpas:
dosbarth = "ffin">
Ac yna ychwanegwch y CSS canlynol i'ch dalen arddull:
.border {
ffin: solet 1px du;
}
Sut i Ychwanegu Llinellau Mewn Celloedd Unigol mewn Tabl
Os ydych am ychwanegu llinellau y tu mewn i gynnwys cell, y ffordd hawsaf o wneud hyn yw gyda'r tag rheol llorweddol (
).
Awgrymiadau Defnyddiol
Os byddwch chi'n sylwi ar fylchau yn eich ffiniau, dylech sicrhau bod yr arddull cwymp ffin wedi'i osod ar eich bwrdd. Ychwanegwch y canlynol i'ch dalen arddull:
bwrdd {
cwymp y ffin: cwymp;
}
Gallwch osgoi'r holl CSS uchod a defnyddio priodoldeb y ffin yn eich tag bwrdd. Sylweddoli, fodd bynnag, fod ei briodoldeb, er nad yw'n ddiamwys, yn llawer llai hyblyg na CSS, gan mai dim ond lled y ffin y gallwch chi ei ddiffinio a dim ond o amgylch celloedd y bwrdd na dim ond y gellir ei gael.