Gwneud y mwyaf o dablau HTML trwy ddysgu nodweddion bwrdd
Mae nodweddion tabl HTML yn rhoi llawer mwy o reolaeth i chi dros fyrddau HTML. Mae llawer o briodweddau ar gael i dablau i'w gwneud yn fwy diddorol ac yn newid golwg eich tudalen.
Nodweddion Elfen TABL HTML
Yn HTML5 mae'r elfen yn defnyddio'r nodweddion byd-eang ac un nodwedd arall: Ac mae wedi newid i gael gwerth 1 neu wag yn unig (hy ffin = ""). Os ydych chi eisiau newid lled y ffin, dylech ddefnyddio eiddo CSS lled y ffin.
Gweler isod i ddysgu am y nodweddion tabl HTML5 dilys.
Mae yna nifer o nodweddion hefyd sy'n rhan o'r fanyleb HTML 4.01 sydd wedi dod yn ddarfodedig yn HTML5:
- -Gosod yr eiddo padio CSS ar elfennau TD a TH y tabl.
- -Gosod gwaharddiad ffiniau eiddo CSS ar y bwrdd.
- -Ur arddulliau CSS ffin-lliw: du; ac arddull ffin ar y bwrdd.
- -Ur arddulliau CSS ffin-lliw: du; ac arddull ffiniau ar elfennau priodol y bwrdd.
- -Instead, dylech ddisgrifio strwythur y tabl mewn RHANBARTH neu rhoi'r tabl cyfan mewn FIGUR a'i ddisgrifio mewn FIGCAPTION. Fel arall, gallech symleiddio strwythur y tabl fel nad oes angen esboniad.
- -Gelwch yr eiddo lled CSS.
Ac un nodwedd sydd heb ei ddisgwyl yn HTML 4.01 ac mae hefyd yn ddarfodedig yn HTML5.
Dysgwch fwy am y Nodweddion TABL HTML 4.01.
- alinio - Yn lle'r eiddo ymyl CSS yn lle hynny.
Mae yna nifer o nodweddion hefyd nad ydynt yn rhan o unrhyw fanyleb HTML.
Defnyddiwch y nodweddion hyn os gwyddoch y gall y porwyr rydych chi'n eu cefnogi eu trin ac nad ydych yn poeni am HTML ddilys.
- -Gosodwch gefndir-liw eiddo CSS yn lle hynny.
- bordercolor -Gosod lliw ffin yr eiddo CSS yn lle hynny.
- bordercolorlight - Defnyddiwch lliw ffin yr eiddo CSS yn lle hynny.
- bordercolordark -Bleidiwch lliw ffin yr eiddo CSS yn lle hynny.
- cols-Does dim dewis arall i'r priodwedd hwn.
- uchder - Uchder uchder eiddo CSS yn lle hynny.
- -Gosod ymyl eiddo CSS yn lle hynny.
- -Gosod ymyl eiddo CSS yn lle hynny.
- -Si lle gwyn yr eiddo CSS yn lle hynny.
- -Gosod yr eiddo CSS fertigol-alinio yn lle.
Dysgwch fwy am y Nodweddion TABL Penodol y Porwr.
Nodweddion Elfen TABL HTML5
Fel y soniwyd uchod, dim ond un nodwedd sydd, y tu hwnt i'r nodweddion byd-eang, sy'n ddilys ar elfen TABL HTML5: ffin.
Defnyddir priodoldeb y ffin i ddiffinio ffin o amgylch y bwrdd cyfan a'r holl gelloedd ynddo. Roedd rhywfaint o gwestiwn ynghylch a fyddai'n cael ei gynnwys yn y fanyleb HTML5, ond roedd yn parhau oherwydd ei fod yn darparu gwybodaeth am strwythur y tabl, y tu hwnt i oblygiadau arddull syml.
I ychwanegu'r priodoldeb ffin, gosodwch y gwerth i 1 os oes ffin a gwag (neu adael y priodoldeb) os nad oes. Bydd y rhan fwyaf o borwyr hefyd yn cefnogi 0 am ddim ffin, ac unrhyw werth cyfanrif arall (2, 3, 30, 500, ac ati) i ddatgan lled y ffin mewn picsel, ond mae hyn yn ddarfodedig yn HTML5. Yn lle hynny, dylech ddefnyddio eiddo arddull ffin CSS i ddiffinio lled y ffin ac arddulliau eraill.
I greu tabl gyda ffin, ysgrifennwch:
< border border = "1" >
Dyma dabl gyda ffin
Mae nodweddion HTML 4.01 sydd wedi eu darfod yn HTML5. Os ydych chi'n bwriadu ysgrifennu dogfennau HTML 4.01, gallwch eu dysgu, fel arall, gallwch eu hanwybyddu. Mae gan y mwyafrif o'r nodweddion hyn ddewisiadau eraill, a ddisgrifir uchod.
Rydym yn disgrifio nodweddion yr elfen sy'n ddilys yn HTML5 (a HTML 4.01). Mae hyn yn disgrifio nodweddion y TABL sy'n ddilys yn HTML 4.01, ond maent yn ddarfodedig yn HTML5. Os ydych chi'n dal i ysgrifennu dogfennau HTML 4.01, gallwch ddefnyddio'r nodweddion hyn, ond mae gan y rhan fwyaf ohonynt ddewisiadau eraill a fydd yn gwneud eich tudalennau'n fwy brawf i'r dyfodol pan fyddwch chi'n symud i HTML5.
Nodweddion dilys HTML 4.01
Y priodoldeb a ddisgrifiwyd uchod.
Yr unig wahaniaeth yn HTML 4.01 o HTML5 yw y gallwch chi nodi unrhyw gyfanrif cyfan (0, 1, 2, 15, 20, 200, ac ati) i ddiffinio lled y ffin mewn picsel.
I adeiladu bwrdd gyda ffin 5px, ysgrifennwch:
< border border = "5" >
Mae gan y bwrdd ffin 5px.
Gweler enghraifft o ddau dabl gyda ffiniau.
Mae'r priodoldeb yn diffinio faint o le rhwng ffiniau cell a chynnwys y gell. Mae'r rhagosodiad yn ddau bicell. Gosodwch y cellpadding i 0 os nad ydych eisiau unrhyw le rhwng y cynnwys a'r ffiniau.
I osod y padio cell i 20, ysgrifennwch:
cellpadding = "20" >
Mae gan y tabl hwn cellpadding o 20.
Bydd ffiniau celloedd yn cael eu gwahanu gan 20 picsel
Edrychwch ar enghraifft o fwrdd gyda cellpadding
Mae'r priodoldeb yn diffinio faint o le rhwng celloedd y bwrdd a chynnwys y gell. Fel cellpadding, mae'r ddiffyg yn cael ei osod i ddau picsel, felly mae'n rhaid i chi ei osod i 0 os nad ydych chi eisiau mannau celloedd.
I ychwanegu gofod cell i dabl, ysgrifennwch:
cellspacing = "20" >
Mae gan y tabl hwn gylch o 20.
Bydd celloedd yn cael eu gwahanu gan 20 picsel
Gweler tabl gyda chelloedd
Mae'r priodoldeb yn nodi pa ddarnau o'r ffin o gwmpas y tu allan i dabl fydd yn weladwy. Gallwch ffrâm eich bwrdd ar bob un o'r pedair ochr, ar unrhyw ochr, i'r brig a'r gwaelod, i'r chwith a'r dde, neu ddim.
Dyma'r HTML ar gyfer bwrdd sydd â'r ffin ochr chwith yn unig:
frame = "lhs" >
Mae'r tabl hwn
bydd
dim ond y
ochr chwith wedi'i fframio.
Ac enghraifft arall gyda'r ffrâm isaf:
frame = "below" >
Mae gan y tabl ffrâm ar y gwaelod.
Edrychwch ar rai tablau gyda fframiau
Mae'r priodoldeb yn debyg i'r priodwedd ffrâm, ond mae'n effeithio ar y ffiniau o amgylch celloedd y bwrdd. Gallwch chi osod rheolau ar yr holl gelloedd, rhwng colofnau, rhwng grwpiau fel TBODY a TFOOT neu ddim.
I adeiladu bwrdd gyda llinellau yn unig rhwng y rhesi, ysgrifennwch:
rules = "rows" >
Mae'r tabl 4x4 hwn wedi
y rhesi ddim colofnau
a amlinellir gyda'r
rheolau nodwedd.
Ac un arall gyda llinellau rhwng y colofnau:
rules = "cols" >
Mae hyn yn
tabl
lle mae'r
colofnau
yn
tynnwyd
Dyma enghraifft o bwrdd gyda rheolau
Mae'r priodoldeb yn darparu gwybodaeth am y tabl ar gyfer darllenwyr sgrin ac asiantau defnyddwyr eraill a allai gael trafferth i ddarllen tablau. I ddefnyddio'r priodoldeb cryno, ysgrifennwch ddisgrifiad byr o'r tabl a rhowch hynny fel gwerth y priodoldeb. Ni fydd y crynodeb yn ymddangos ar y dudalen we yn y rhan fwyaf o borwyr gwe safonol.
Dyma sut i ysgrifennu tabl syml gyda chrynodeb:
summary = "Mae hwn yn fwrdd sampl sy'n cynnwys gwybodaeth llenwi. Pwrpas y tabl hwn yw dangos crynodeb." >
colofn 1 rhes 1
colofn 2 rhes 1
colofn 1 rhes 2
colofn 2 rhes 2
Gweld tabl gyda chrynodeb
Mae'r priodoldeb yn diffinio lled y bwrdd mewn naill ai picsel neu fel canran o'r elfen gynhwysydd. Os na osodir y lled, bydd y tabl yn cymryd cymaint o le yn unig ag y bydd angen iddo ddangos y cynnwys, gyda lled uchaf yr un fath â lled yr elfen rhiant.
I adeiladu bwrdd gyda lled penodol mewn picsel, ysgrifennwch:
< width width = "300" >
Mae'r tabl hwn yn 80% o led y cynhwysydd sydd ynddo.
Ac i adeiladu bwrdd gyda lled sy'n ganran o'r elfen riant, ysgrifennwch:
< width width = "80%" >
Mae'r tabl hwn yn 80% o led y cynhwysydd sydd ynddo.
Gweler enghraifft o dabl gyda lled
TABL DIGWYDDIADAU 4.0.0 TABL
Mae un nodwedd o'r elfen TABL sydd heb ei amcangyfrif yn HTML 4.01 ac yn ddarfodedig yn HTML5: alinio . Mae'r priodwedd hwn yn eich galluogi i osod lle y dylai'r tabl gael ei leoli ar y dudalen sy'n berthynol i'r testun sydd wrth ei bodd. Mae'r nodwedd hon wedi ei ddibynnu yn HTML 4.01, a dylech osgoi ei ddefnyddio. Yn lle hynny, dylech ddefnyddio'r eiddo CSS neu'r ymyl-chwith: auto; ac ymyl-dde: auto; arddulliau. Mae'r eiddo arnofio yn rhoi canlyniad i chi sy'n agosach at yr hyn y mae'r priodwedd alinio wedi'i ddarparu, ond gall effeithio ar y ffordd y mae gweddill y cynnwys tudalen yn ei arddangos. Y ffin-dde: auto; ac ymyl-chwith: auto; yw'r hyn y mae'r W3C yn ei argymell fel dewis arall.
Dyma enghraifft ddibwys gan ddefnyddio'r priodwedd alinio:
alin = "dde" >
Mae'r tabl hwn wedi'i alinio'n iawn
Mae testun yn llifo o'i gwmpas i'r chwith
Gweler enghraifft ddibynadwy gan ddefnyddio'r priodwedd alinio.
Ac i gael yr un effaith â HTML ddilys (nad yw'n ddiamod), ysgrifennwch:
style = "float: right;" >
Mae'r tabl hwn wedi'i alinio'n iawn
Mae testun yn llifo o'i gwmpas i'r chwith
Mae'r canlynol yn esbonio nodweddion TABL nad ydynt yn rhan o unrhyw fanyleb HTML.
Mae'r wybodaeth flaenorol yn disgrifio nodweddion yr elfen HTML sy'n ddilys yn HTML 4.01 ond maent yn ddarfodedig yn HTML5.
Mae'r canlynol yn disgrifio nodweddion TABL nad ydynt yn ddilys mewn unrhyw fanyleb gyfredol. Os nad ydych yn poeni a yw eich tudalennau'n dilysu a bod eich defnyddwyr yn defnyddio porwr sy'n cefnogi'r elfennau hyn, yna gallwch ddefnyddio'r elfennau hyn. Ond mae'r rhan fwyaf ohonynt naill ai'n cael eu cefnogi mewn porwyr modern neu mae ganddynt ddewisiadau eraill sy'n cydymffurfio â safonau mwy.
Nid ydym yn argymell defnyddio'r nodweddion hyn ar eich tablau HTML.
Y priodoldeb yw hen briodoldeb a gynhwyswyd cyn i CSS gael cefnogaeth eang. Mae'n eich galluogi i newid lliw cefndir y bwrdd. Gallwch osod enw lliw neu god hecsadegol. Mae'r priodoldeb hwn yn dal i weithio mewn llawer o borwyr, ond ar gyfer HTML sydd heb ei brawf yn y dyfodol, ni ddylech ei ddefnyddio, a defnyddio CSS yn lle hynny.
Yr opsiwn gwell i'r priodoldeb hwn yw'r eiddo arddull.
I newid lliw cefndir tabl, ysgrifennwch:
style = "background-color: #ccc;" >
Mae gan y bwrdd gefndir llwyd
Yn debyg i'r priodwedd bgcolor, mae priodoldeb bordercolor yn eich galluogi i newid lliw y priodoldeb. Dim ond Internet Explorer y cefnogir y priodoldeb hwn. Yn lle hynny, dylech ddefnyddio'r eiddo arddull lliw-ffin.
I newid lliw ffin eich tabl, ysgrifennwch:
style = "border-color: red;" >
Mae gan y tabl hwn ffin goch.
Roedd y nodweddion bordercolorlight a bordercordordark wedi'u cynnwys yn Internet Explorer i'ch galluogi i greu ffin 3D o gwmpas eich bwrdd. Fodd bynnag, fel IE8 ac i fyny, dim ond yn Modd Safonau IE7 a Chyfeiriadau y cefnogir hyn . Dywed Microsoft nad yw'r eiddo hyn bellach yn cael ei gefnogi.
Am gyfnod byr, cynigiwyd y priodwedd cols ar elfen TABLE i helpu porwyr i wybod faint o golofnau oedd gan y bwrdd. Y rhagdybiaeth oedd y byddai hyn yn helpu i gyflymu'r broses o rendro byrddau mawr. Fodd bynnag, dim ond Internet Explorer a roddwyd ar waith, ac fel IE8 ac i fyny, dim ond ym Mwyd Safonau IE7 a Chyfeiriadau y cefnogir hyn.
Oherwydd bod priodoldeb lled (a gasglwyd yn HTML5) tybiodd llawer o bobl fod priodoldeb uchder ar gyfer tablau hefyd. Ond oherwydd bod y tablau yn cydymffurfio â lled eu cynnwys neu'r lled diffiniedig yn y priodwedd CSS neu led, ni ellir cyfyngu'r uchder. Felly, yn lle hynny, roedd porwyr yn caniatáu i'r priodoldeb uchder ddiffinio isafswm uchder y tabl. Pe byddai'r bwrdd yn uwch na'r uchder hwnnw, byddai'n dangos talau. Ond dylech ddefnyddio'r eiddo
Gyda'r eiddo uchder CSS gallwch gyfyngu'r uchder os ydych chi'n defnyddio eiddo CSS hefyd i ddiffinio beth sy'n digwydd gydag unrhyw gynnwys dros ben.
I osod yr isafswm uchder ar fwrdd, ysgrifennwch:
< arddull bwrdd = "uchder: 30em;" >
Mae'r tabl hwn o leiaf 30 ems o uchder.
Y ddau briodwedd a'r gofod ychwanegol o gwmpas yr ochr chwith / dde (hspace) a phrif / gwaelod (vspace) y bwrdd. Dylech ddefnyddio'r eiddo arddull yn lle hynny.
I osod y gofod fertigol i 20 picsel a'r gofod llorweddol i 40 picsel, ysgrifennwch:
style = "margin: 20px 40px;"
Mae gan y tabl vspace o 20 picsel a hspace o 40 picsel
Mae'r priodoldeb yn briodoli boolean sy'n diffinio a ddylai cynnwys y bwrdd lapio ar ymyl yr elfen rhiant neu ffenestr neu rymio yn llorweddol. Yn hytrach, dylech ddiffinio nodweddion lapio pob cell bwrdd gan ddefnyddio eiddo CSS.
I wneud colofn gyda llawer o destun heb ei lapio, ysgrifennwch:
style = "white-space: nowrap;" > Mae hwn yn golofn gyda thunnell o gynnwys. Ond hyd yn oed os yw'n ehangach na'r cynhwysydd, ni ddylai'r testun lapio i'r llinell nesaf, ond yn hytrach rhoi'r ffenestr porwr i sgrolio'n llorweddol i weld yr holl gynnwys.
Yn olaf, mae'r priodoldeb yn diffinio sut y dylai cynnwys pob cell alinio'n fertigol o fewn y gell. Yn hytrach na'r priodoldeb annilys hwn, dylech ddefnyddio eiddo CSS ar bob cell rydych chi am newid aliniad. Ni fyddwch yn sylwi ar effeithiau'r arddull hon oni bai fod cynnwys y gell yn llai na'r lle sydd ar gael a grëir gan gelloedd eraill, mwy.
I orfodi cell i gyd-fynd â'r gwaelod (yn hytrach na'r canol, fel y rhagosodedig), ysgrifennwch:
Mae'r gell hon yn hirach na'r gweddill ac felly bydd yn gorfodi'r uchder i fod yn dalach. Felly byddwch yn gweld bod y gell wedi'i halinio'n fertigol wedi'i alinio i'r gwaelod.
style = "vertical-align: bottom;" > Cynnwys ar y gwaelod.
Cynnwys yn y canol.