HTML lentelės atributai suteikia jums daug daugiau galimybių valdyti HTML lenteles. Lentelėms yra prieinama daugybė atributų, kad jos taptų įdomesnės ir pakeistų jūsų puslapio išvaizdą.
HTML LENTELĖ Elemento atributai
Į HTML5 elementas naudoja visuotinius atributus ir dar vieną atributą ir jis pasikeitė, kad reikšmė būtų tik 1 arba tuščia (t. y. border = ""). Jei norite pakeisti kraštinės plotį, turėtumėte naudoti kraštinės plotį CSS nuosavybė.
Norėdami sužinoti apie galiojančius HTML5 lentelės atributus, žr. Toliau.
Taip pat yra keli atributai, kurie yra HTML 4.01 specifikacijos, pasenusios HTML5, dalis:
- —Naudokite CSS užpildo ypatybę lentelės TD ir TH elementuose.
- —Naudokite CSS ypatybių tarpų lentelėje.
- —Naudokite CSS stilių kraštinės spalva: juoda; ir sienos stiliaus ant stalo.
- —Naudokite CSS stilių kraštinės spalva: juoda; ir atitinkamų lentelės elementų krašto stiliaus.
- - Vietoj to turėtumėte aprašyti lentelės struktūrą CAPTION arba visą lentelę įdėti į PAVEIKSLĄ ir apibūdinti ją FIGCAPTION. Arba galite supaprastinti lentelės struktūrą, kad nereikėtų paaiškinti.
- —Naudokite CSS plotio ypatybę.
Vienas atributas, kuris buvo nebenaudojamas HTML 4.01, taip pat pasenęs HTML5.
- lygiuoti - vietoj to naudokite CSS paraštės ypatybę.
Taip pat yra keletas atributų, kurie nėra jokios HTML specifikacijos dalis. Naudokite šiuos atributus, jei žinote, kad palaikomos naršyklės gali juos tvarkyti ir jums nerūpi galiojantis HTML.
- —Vartokite CSS ypatybės fono spalvą.
- bordercolor - vietoj to naudokite CSS ypatybės kraštinę.
- bordercolorlight - vietoj to naudokite CSS ypatybės kraštinę.
- bordercolordark - vietoj to naudokite CSS ypatybės kraštinę.
- cols - šiam atributui nėra alternatyvos.
- aukštis - vietoj to naudokite CSS ypatybės aukštį.
- - Vietoj to naudokite CSS nuosavybės maržą.
- - Vietoj to naudokite CSS ypatybę.
- —Vartokite CSS ypatybę vertikaliai sulygiuoti.
HTML5 LENTELĖ Elemento atributai
Kaip jau minėjome aukščiau, HTML5 TABLE elemente galioja tik vienas atributas, be pasaulinių atributų: border.
Kraštinės atributas naudojamas apibrėžti kraštinę aplink visą lentelę ir visas joje esančias ląsteles. Buvo tam tikras klausimas, ar jis bus įtrauktas į HTML5 specifikaciją, tačiau taip ir liko, nes jame buvo pateikta ne tik stiliaus implikacijų, bet ir informacijos apie lentelės struktūrą.
Norėdami pridėti kraštinės atributą, nustatykite vertę į 1, jei yra kraštinė, ir tuščią (arba palikite atributą), jei jos nėra. Dauguma naršyklių taip pat palaikys 0, jei nėra krašto, ir bet kurią kitą sveikojo skaičiaus vertę (2, 3, 30, 500 ir kt.), Norint deklaruoti krašto plotį pikseliais, tačiau HTML5 tai pasenę. Vietoj to, norėdami apibrėžti krašto plotį ir kitus stilius, turėtumėte naudoti CSS krašto stiliaus ypatybes.
Norėdami sukurti lentelę su kraštu, parašykite:
border = "1">
Tai lentelė su kraštu
Tai apibūdina atributus TABLE, kurie galioja HTML 4.01, tačiau pasenę HTML5. Jei vis tiek rašote HTML 4.01 dokumentus, galite naudoti šiuos atributus, tačiau dauguma jų turi alternatyvų, kurios padarys jūsų puslapius labiau apsaugotus nuo ateities, kai pereisite prie HTML5.
Galiojantys HTML 4.01 atributai
Atributas, kurį aprašėme aukščiau. Vienintelis HTML 4.01 skirtumas nuo HTML5 yra tas, kad galite nurodyti bet kurį sveiką skaičių (0, 1, 2, 15, 20, 200 ir kt.), Kad apibrėžtumėte kraštinės plotį pikseliais.
Norėdami sukurti lentelę su 5 taškų kraštine, parašykite:
riba = "5">
Ši lentelė turi 5 taškų kraštinę.
Šis atributas apibrėžia erdvės kiekį tarp langelio ribų ir langelio turinį. Numatytasis nustatymas yra du pikseliai. Jei nenorite tarpo tarp turinio ir kraštų, nustatykite langelio užpildymą į 0.
Norėdami nustatyti langelio užpildymą iki 20, parašykite:
cellpadding = "20">
Šioje lentelėje yra 20 langelių.
Langelių kraštinės bus atskirtos 20 taškų.
Peržiūrėkite lentelės su langelių užpildu pavyzdį.
Šis atributas apibrėžia erdvės kiekį tarp lentelės langelių ir langelio turinį. Kaip ir „cellpadding“, numatytasis nustatymas yra du pikseliai, todėl, jei nenorite, kad tarp langelių būtų tarpai, turite nustatyti jį į 0.
Norėdami pridėti langelių tarpus tarp lentelės, parašykite:
langelių atstumas = "20">
Šios lentelės langelių tarpas yra 20.
Ląstelės bus atskirtos 20 taškų.
Atributas nurodo, kurios sienos dalys, supančios lentelės išorę, bus matomos. Stalą galite sudėlioti iš visų keturių pusių, iš vienos pusės, iš viršaus ir į apačią, į kairę ir į dešinę, arba iš jų.
Čia yra lentelės, kurioje yra tik kairės pusės kraštas, HTML:
kadras = "lhs">
Ši lentelė
turėsiu
tik
kairė pusė įrėminta.
Ir dar vienas pavyzdys su apatiniu rėmeliu:
rėmas = "žemiau">
Šios lentelės apačioje yra rėmas.
Peržiūrėkite keletą lentelių su rėmeliais.
Šis atributas yra panašus į rėmelio atributą, tik jis turi įtakos lentelės langelių riboms. Galite nustatyti taisykles visuose langeliuose, tarp stulpelių, tarp grupių, pvz., „TBODY“ ir „TFOOT“ arba nė vienos.
Norėdami sukurti lentelę su eilutėmis tik tarp eilučių, parašykite:
taisyklės = "eilutės">
Šis 4x4 stalas turi
eilutės ne stulpeliai
apibūdinta kartu su
taisyklių atributas.
Ir dar vienas su linijomis tarp stulpelių:
taisyklės = "kolos">
Tai yra
lentelė
kur
stulpeliai
yra
paryškintas
atributas teikia informaciją apie ekrano skaitytuvų ir kitų vartotojų agentų lentelę, kuriai gali kilti problemų skaitant lenteles. Norėdami naudoti atributą santrauka, parašykite trumpą lentelės aprašymą ir nurodykite tai kaip atributo vertę. Santrauka nebus rodoma tinklalapyje daugumoje standartinių interneto naršyklių.
Štai kaip parašyti paprastą lentelę su santrauka:
summary = "Tai yra lentelės pavyzdys, kuriame yra užpildymo informacijos. Šios lentelės tikslas yra parodyti santrauką.
1 stulpelio 1 eilutė.
2 stulpelio 1 eilutė.
1 stulpelio 2 eilutė.
2 stulpelio 2 eilutė.
Atributas nustato lentelės plotį pikseliais arba sudėtinio rodinio elemento procentais. Jei plotis nenustatytas, lentelė užims tik tiek vietos, kiek reikia turiniui rodyti, o maksimalus plotis yra toks pat kaip pirminio elemento plotis.
Norėdami sukurti lentelę su tam tikro pločio taškais, rašykite:
plotis = "300">
Ši lentelė sudaro 80% talpyklos, kurioje jis yra, pločio.
Norėdami sukurti lentelę, kurios plotis yra pirminio elemento procentas, parašykite:
plotis = "80%">
Ši lentelė sudaro 80% talpyklos, kurioje jis yra, pločio.
Nebenaudojamas HTML 4.01 LENTELĖS atributas
Yra vienas elemento TABLE atributas, kuris yra nebenaudojamas HTML 4.01 ir pasenęs HTML5: lygiuokite. Šis atributas leidžia nustatyti, kur lentelė turėtų būti puslapyje, palyginti su tekstu, esančiu šalia jos. Šis atributas buvo nebenaudojamas HTML 4.01, todėl turėtumėte vengti jo naudoti. Vietoj to turėtumėte naudoti CSS ypatybę arba kairę paraštę: auto; ir paraštė dešinėje: automatinis; stilius. „Float“ ypatybė suteikia jums rezultatą, artimesnį pateiktam atributui „align“, tačiau tai gali paveikti likusio puslapio turinio rodymą. Dešinė paraštė: automatinis; ir kairė paraštė: automatinis; yra tai, ką W3C rekomenduoja kaip alternatyvą.
Čia yra nebenaudojamas pavyzdys, naudojant atributą „align“:
align = "right">
Ši lentelė lygiuota teisingai.
Tekstas teka aplink jį į kairę.
Norėdami gauti tą patį efektą naudodami galiojantį (nebenaudojamą) HTML, parašykite:
style = "float: right;">
Ši lentelė lygiuota teisingai.
Tekstas teka aplink jį į kairę.
Pasenę LENTELĖS atributai
Ankstesnėje informacijoje aprašomi HTML elemento atributai, galiojantys HTML 4.01, bet pasenę HTML5.
Toliau aprašomi TABLE atributai, kurie negalioja jokioje dabartinėje specifikacijoje. Jei jums nerūpi, ar jūsų puslapiai patvirtinami, o vartotojai naudoja naršyklę, palaikančią šiuos elementus, galite naudoti šiuos elementus. Tačiau dauguma jų nėra palaikomi šiuolaikinėse naršyklėse arba turi alternatyvas, kurios labiau atitinka standartus.
Mes nerekomenduojame naudoti šių atributų HTML lentelėse.
Šis atributas yra senas atributas, kuris buvo įtrauktas prieš plačiai palaikant CSS. Tai leidžia jums pakeisti stalo fono spalvą. Galite nustatyti spalvų pavadinimą arba šešioliktainį kodą. Šis atributas vis dar veikia daugelyje naršyklių, tačiau ateičiai pritaikytam HTML neturėtumėte jo naudoti, o naudoti CSS.
Geresnė šio atributo alternatyva yra stiliaus savybė.
Norėdami pakeisti lentelės fono spalvą, parašykite:
style = "background-color: #ccc;">
Šios lentelės fonas yra pilkas.
Panašiai kaip „bgcolor“ atributas, „bordercolor“ atributas leidžia pakeisti atributo spalvą. Šį atributą palaiko tik „Internet Explorer“. Vietoj to turėtumėte naudoti krašto spalvos stiliaus ypatybę.
Norėdami pakeisti lentelės krašto spalvą, parašykite:
style = "border-color: red;">
Ši lentelė turi raudoną kraštą.
„Bordercolorlight“ ir „bordercolordark“ atributai buvo įtraukti į „Internet Explorer“, kad galėtumėte sukurti 3D kraštinę aplink savo stalą. Tačiau nuo IE8 ir naujesnių versijų tai palaikoma tik IE7 standartų režime ir Keistuolių režimas. „Microsoft“ teigia, kad šios savybės nebepalaikomos.
Trumpam laikui buvo pasiūlytas elemento TABLE atributas cols, kad naršyklės galėtų lengviau sužinoti, kiek stulpelių turi lentelė. Prielaida buvo ta, kad tai padėtų pagreitinti didelių lentelių pateikimą. Tačiau tai įdiegė tik „Internet Explorer“, o nuo IE8 ir naujesnių versijų tai palaiko tik „IE7 Standards Mode“ ir „Quirks Mode“.
Kadangi yra plotio atributas (pasenęs HTML5), daugelis žmonių manė, kad yra ir lentelių aukščio atributas. Kadangi lentelės atitinka jų turinio plotį arba apibrėžtą plotį CSS ar atribute, aukštis negalėjo būti ribojamas. Taigi, naršyklės leido atributui „aukštis“ apibrėžti minimalų lentelės aukštį. Jei stalas būtų aukštesnis už tą aukštį, jis būtų aukštesnis. Bet turėtumėte naudotis nuosavybe.
Naudodami CSS aukščio ypatybę, galite apriboti aukštį, jei taip pat naudojate CSS ypatybę, kad apibrėžtumėte, kas nutinka turint perteklių.
Norėdami nustatyti mažiausią stalo aukštį, parašykite:
style = "height: 30em;">
Ši lentelė yra bent 30 emų aukščio.
Du atributai ir pridėta erdvė aplink kairę / dešinę lentelės puses („hspace“) ir viršutinę / apatinę lentelės puses („vspace“). Vietoj to turėtumėte naudoti stiliaus ypatybę.
Norėdami nustatyti vertikalią erdvę iki 20 taškų, o horizontalią - iki 40 taškų, parašykite:
style = "paraštė: 20 ir 40 taškų;"
Šioje lentelėje yra 20 taškų ir 40 taškų erdvė.
Šis atributas yra loginis atributas, apibrėžiantis, ar lentelės turinys turi būti apvyniotas pagrindinio elemento ar lango krašte, ar priversti horizontaliai slinkti. Vietoj to turėtumėte apibrėžti kiekvienos lentelės langelio apvyniojimo ypatybes naudodami CSS ypatybę.
Norėdami, kad stulpelis, kuriame yra daug teksto, nebūtų apvyniotas, parašykite:
style = "white-space: nowrap;"> Tai yra stulpelis su daugybe turinio. Net jei tekstas yra platesnis už talpyklą, tekstas neturėtų apeiti į kitą eilutę, o priversti naršyklės langą slinkti horizontaliai, kad būtų rodomas visas turinys.
Galiausiai, atributas apibrėžia, kaip kiekvienos ląstelės turinys turėtų būti vertikaliai sulygintas ląstelėje. Vietoj šio netinkamo atributo turėtumėte naudoti CSS ypatybę kiekviename langelyje, kurio lygiavimą norite pakeisti. Jūs nepastebėsite šio stiliaus poveikio, nebent langelio turinys yra mažesnis nei laisvos vietos, sukurtos kitų, didesnių langelių.
Norėdami priversti langelį lygiuotis į apačią (o ne kaip vidurį, kaip numatytąjį), parašykite:
Ši ląstelė yra ilgesnė už likusias, todėl privers aukštį būti aukštesnį. Taigi pamatysite, kad vertikaliai sulyginta ląstelė yra sulyginta su apačia.
style = "vertical-align: bottom;"> Turinys apačioje.
Turinys viduryje.