HTML-tabeli atribuudid võimaldavad teil palju paremini kontrollida HTML-tabeleid. Tabelitel on palju atribuute, et muuta need huvitavamaks ja muuta lehe välimust.
HTML TABEL elemendi atribuudid
Sisse HTML5 element kasutab globaalseid atribuute ja üht teist atribuuti ning see on muutunud väärtuseks ainult 1 või tühi (st border = ""). Kui soovite piiri laiust muuta, peaksite kasutama ääre laiust CSS-i vara.
Vaadake allpool kehtivate HTML5-tabeli atribuutide kohta lisateavet.
Samuti on mitu atribuuti, mis on osa HTML 4.01 spetsifikatsioonist, mis on HTML5-s vananenud:
- —Kasutage tabeli TD- ja TH-elementidel CSS-i poldi omadust.
- —Kasutage tabelis CSS-i atribuudi piiride vahekaugust.
- —Kasutage CSS-i stiile äärisvärv: must; ja laua ääres stiilis.
- —Kasutage CSS-i stiile äärisvärv: must; tabeli asjakohaste elementide äärisstiilis.
- —Selle asemel peaksite kirjeldama tabeli struktuuri CAPTION-is või panema kogu tabeli joonisele ja kirjeldama seda FIGCAPTION-is. Teise võimalusena võiksite tabeli ülesehitust lihtsustada, nii et selgitust pole vaja.
- —Kasutage atribuuti CSS width.
Ja üks atribuut, mis oli HTML 4.01-s aegunud ja HTML5-s ka vananenud.
- joondus - kasutage selle asemel omadust CSS margin.
Samuti on mitu atribuuti, mis ei kuulu ühegi HTML-i spetsifikatsiooni hulka. Kasutage neid atribuute, kui teate, et teie toetatud brauserid saavad nendega hakkama ja te ei hooli kehtivast HTML-ist.
- —Kasutage selle asemel CSS-i atribuudi taustavärvi.
- bordercolor - kasutage selle asemel CSS-i atribuudi piiri-värvi.
- bordercolorlight - kasutage selle asemel CSS-i atribuudi piiri värvi.
- bordercolordark - kasutage selle asemel CSS-i atribuudi piiri-värvi.
- cols - sellele atribuudile pole alternatiivi.
- kõrgus - selle asemel kasutage atribuudi CSS kõrgust.
- —Kasutage selle asemel CSS-i atribuudimarginaali.
- —Selle asemel kasutage atribuudi CSS tühikut.
- —Kasutage selle asemel CSS-i atribuuti vertikaaljoondus.
HTML5 TABEL elemendi atribuudid
Nagu me eespool mainisime, on HTML5 TABLE elemendi puhul lisaks globaalsetele atribuutidele ainult üks atribuut: border.
Äärise atribuuti kasutatakse piiri määramiseks kogu tabeli ja kõigi selle lahtrite ümber. Oli mõningane küsimus, kas see lisatakse HTML5 spetsifikatsiooni, kuid see jäi, sest see andis teavet tabeli struktuuri kohta, lisaks lihtsalt stiilimõjudele.
Äärise atribuudi lisamiseks määrate väärtuseks 1, kui on ääris, ja tühjendage (või jätke atribuut ära), kui seda pole. Enamik brausereid toetab piiri 0 laiust deklareerimata ja muud täisarvu (2, 3, 30, 500 jne), et deklareerida piiri laius pikslites, kuid HTML5-s on see vananenud. Selle asemel peaksite ääre laiuse ja muude stiilide määratlemiseks kasutama CSS-i piiristiili omadusi.
Äärisega tabeli loomiseks kirjutage:
ääris = "1">
See on äärisega tabel
See kirjeldab atribuute TABLE, mis kehtivad HTML 4.01-s, kuid on vananenud HTML5. Kui kirjutate endiselt HTML 4.01-dokumente, saate neid atribuute kasutada, kuid enamikul neist on alternatiive, mis muudavad teie lehed tulevikukindlamaks, kui liigute HTML5-le.
Kehtib HTML 4.01 atribuudid
Atribuut, mida me eespool kirjeldasime. Ainus erinevus HTML 4.01-s HTML5-st on see, et piiri laiuse määratlemiseks pikslites saate määrata mis tahes täisarvu (0, 1, 2, 15, 20, 200 jne).
5px äärisega tabeli loomiseks kirjutage:
ääris = "5">
Sellel tabelil on 5px ääris.
Atribuut määratleb lahtriservade ja lahtri sisu vahelise ruumi hulga. Vaikimisi on kaks pikslit. Kui soovite, et sisu ja piiride vahel ei oleks tühikut, määrake kärjepadja väärtuseks 0.
Lahtri poldiks määramiseks 20 kirjutage:
cellpadding = "20">
Selles tabelis on lahtrikomplekt 20.
Lahtrite piirid eraldatakse 20 piksliga.
Vaadake lahtri paddinguga tabeli näidet.
Atribuut määratleb tabeli lahtrite ja lahtrite sisu vahelise ruumi hulga. Sarnaselt kärjepadjaga on vaikimisi seatud kaks pikslit, nii et kui te ei soovi lahtrivahet, peate selle määrama väärtuseks 0.
Lahtrivahe lisamiseks tabelisse kirjutage:
lahtrivahe = "20">
Selle tabeli lahtriruum on 20.
Lahtrid eraldatakse 20 piksliga.
Atribuut identifitseerib tabeli väliskülge ümbritsevad piiriosad. Saate oma laua raamida kõigil neljal küljel, ühel või teisel küljel, üleval ja all, vasakul ja paremal või ühelgi.
Siin on ainult vasaku servaga tabeli HTML:
frame = "lhs">
See tabel
saab
ainult
vasak pool raamitud.
Ja veel üks näide alumise raamiga:
frame = "allpool">
Selle laua põhjas on raam.
Vaadake mõnda raamidega tabelit.
Atribuut sarnaneb raamiatribuudiga, ainult see mõjutab tabeli lahtrite ümber asuvaid piire. Reeglid saate määrata kõigile lahtritele, veergude vahel, rühmade vahel, näiteks TBODY ja TFOOT või mitte ühegi jaoks.
Ainult ridade vaheliste joontega tabeli koostamiseks kirjutage:
rules = "read">
Sellel 4x4 laual on
read mitte veerud
toodud koos
reeglite atribuut.
Ja teine, millel veergude vahel on read:
reeglid = "koolikud">
See on
laud
kus
veerud
on
esile tõstetud
The atribuut annab teavet ekraanilugejate ja muude kasutajaagentide tabeli kohta, millel võib olla probleeme tabelite lugemisega. Atribuudi kokkuvõte kasutamiseks kirjutage tabeli lühikirjeldus ja lisage see atribuudi väärtuseks. Kokkuvõtet ei kuvata enamikul standardsetes veebibrauserites veebilehel.
Lihtsa kokkuvõttega tabeli kirjutamiseks tehke järgmist.
summary = "See on näidistabel, mis sisaldab täiteavet. Selle tabeli eesmärk on näidata kokkuvõtet.
1. veeru 1. rida.
2. veeru 1. rida.
1. veeru 2. rida.
2. veeru 2. rida.
Atribuut määratleb tabeli laiuse kas pikslites või protsendina konteineri elemendist. Kui laiust pole määratud, võtab tabel sisu kuvamiseks vaja ainult nii palju ruumi, kui maksimaalne laius on sama kui vanemelemendi laius.
Kindla laiusega pikslites tabeli koostamiseks kirjutage:
laius = "300">
See tabel moodustab 80% konteineri laiusest.
Ja et luua tabel laiusega, mis on protsent vanemelemendist, kirjutage:
laius = "80%">
See tabel moodustab 80% konteineri laiusest.
Katkestatud HTML 4.01 TABEL atribuut
Elemendi TABLE üks atribuut on HTML 4.01-s aegunud ja HTML5-s vananenud: joondamine. Selle atribuudi abil saate määrata, kus tabel peaks lehel asuma selle kõrval oleva teksti suhtes. See atribuut on HTML 4.01-s aegunud ja te peaksite selle kasutamist vältima. Selle asemel peaksite kasutama atribuuti CSS või vasakpoolset veerist: auto; ja ääre paremal: auto; stiilid. Atribuut float annab teile tulemuse, mis on lähemal sellele, mida atribuut align andis, kuid see võib mõjutada ülejäänud lehe sisu kuvamist. Parempoolne ääris: automaatne; ja vasak serv: auto; on need, mida W3C soovitab alternatiivina.
Siin on aegunud näide atribuudi joondamine abil:
joondama = "õige">
See tabel on joondatud paremale.
Selle ümber voolab tekst vasakule.
Kehtiva (kasutamata) HTML-iga sama efekti saamiseks kirjutage:
style = "float: right;">
See tabel on joondatud paremale.
Selle ümber voolab tekst vasakule.
Vananenud TABEL atribuudid
Eelmine teave kirjeldab HTML-elemendi atribuute, mis kehtivad HTML 4.01-s, kuid on HTML5-s vananenud.
Järgnevas kirjeldatakse atribuute TABLE, mis ei kehti üheski praeguses spetsifikatsioonis. Kui te ei hooli sellest, kas teie lehed valideeritakse ja kasutajad kasutavad neid elemente toetavat brauserit, saate neid elemente kasutada. Kuid enamikku neist ei toetata tänapäevastes brauserites või neil on alternatiive, mis vastavad standarditele paremini.
Me ei soovita neid atribuute kasutada oma HTML-tabelites.
Atribuut on vana atribuut, mis lisati enne CSS-i laialdast toetamist. See võimaldab teil muuta tabeli taustavärvi. Saate määrata värvi nime või kuueteistkümnendsüsteemi koodi. See atribuut töötab endiselt paljudes brauserites, kuid tulevikukindla HTML-i jaoks ei tohiks te seda kasutada ja selle asemel kasutada CSS-i.
Selle atribuudi parem alternatiiv on stiili omadus.
Tabeli taustavärvi muutmiseks kirjutage:
style = "background-color: #ccc;">
Sellel tabelil on hall taust.
Sarnaselt atribuudiga bgcolor võimaldab ka atribuut bordercolor muuta atribuudi värvi. Seda atribuuti toetab ainult Internet Explorer. Selle asemel peaksite kasutama atribuuti border-color style.
Laua ääre värvi muutmiseks kirjutage:
style = "border-color: red;">
Sellel tabelil on punane ääris.
Bordercolorlight ja bordercolordark atribuudid lisati Internet Explorerisse, et saaksite oma laua ümber luua 3D-äärise. Alates IE8-st ja uuematest versioonidest toetatakse seda ainult IE7 standardrežiimis ja Veidruste režiim. Microsoft kinnitab, et neid atribuute enam ei toetata.
Lühikest aega tehti ettepanek elemendi TABLE atribuudile cols, et brauserid saaksid teada, mitu veergu tabelis on. Eelduseks oli, et see aitaks kiirendada suurte laudade renderdamist. Kuid seda rakendas ainult Internet Explorer ja alates IE8-st ja uuematest versioonidest toetab seda ainult IE7 standardrežiim ja Quirksi režiim.
Kuna seal on laiuse atribuut (HTML5-s vananenud), eeldasid paljud inimesed, et ka tabelite jaoks on olemas kõrgusatribuut. Kuid kuna tabelid vastavad nende sisu laiusele või CSS-is või atribuudis määratletud laiusele, ei saanud kõrgust piirata. Niisiis lubasid brauserid atribuudil height määrata tabeli minimaalse kõrguse. Kui laud oleks sellest kõrgusest kõrgem, oleks see kõrgem. Kuid peaksite vara kasutama.
Atribuudiga CSS height saate kõrgust piirata, kui kasutate atribuuti CSS ka liigse sisuga juhtumiseks.
Minimaalse kõrguse määramiseks lauale kirjutage:
style = "height: 30em;">
See laud on vähemalt 30 emsi kõrge.
Kaks atribuuti ja lisatud ruum tabeli vasaku / parema külje (hspace) ja ülemise / alumise (vspace) ümber. Selle asemel peaksite kasutama atribuudi stiil.
Vertikaalse ruumi 20 piksli ja horisontaalse 40 piksli määramiseks kirjutage:
style = "veeris: 20px 40px;"
Selle tabeli vsp-ruum on 20 pikslit ja ruum 40 pikslit.
Atribuut on tõeväärtuse atribuut, mis määrab, kas tabeli sisu peaks mähkima vanemelemendi või akna serva või sundima horisontaalselt kerima. Selle asemel peaksite CSS-i atribuudi abil määratlema iga tabeliraku pakkimisomadused.
Veergu, kus palju teksti ei mähkida, kirjutage:
style = "white-space: nowrap;"> See on veerg, milles on palju sisu. Isegi kui see on mahutist laiem, ei tohiks tekst järgmisele reale kerida, vaid sundida brauseriakent kogu sisu nägemiseks horisontaalselt kerima.
Lõpuks määratleb atribuut, kuidas peaks iga lahtri sisu lahtris vertikaalselt joonduma. Selle kehtetu atribuudi asemel peaksite CSS-i atribuuti kasutama igas lahtris, mille joondamist soovite muuta. Te ei märka selle stiili mõju, kui lahtri sisu pole väiksem kui teiste suuremate lahtrite loodud vaba ruum.
Lahtri sundimiseks joonduma alt (vaikimisi keskelt), kirjutage:
See lahter on pikem kui ülejäänud ja nii sunnib kõrgus olema kõrgem. Nii näete, et vertikaalselt joondatud lahter on joondatud põhjaga.
style = "vertical-align: bottom;"> Sisukord allosas.
Sisukord keskel.