Kaip išnaudoti visas HTML formato stalus, mokydamiesi lentelės atributus
HTML lentelės atributai suteikia jums daug daugiau kontrolės HTML lentelių. Lentelėms yra daug atributų, kad jie būtų įdomūs ir pakeistų jūsų puslapio išvaizdą.
HTML TABLE elemento atributai
HTML5 elementas naudoja globalius atributus ir dar vieną atributą:. Ir jis pasikeitė, kad tik vertė yra 1 arba tuščia (ty border = ""). Jei norite pakeisti sienos plotį, turėtumėte naudoti rėmelio pločio CSS savybę.
Žr. Toliau, kad sužinotumėte galiojančius HTML5 lentelės atributus.
Taip pat yra keletas atributų, kurie yra HTML 4.01 specifikacijos dalis, kuri HTML5 pakeista.
- -Naudokite CSS paddingo turinį stalo TD ir TH elementuose.
- -Naudokite CSS nuosavybės sienos tarpą ant stalo.
- -Vartotojo CSS stilius briaunos spalva: juoda; ir sienos stilius ant stalo.
- -Vartotojo CSS stilius briaunos spalva: juoda; ir sienos stilius ant tinkamų lentelės elementų.
- -Tačiau jūs turėtumėte apibūdinti lentelės struktūrą CAPTION arba įtraukti visą lentelę į figūrą ir apibūdinti ją FIGCAPTION. Arba galite supaprastinti lentelės struktūrą taip, kad nereikėtų paaiškinti.
- -Naudokite CSS pločio savybę.
Ir vienas atributas, kuris buvo nebeaktualus HTML 4.01 ir netgi pasenęs HTML5.
Sužinokite daugiau apie HTML 4.01 TABLE atributus.
- suderinti - vietoj jo naudokite CSS maržos nuosavybę.
Taip pat yra keletas atributų, kurie nėra jokios HTML specifikacijos dalis.
Naudokite šiuos atributus, jei žinote, kad jūsų palaikomos naršyklės gali jas tvarkyti, ir jums nereikia rūpintis galiojančiu HTML formatu.
- -Jei naudokite CSS nuosavybės fono spalvą.
- bordercolor - vietoj CSS nuosavybės kraštinės spalvos.
- bordercolorlight -Reguliuokite CSS nuosavybės kraštinę spalvą.
- bordercolordark - naudokite CSS nuosavybės sienos spalvą.
- cols-Nėra šio atributo alternatyva.
- aukštis - vietoj jo naudokite CSS nuosavybės aukštį.
- -Jei naudokite CSS nuosavybės maržą.
- -Jei naudokite CSS nuosavybės maržą.
- -Jei naudojate CSS nuosavybės balta erdvę.
- - Vietoje to naudokite CSS nuosavybę vertikaliai.
Sužinokite daugiau apie "Browser Specific TABLE" atributus.
HTML5 LENTELĖS elementų atributai
Kaip minėjome aukščiau, yra tik vienas atributas, kuris viršija globalius atributus, kuris galioja elemento HTML5 TABLE: border.
Sienos atributas naudojamas apibūdinti sieną aplink visą lentelę ir visas jos ląsteles. Buvo keli klausimas, ar jis bus įtrauktas į HTML5 specifikaciją, tačiau jis išliko, nes jame pateikiama informacija apie lentelės struktūrą, o ne vien tik stilius.
Jei norite pridėti pasienio atributą, jūs nustatote reikšmę 1, jei yra riba ir tuščia (arba palikite atributą), jei jo nėra. Dauguma naršyklių taip pat palaiko 0 be sienos ir bet kokią kitą sveiką skaičių reikšmę (2, 3, 30, 500 ir tt), kad paskelbs sienos pločio taškais, tačiau tai yra pasenusi HTML5. Vietoj to, turėtumėte naudoti CSS sienų stiliaus savybes, kad apibrėžtumėte sienos plotį ir kitus stilius.
Norėdami sukurti lentelę su riba, rašykite:
border = "1" >
Tai lentelė su sienele
Yra HTML 4.01 atributai, kurie yra pasenę HTML5. Jei ketinate kurti HTML 4.01 dokumentus, galite juos sužinoti, priešingu atveju galite jas ignoruoti. Daugeliui šių savybių yra alternatyvų, aprašytų aukščiau.
Mes aprašome HTML5 (ir HTML 4.01) galiojančio elemento atributus. Tai apibūdina TABLE atributus, kurie galioja HTML 4.01, tačiau HTML5 yra pasenę. Jei vis dar rašote HTML 4.01 dokumentus, galite naudoti šiuos atributus, tačiau daugumoje jų yra alternatyvų, dėl kurių jūsų puslapiai bus saugesni ateityje, kai perkelsite HTML5.
Valid HTML 4.01 Atributai
Atributas, aprašytas aukščiau.
Vienintelis skirtumas HTML 4.01 iš HTML5 yra tas, kad galite nurodyti bet kurį visą sveikąjį skaičių (0, 1, 2, 15, 20, 200 ir tt), norėdami nustatyti sienos pločio pikseliais.
Norėdami sukurti lentelę su 5 piks. Sienos, rašykite:
border = "5" >
Ši lentelė turi 5 piks. sieną.
Žr. Dviejų lentelių su sienomis pavyzdį.
Šis atributas apibrėžia erdvės tarp langelių sienų ir ląstelės turinio kiekį. Numatytoji reikšmė yra du pikseliai. Nustatykite "cellpadding" į 0, jei nenorite tarpo tarp turinio ir sienų.
Norėdami nustatyti ląstelių užpildą iki 20, rašykite:
cellpadding = "20" >
Ši lentelė turi 20 skaitmenų paketą.
Korpuso sienos bus atskirtos 20 pikselių.
Peržiūrėkite lentelės pavyzdį su "cellpadding"
Šis atributas apibrėžia erdvę tarp lentelių ląstelių ir ląstelių turinio. Kaip ir "cellpadding", numatytasis nustatymas yra du pikseliai, todėl jūs turite nustatyti jį 0, jei nenorite, kad tarpų būtų.
Norėdami pridėti elementų skaičių prie lentelės, rašykite:
cellspacing = "20" >
Šioje lentelėje yra 20 elementų.
Ląstelės bus atskirtos 20 pikselių.
Žiūrėkite lentelę, kurioje yra elementai
Šis atributas nurodo, kurios pasienio dalys aplink stalą bus matomos. Galite karkasyti savo stalą iš visų keturių pusių, iš vienos pusės, viršaus ir apačios, į kairę ir į dešinę arba nė vieno.
Štai HTML lentelė su tik kairiajame krašte:
frame = "lhs" >
Ši lentelė
turės
tik
kairė pusė įrėminta.
Ir dar vienas pavyzdys su apatiniu rėmeliu:
frame = "below" >
Šioje lentelėje apačioje yra rėmelis.
Patikrinkite keletą lentelių su rėmeliais
Atributas yra panašus į rėmelio atributą, tik jis veikia sienas aplink stalo langelius. Galite nustatyti taisykles visoms ląstelėms, tarp stulpelių, tarp grupių, tokių kaip TBODY ir TFOOT, arba nė vieno.
Norėdami sukurti lentelę su linijomis tik tarp eilučių, rašykite:
rules = "rows" >
Šiame lentelėje 4x4 yra
eilutės, o ne stulpeliai
aprašyta
Atitinka taisykles.
O kita eilutė tarp stulpelių:
rules = "cols" >
Tai yra
lentelė
kur
stulpeliai
yra
paryškintas
Štai lentelės su taisyklėmis pavyzdys
Šis atributas pateikia informaciją apie lentelę ekrano skaitytuvams ir kitiems naudotojų agentams, kuriems gali būti sunku skaityti lenteles. Norėdami naudoti santraukos atributas, rašote trumpą lentelės aprašymą ir nurodykite jį kaip atributo reikšmę. Santrauka nebus rodoma daugelyje standartinių žiniatinklio naršyklių tinklalapyje.
Štai kaip parašyti paprastą lentelę su santrauka:
santrauka = "Tai pavyzdinė lentelė, kurioje yra užpildo informacija. Šios lentelės tikslas - parodyti santrauką." >
1 stulpelio eilutė
2 stulpelio eilutė
1 stulpelio eilutė 2
stulpelis 2 eilutė 2
Žiūrėkite lentelę su santrauka
Šis atributas apibrėžia lentelės plotį pikseliais arba kaip konteinerio elemento procentą. Jei plotis nenustatytas, lentelė užims tik tiek pat vietos, kiek reikia turinio rodymui, maksimalus plotis toks pat kaip tėvų elemento plotis.
Norėdami sukurti lentelę su konkrečiu plotu piktogramose, rašykite:
width = "300" >
Ši lentelė yra 80% konteinerio pločio.
Ir sukurti lentelę su pločiu, kuris yra tėvų elemento procentas, parašykite:
width = "80%" >
Ši lentelė yra 80% konteinerio pločio.
Žr. Lentelės su pločiu pavyzdį
Neteisingas HTML 4.01 TABLE atributas
Yra vienas TABLE elemento atributas, kurio negalima laikyti HTML 4.01 ir pasenęs HTML5: suderinti . Šis atributas leidžia nustatyti, kur lentelė turėtų būti ant puslapio, palyginti su tekstu šalia jo. Šis atributas buvo neaktyvus HTML 4.01, todėl neturėtumėte jo naudoti. Vietoj to turėtumėte naudoti CSS nuosavybę arba margin-left: auto; ir margin-right: auto; stilius. Išplėstinė nuosavybė suteikia jums rezultatą, kuris yra arčiau prie pateikto priderinto atributo, bet tai gali paveikti taip, kaip rodomas likęs puslapio turinys. Atsargos teisė: automatinė; ir margin-left: auto; yra tai, ką W3C rekomenduoja kaip alternatyvą.
Čia yra nepakankamas pavyzdys naudojant lydinio atributą:
align = "right" >
Ši lentelė išdėstyta teisingai
Tekstas teka aplink jį į kairę
Naudodamiesi lydinio atributu, žr. Pasenusią pavyzdį.
Ir norint gauti tą patį efektą su galiojančiu (nenukrypsta) HTML, rašykite:
style = "float: right;" >
Ši lentelė išdėstyta teisingai
Tekstas teka aplink jį į kairę
Toliau paaiškinami TABLE atributai, kurie nėra jokios HTML specifikacijos dalis.
Ankstesniame aprašyme aprašomi HTML elemento atributai, kurie galioja HTML 4.01, tačiau yra pasenę HTML5.
Toliau aprašomi TABLE atributai, kurie nėra tinkami jokiai dabartinei specifikacijai. Jei nesvarbu, ar jūsų puslapiai tvirtinami, o jūsų vartotojai naudoja naršyklę, kuri palaiko šiuos elementus, galite naudoti šiuos elementus. Tačiau dauguma jų nėra palaikomos šiuolaikinėse naršyklėse arba yra alternatyvos, kurios labiau atitinka standartus.
Mes nenorime naudoti šių atributų HTML lentelėse.
Atributas yra senas požymis, kuris buvo įtrauktas prieš plačiai palaikomą CSS. Tai leidžia jums pakeisti lentelės fono spalvą. Galite nustatyti spalvą arba šešioliktainį kodą. Šis atributas vis dar veikia daugybėje naršyklių, bet HTML apsaugai, kuriam reikia ateities, neturėtumėte jo naudoti ir naudoti CSS.
Geresnė šio atributo alternatyva yra stiliaus savybė.
Norėdami pakeisti lentelės fono spalvą, rašykite:
style = "background-color: #ccc;" >
Ši lentelė pilka fone
Panašus į atributą bgcolor, atributas bordercolor leidžia jums pakeisti atributo spalvą. Šis atributas yra palaikomas tik "Internet Explorer". Vietoj to turėtumėte naudoti sienų spalvų stiliaus savybę.
Norėdami pakeisti lentelės sienos spalvą, rašykite:
style = "border-color: red;" >
Ši lentelė turi raudoną sieną.
"Bordercolorlight" ir "Bordercolordark" atributai buvo įtraukti į "Internet Explorer", kad galėtumėte sukurti trimatę sieną aplink jūsų stalą. Tačiau nuo IE8 ir naujesnės versijos tai palaikoma tik IE7 standartų režimu ir "Quirks" režimu . Microsoft teigia, kad šios savybės nebepalaikomos.
Trumpam laikui elementas "TABLE" atributui "cols" buvo pasiūlytas, kad naršyklės galėtų žinoti, kiek stulpelių buvo lentelėje. Manoma, kad tai padėtų pagreitinti didelių lentelių pateikimą. Tačiau ji buvo įdiegta tik "Internet Explorer", o nuo IE8 ir naujesnės versijos tai palaikoma tik IE7 standartų režimu ir "Quirks" režimu.
Kadangi yra pločio atributas (pasenęs HTML5) daugelis žmonių manė, kad lentelėms taip pat buvo ir aukščio atributas. Tačiau kadangi lentelės atitinka jų turinio plotį arba apibrėžtą plotį CSS arba pločio atributo, aukštis negali būti apribotas. Taigi vietoj to naršyklės leido aukščio atributas apibrėžti minimalų lentelės aukštį. Jei lentelė buvo aukštesnė už aukštį, ji būtų aukštesnė. Bet turėtumėte naudoti turtą
Naudodami CSS aukščio savybę, galite nustatyti aukštį, jei naudosite CSS nuosavybę, kad apibrėžtumėte, kas atsitiks su turinio pertekliumi.
Norėdami nustatyti minimalų aukštį ant stalo, rašykite:
style = "height: 30em;" >
Ši lentelė yra ne mažesnė kaip 30 ems.
Du atributai ir pridėta vieta aplink kairę / dešinę pusę (hspace) ir viršutinę / apačią (vspace) lentelėje. Vietoj to turėtumėte naudoti stiliaus nuosavybę.
Norėdami nustatyti vertikalią erdvę iki 20 pikselių ir horizontalią erdvę iki 40 pikselių, rašykite:
style = "margin: 20px 40px;"
Šioje lentelėje yra 20 pikselių ir 40 pikselių hspace.
Šis atributas yra loginis atributas, kuris apibrėžia, ar lentelės turinys turi būti įtrauktas į patronuojančio elemento ar lango kraštą arba priversti horizontalųjį slinkimą. Vietoj to, turėtumėte apibrėžti kiekvienos lentelės langelio apvyniojimo charakteristikas naudodami CSS nuosavybę.
Norėdami sukurti stulpelį su daug teksto nevynioti, parašykite:
style = "white-space: nowrap;" > Tai yra stulpelis su tonu turinio. Tačiau net jei ji yra platesnė nei konteineris, tekstas neturėtų būti įtrauktas į kitą eilutę, o užversti naršyklės langą horizontaliai, kad galėtumėte peržiūrėti visą turinį.
Galiausiai, atributas apibrėžia, kaip kiekvienos ląstelės turinys turėtų būti lygus vertikaliai ląstelėje. Vietoj šio neleistino atributo turėtumėte naudoti CSS nuosavybę kiekvienoje ląstelėje, kurią norite pakeisti. Nepastebėsite šio stiliaus efektų, nebent ląstelės turinys bus mažesnis už laisvą erdvę, sukurtą kitų didesnių elementų.
Norėdami priversti ląstelę suderinti su apačioje (o ne vidurine, kaip numatytąją), rašykite:
Ši ląstelė yra ilgesnė nei likusi dalis, todėl aukštis bus priverstas būti aukštesnis. Taigi pamatysite, kad vertikaliai išdėstyta ląstelė yra suderinta su apačia.
style = "vertical-align: bottom;" > Turinys apačioje.
Turinys viduryje.