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ščias (t. y. border = "") Jei norite pakeisti sienos plotį, turėtumėte naudoti pasienio plotis CSS nuosavybė.
Ž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
pamušalasturtas ant staloTDirTHelementai. - - Naudokite CSS nuosavybę
pasienio intervalasant stalo. - - Naudokite CSS stilius
pasienio spalva: juoda;irpasienio stiliusant stalo. - - Naudokite CSS stilius
pasienio spalva: juoda;irpasienio stiliusapie atitinkamus lentelės elementus. - - Vietoje to turite aprašyti lentelės struktūrą a
CAPTIONarba įdėti visą lentelę įPAVEIKSLĖir apibūdindamas jį aFIGCAPTION. Arba galite supaprastinti lentelės struktūrą taip, kad nereikėtų paaiškinti. - -Naudokite CSS
plotisnuosavybė.
Ir vienas atributas, kuris buvo nebeaktualus HTML 4.01 ir netgi pasenęs HTML5.
Sužinokite daugiau apie HTML 4.01 TABLE atributus.
suderinti-Naudokite CSSmaržaturtas.
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.
- - Naudokite CSS nuosavybę
fono spalvavietoj to. bordercolor- Naudokite CSS nuosavybępasienio spalvavietoj to.bordercolorlight- Naudokite CSS nuosavybępasienio spalvavietoj to.bordercolordark- Naudokite CSS nuosavybępasienio spalvavietoj to.cols- Nėra šio atributo alternatyva.aukštis- Naudokite CSS nuosavybęaukštisvietoj to.- - Naudokite CSS nuosavybę
maržavietoj to. - - Naudokite CSS nuosavybę
maržavietoj to. - - Naudokite CSS nuosavybę
balta vietavietoj to. - - Naudokite CSS nuosavybę
vertikaliai suderintivietoj to.
Sužinokite daugiau apie "Browser Specific TABLE" atributus.
HTML5 LENTELĖS elementų atributai
Kaip minėjome aukščiau, yra tik vienas atributas, viršijantis pasaulinius atributus, galiojančius HTML5 versijoje LENTELĖ elementas: sienos.
The sienos atributas naudojamas apibrėžiant visą lentelę esančią sritį 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.
Pridėti sienos atributas, jūs nustatote vertę 1 jei yra sienos ir tuščias (arba palikite atributą), jei jo nėra. Dauguma naršyklių taip pat palaikys 0 be jokių sienų ir bet kokios kitos sveikos vertės reikšmės (2, 3, 30, 500 ir tt), kad deklaruotų sienos pločio pikseliais, 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 sieną stalas
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ūdinaLENTELĖ atributai, kurie galioja HTML 4.01, bet yra pasenę HTML5. 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ė yra 5 piks. Sienos.
Ž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. Nustatyticellpadding į0 jei nenorite tarpo tarp turinio ir sienų.
Norėdami nustatyti ląstelių užpildą iki 20, rašykite:
<> cellpadding = "20" > Ši lentelė turi cellpadding nuo 20 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. Kaipcellpadding, numatytasis nustatytas į du taškus, todėl turite jį nustatyti0 jei nenorite, kad tarpų būtų.
Norėdami pridėti elementų skaičių prie lentelės, rašykite:
<> cellspacing = "20" > Ši lentelė turi cellpacing nuo 20 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ėsiu tik kairė pusė framed.
Ir dar vienas pavyzdys su apatiniu rėmeliu:
rėmas = "žemiau" >
Šioje lentelėje yra rėmelis apačioje.
Patikrinkite keletą lentelių su rėmeliais
Atributas yra panašus įrėmas atributas, tik jis veikia sienas aplink stalo langelius. Galite nustatyti taisykles visoms ląstelėms, tarp stulpelių, tarp grupių, pavyzdžiuiTBODY irTFOOT ar ne.
Norėdami sukurti lentelę su linijomis tik tarp eilučių, rašykite:
taisyklės = "eilutės" >
Šis 4x4 stalas yra eilutės nėra stulpeliai aprašyta su taisyklės atributas.
O kita eilutė tarp stulpelių:
taisyklės = "cols" >
Tai yra lentelė kur stulpeliai yra paryškintas
Čia yra 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 naudotisantrauka atributas, rašote trumpą lentelės aprašymą ir pridėkite jį kaip atributo reikšmę. Santrauka nebus rodoma daugelyje standartinių žiniatinklio naršyklių tinklalapyje.
Štai kaip parašyti paprastą lentelę su santrauka:
<> summary = "Tai pavyzdinė lentelė, kurioje yra užpildo informacija. Šios lentelės tikslas - parodyti santrauką." > 1 stulpelis 1 eilutė 2 stulpelis 1 eilutė 1 stulpelio 2 eilutė 2 stulpelis, 2 eilutė
Žiūrėkite lentelę su santrauka
Šis atributas apibrėžia lentelės plotį pikseliais arba kaip konteinerio elemento procentą. Jeiplotis nenustatyta, 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:
<> plotis = "80%" > Ši lentelė yra 80% konteinerio pločio.
Žr. Lentelės su pločiu pavyzdį
Neteisingas HTML 4.01 TABLE atributas
Yra vienas atributasLENTELĖ elementas, kuris nėra taikomas 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ę arbamargin-left: auto; iratsarginė pusė: automatinė; stilius. Theplūdė turtas suteikia jums rezultatą, kuris yra arčiau kosuderinti atributą, bet tai gali paveikti taip, kaip rodomas likusio puslapio turinys. Theatsarginė pusė: automatinė; irmargin-left: auto; yra tai, ką W3C rekomenduoja kaip alternatyvą.
Štai pasenęs pavyzdys naudojantsuderinti atributas:
<> suderinti = "teisingai" > Ši lentelė išdėstyta teisingai Tekstas juda į kairę
Žiūrėkite nenorintą pavyzdį naudojantsuderinti atributas.
Ir norint gauti tą patį efektą su galiojančiu (nenukrypsta) HTML, rašykite:
<> style = "float: right;" > Ši lentelė išdėstyta teisingai Tekstas juda į kairę
Tai paaiškinaLENTELĖ 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 apibūdinamosLENTELĖ atributai, netinkami 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 nerekomenduojame naudoti šių atributų savo 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 įbgcolor atributas,bordercolor atributas leidžia keisti 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ą.
Thebordercolorlight irbordercolordark 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 laikuicols atributas antLENTELĖ elementas 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.
Nes yra aplotis atributas (pasenęs HTML5) daugelis žmonių manė, kad ten buvo aaukštis atributas stalams. Bet kadangi lentelės atitinka jų turinio plotį arba apibrėžtą plotį CSS arbaplotis atributas, negalima apriboti aukščio. Taigi vietoj to naršyklės leidoaukštis atributas, norint nustatyti minimalų lentelės aukštį. Jei lentelė buvo aukštesnė už aukštį, ji būtų aukštesnė. Bet turėtumėte naudoti turtą
Su CSSaukštis nuosavybė, kuria galite apriboti aukštį, jei naudojate CSS nuosavybę, taip pat nustatykite, kas atsitiks su turinio pertekliumi.
Norėdami nustatyti minimalų aukštį ant stalo, rašykite:
<> stilius = "aukštis: 30em;" > Ši lentelė yra ne mažesnė kaip 30 ems.
Du atributai ir pridėta erdvė aplink kairę / dešinę pusę (hspace) ir viršuje / apačioje (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;" Ši lentelė turi 20 pikselių vspatiktį 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 jis yra platesnis nei konteineris, tekstas neturėtų būti įtrauktas į kitą eilutę, bet vietoj to naršyklės lange spustelėti 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šlyginta ląstelė yra suderinta su apačioje. <> style = "vertical-align: bottom;" > Turinys apačioje. Turinys viduryje.
