Tabeli atribuutide tundmaõppimine HTML-tabelite abil
HTML-tabeli atribuudid võimaldavad teil palju paremini hallata HTML-tabeleid. Tabelitele on saadaval palju atribuute, mis muudavad need huvitavamaks ja muudavad teie lehe välimust.
HTML TABELi elemendi atribuudid
HTML5-s kasutab element globaalseid atribuute ja veel üht atribuuti:. Ja see on muutunud ainult väärtuseks 1 või tühi (st border = ""). Kui soovite piiri laiust muuta, peate kasutama piiri laiuse CSS-i vara.
Vt allpool, et õppida kehtivaid HTML5 tabeli atribuute.
HTML-i 4.01 spetsifikatsioonis on ka mitu atribuuti, mis HTML5-s on vananenud:
- -Kasutage lahtrite TD ja TH elementide CSS-i täitematerjali omadust.
- -Kasutage CSS-i vara piirilaiust lauale.
- -Kasuta CSS-i stiilid piiri värv: must; ja piiri stiil lauale.
- -Kasuta CSS - i stiilid piiri värv: must; ja piiri stiil tabeli sobivatele elementidele.
- - Selle asemel peate kirjeldama tabeli struktuuri CAPTION või panna kogu tabel JOONIS ja kirjeldama seda FIGCAPTION. Teise võimalusena võiksite tabeli struktuuri lihtsustada, et pole vaja selgitusi.
- -kasutage CSSi laiuse vara.
Ja üks atribuut, mis ei ole HTML-i versioonis 4.01 ja kes on vananenud ka HTML5-is.
Lisateave HTML 4.01 TABLE atribuutide kohta.
- Joondamine - kasuta CSS-i marginaali vara.
Samuti on mitu atribuuti, mis ei kuulu ühtegi HTML-i spetsifikatsiooni.
Kasutage neid atribuute, kui teate, et teie toetatavad brauserid saavad neid käsitseda ja te ei huvita kehtivat HTML-i.
- -Seage CSS-i vara taustavärv.
- bordercolor - kasutage CSS-i vara piirvärvi.
- bordercolorlight - kasutage CSS-i vara piirvärvi.
- bordercolordark - kasutage CSS-i vara piirvärvi.
- cols - Selle atribuudi jaoks pole alternatiivi.
- kõrgus - asemel kasutage CSSi varakõrgust.
- -Kasutage CSS-i vara marginaali.
- -Kasutage CSS-i vara marginaali.
- -Kasutage CSS-i vara valge ruumi.
- -Kasutage CSS-i vara vertikaalse joonduse asemel.
Lisateave brauseri spetsiifiliste TABLE atribuutide kohta.
HTML5 TABELI elemendi atribuudid
Nagu eespool mainitud, on ainult üks atribuut peale globaalsete atribuutide, mis kehtib HTML5 TABLE elemendi: border.
Piiri atribuuti kasutatakse piiri määramiseks kogu tabeli ja kõigi selles sisalduvate lahtrite ümber. Tekkis mõni küsimus selle kohta, kas see sisaldub HTML5-spetsifikatsioonis, kuid see jäi seetõttu, et see andis tabeli struktuuri kohta teavet peale lihtsalt stiili tähenduste.
Piiri atribuudi lisamiseks määrate väärtuseks 1, kui on piiri ja tühi (või jäta atribuudist välja), kui seda pole. Enamik brauseritest toetavad ka piiri puudumisel 0 ja mõnda muud täisarvulist väärtust (2, 3, 30, 500 jne), et deklareerida piiri laius pikslites, kuid see on HTML5-s vananenud. Selle asemel peaksite piiri laiuse ja muude stiilide määratlemiseks kasutama CSS-i piiri stiili omadusi.
Piirjoont sisaldava tabeli loomiseks kirjutage:
border = "1" >
See on piirideta tabel
HTML5-is atribuudid HTML 4.01 on vananenud. Kui plaanite kirjutada HTML 4.01 dokumente, saate neid õppida, muidu võite neid ignoreerida. Enamikul neist omadustest on alternatiivid, mida on kirjeldatud eespool.
Kirjeldame HTML5-s (ja HTML 4.01) kehtivaid elementi atribuute. Selles kirjeldatakse TABLE atribuute, mis kehtivad HTML 4.01-s, kuid on HTML5-s vananenud. Kui kirjutad endiselt HTML 4.01 dokumente, saate neid atribuute kasutada, kuid enamikul neist on alternatiive, mis muudavad teie lehed tulevasteks tõenditeks HTML5-ga liikumisel.
Valid HTML 4.01 atribuudid
Omadus, mida me eespool kirjeldasime.
HTML5-s HTML 4.01 ainus erinevus on see, et saate määratleda kogu täisarvu (0, 1, 2, 15, 20, 200 jne) piiri laiuse määramiseks pikslites.
5tollise piiriga tabeli loomiseks kirjutage:
piir = "5" >
Sellel tabelil on 5px piirid.
Vt näide kahest tabelist, millel on piirid.
Atribuut määrab ruumi hulga vahel raku piiride ja lahtri sisu vahel. Vaikimisi on kaks pikslit. Määrake cellpadding 0, kui te ei soovi ruumi sisu ja piiride vahel.
Rakupildid 20, kirjutada:
cellpadding = "20" >
Selles tabelis on cellpadding 20.
Lahtri piirid eraldatakse 20 piksliga.
Näidis tabelit, millel on klapid
Atribuut määrab tabelrakkude ja raku sisu vahelise ruumi summa. Nagu kiipkaardid, on vaikeseade määratud kaheks piksliteks, nii et peate määrama selle 0-le, kui te ei soovi ühtegi rajavahetust.
Tabeli lahtrisse lisamiseks kirjutage:
cellpacing = "20" >
Selles tabelis on cellpacing 20.
Lahtrid eraldatakse 20 piksliga.
Vaadake tabelit, milles on rakupaika
Atribuut tuvastab, millised osa tabelisse jäävat piiri on nähtavad. Saate raami oma lauale kõigil neljal küljel, ühel küljel, ülaservas ja allos, vasakul ja paremal või mitte.
Siin on tabel HTML, millel on ainult vasakpoolne piir:
frame = "lhs" >
See tabel
on
ainult
vasak pool raamitud.
Ja veel üks näide alumisest raamist:
frame = "below" >
Sellel tabelil on alumine raam.
Vaadake mõnda kaarti sisaldavat tabelit
Atribuut sarnaneb raami atribuudiga, ainult see mõjutab tabeli lahtrite piiri. Võite seada reegleid kõikidele lahtritele veergude vahel, rühmade vahel nagu TBODY ja TFOOT või mitte.
Ainult ridade ridade vahel olevate tabelite koostamiseks kirjutage:
reeglid = "read" >
Selles tabelis 4x4 on
read mitte veerud
koosneb
reeglite atribuut.
Ja teine veergude vaheliste joontega:
rules = "cols" >
See on
tabel
kus
veergud
on
esile tõstetud
Siin on näide reeglite tabelist
Atribuut annab teavet ekraanilugejate tabeli ja muude kasutajate agentide kohta, kellel võib olla tabelite lugemisega probleeme. Kokkuvõtte atribuudi kasutamiseks kirjutate tabeli lühikirjelduse ja asetage see atribuudi väärtuseks. Kokkuvõte ei ilmu enamiku standardsete veebibrauserite veebisaidil.
Siin on, kuidas kirjutada lihtsa tabeli koos kokkuvõttega:
summary = "See on näidislaud, mis sisaldab infolehte. Selle tabeli eesmärk on näidata kokkuvõtet." >
veerg 1 rea 1
veerg 2 rida 1
veerg 1 rida 2
veerg 2 rida 2
Tabeli kokkuvõtte vaatamine
Atribuut määratleb tabeli laiuse kas pikslites või konteineri elemendi protsendina. Kui laiust ei ole määratud, võtab tabel ainult nii palju ruumi, kui on vaja sisu kuvamiseks, mille maksimaalne laius on võrdne põhielemendi laiusega.
Spetsiaalse laiusega pikslite jaoks laua loomiseks kirjutage:
width = "300" >
See tabel on 80% konteineri laiusest, kus see on.
Ja ehitada laud, mille laius on protsent vanema elemendist, kirjutada:
width = "80%" >
See tabel on 80% konteineri laiusest, kus see on.
Näete laua laiust
Kehtetu HTML 4.01 TABLE atribuut
TABLE-elemendi üks atribuut on HTML 4.01-s vananenud ja HTML5-s vananenud: joondus . Selle atribuudiga saate määrata, kus tabel peaks lehel asuma teksti kõrval. See atribuut on HTML 4.01-s vananenud ja te ei tohiks seda kasutada. Selle asemel peaksite kasutama CSS-i vara või margin-left: auto; ja margin-parem: auto; stiilid. Ujuv vara annab tulemuse, mis on lähemal sellele, mida joonduse atribuut on esitatud, kuid see võib mõjutada viisi, kuidas ülejäänud lehe sisu kuvatakse. Varu margin: auto; ja margin-left: auto; mida W3C soovitab alternatiivina.
Siin on mittevastav näide, kasutades joonduse atribuuti:
align = "right" >
See tabel on joondatud
Teksti voog vasakule
Väljastatud näite kasutamine joonduse atribuudi abil.
Ja selleks, et saada sama efekt kehtiva (mitte vananenud) HTML-iga, kirjutage:
style = "float: right;" >
See tabel on joondatud
Teksti voog vasakule
Alljärgnevalt selgitatakse TABLE atribuute, mis ei kuulu ühtegi HTML-i spetsifikatsiooni.
Eelmine teave kirjeldab HTML-elemendi atribuute, mis kehtivad HTML 4.01-s, kuid mis on HTML5-s vananenud.
Järgnev kirjeldab tabeli atribuute, mis ei kehti mis tahes praeguses spetsifikatsioonis. Kui te ei hooli sellest, kas teie lehed valideerivad ja teie kasutajad kasutavad neid elemente toetavat brauserit, saate neid elemente kasutada. Kuid enamik neist ei ole tänapäevastes brauserites toetatud või neil on alternatiivid, mis vastavad rohkem standarditele.
Me ei soovita neid atribuute oma HTML-tabelites kasutada.
Atribuut on vana atribuut, mis sisaldus enne CSS-i laialdast toetamist. See võimaldab teil muuta tabeli taustavärvi. Võite määrata värvi nime või heksadetsimaa koodi. See atribuut töötab endiselt paljude brauseritega, kuid tulevikus kaitstud HTML-i puhul ei tohiks seda kasutada ja kasutada CSS-i.
Selle atribuudi paremaks alternatiiviks on stiili omadus.
Tabeli taustavärvi muutmiseks kirjutage:
style = "background-color: #ccc;" >
Selles tabelis on hall taust
Sarnaselt bgcolor atribuudiga võimaldab atribuut bordercolor atribuudi muuta atribuudi värvi. Seda atribuuti toetab ainult Internet Explorer. Selle asemel peaksite kasutama piiri värvi stiili vara.
Tabeli piiri värvi muutmiseks kirjutage:
style = "border-color: red;" >
Sellel tabelil on punane piir.
Interjöörivalguse ja bordercolordark atribuudid lisati Internet Explorerisse, et saaksite oma laua ümber luua 3D-piiri. Kuid alates IE8-st on seda toetatud ainult IE7 standardite režiimis ja Quirki režiimis . Microsoft väidab, et neid omadusi enam ei toetata.
Lühikese aja jooksul pakuti TABLE-elemendile atribuutide atribuuti, et aidata brauseritel teada, kui palju veerge oli tabelis. Eelduseks oli see, et see aitaks suuremaid tabeleid renderdada. Kuid seda rakendas ainult Internet Explorer, IE8 ja IE8 standardid toetavad seda ainult IE7 Standardrežiimis ja Quirki režiimis.
Kuna on olemas laiuse atribuut (HTML5-s vananenud), arvasid paljud, et tabelite jaoks on ka kõrguse atribuut. Kuid kuna tabelid vastavad nende sisu laiusele või CSS-i või laiuse atribuudi määratletud laiusele, ei saa kõrgust piirata. Selle asemel lubasid brauserid kõrguse atribuuti, et määratleda tabeli minimaalne kõrgus. Kui laud oleks kõrgem kui see kõrgus, oleks see pikem. Aga sa peaksid seda vara kasutama
CSS-kõrguse vara abil saate kõrgust piirata, kui kasutate ka CSS-i vara, et määratleda, mis juhtub liigse sisu puhul.
Minimaalse kõrguse määramiseks tabelis kirjutage:
style = "height: 30em;" >
See tabel on vähemalt 30 ee kõrge.
Need kaks atribuuti ja lisati ruumi vasakule / paremale küljele (hspace) ja ülevalt / alt (vspace) tabelis. Selle asemel peaksite kasutama stiili vara.
Vertikaalse ruumi määramiseks 20 pikslit ja horisontaalset ruumi 40 pikslini kirjutage:
stiil = "margin: 20px 40px;"
Selles tabelis on ruutvõimsus 20 pikslit ja hapniku suurus 40 pikslit.
Atribuut on boolean atribuut, mis määratleb, kas tabeli sisu peaks pakkima vanema elemendi või akna serva või kiirendama horisontaalset kerimastamist. Selle asemel peaksite määratlema iga tabeli lahtri mähkimise omadused, kasutades CSS-i vara.
Veeru loomiseks, millel on palju teksti, ei tohi sisestada:
style = "white-space: nowrap;" > See on veerg koos sisu toniga. Kuid isegi kui see on konteinerist laiem, ei peaks tekst jääma järgmisele reale, vaid selle asemel jõuab brauseri aken horisontaalseks, et kogu sisu näha.
Lõpuks määrab atribuut selle, kuidas iga lahtri sisu peaks lahtris vertikaalselt joondama. Selle kehtetu atribuudi asemel peaksite kasutama CSS-i vara igal lahtris, mille soovite muuta. Te ei märka selle stiili mõju, välja arvatud juhul, kui raku sisu on väiksem kui teiste suuremate kampude loodud vaba ruum.
Selleks, et sundida lahtrit altpoolt joondama (mitte keskel, vaikimisi), kirjuta:
See lahter on ülejäänud ja muudab kõrguse kõrgemaks. Nii näete, et vertikaalselt joondatud laht on altpoolt joondatud.
style = "vertical-align: bottom;" > Sisukord allosas.
Keskmise sisu.