Atributi tabel HTML vam omogočajo veliko več nadzora nad tabelami HTML. Tabelam je na voljo veliko atributov, da postanejo bolj zanimive in spremenijo videz vaše strani.
Atributi elementov HTML TABELA
V HTML5 element uporablja globalne atribute in en drug atribut in se je spremenil tako, da ima samo vrednost 1 ali prazen (tj. border = "") Če želite spremeniti širino obrobe, uporabite širino obrobe Lastnost CSS.
Spodaj si oglejte veljavne atribute tabele HTML5.
Obstaja tudi več atributov, ki so del specifikacije HTML 4.01, ki je v HTML5 zastarela:
- —Uporabite lastnost oblazinjenja CSS na elementih TD in TH tabele.
- —Na tabeli uporabite razmik med mejami lastnosti CSS.
- —Uporabite sloge CSS-barva obrobe: črna; in obrobe na mizi.
- —Uporabite sloge CSS-barva obrobe: črna; in obrobe na ustreznih elementih tabele.
- — Namesto tega bi morali opisati strukturo tabele v CAPTION ali postaviti celotno tabelo v SLIKO in jo opisati v FIGCAPTION. Lahko pa tudi poenostavite strukturo tabele, tako da ni potrebna nobena razlaga.
- —Uporabite lastnost širine CSS.
In en atribut, ki je bil zastarel v HTML 4.01 in je tudi zastarel v HTML5.
- align - raje uporabite lastnost roba CSS.
Obstaja tudi več atributov, ki niso del nobene specifikacije HTML. Te atribute uporabite, če veste, da jih podpirajo brskalniki, ki jih podpirate, in vam ni vseeno za veljaven HTML.
- —Namesto tega uporabite barvo ozadja lastnosti CSS.
- bordercolor - Namesto tega uporabite lastnost CSS border-color.
- bordercolorlight - Namesto tega uporabite lastnost CSS border-color.
- bordercolordark - Namesto tega uporabite lastnost CSS border-color.
- cols - Temu atributu ni alternative.
- višina - Namesto tega uporabite višino lastnosti CSS.
- - Namesto tega uporabite rob lastnosti CSS.
- —Namesto tega uporabite presledek lastnosti CSS.
- - Namesto tega uporabite lastnost CSS vertikalno poravnavo.
Atributi elementov tabele HTML5
Kot smo že omenili, obstaja le en atribut, ki presega globalne atribute in je veljaven za element TABELA HTML5: border.
Atribut border se uporablja za definiranje obrobe okoli celotne tabele in vseh celic v njej. Nekaj vprašanj je bilo, ali bo vključen v specifikacijo HTML5, vendar je ostal, ker je vseboval informacije o strukturi tabele, poleg zgolj slogovnih posledic.
Če želite dodati atribut obrobe, nastavite vrednost 1 na mejo in prazno (ali pustite atribut), če je ni. Večina brskalnikov bo podpirala tudi 0 za brez obrobe in katero koli drugo celoštevilsko vrednost (2, 3, 30, 500 itd.), Ki bo objavila širino obrobe v slikovnih pikah, vendar je v HTML5 zastarela. Namesto tega uporabite lastnosti sloga obrobe CSS, da določite širino obrobe in druge sloge.
Če želite ustvariti tabelo z obrobo, napišite:
border = "1">
To je tabela z obrobo
Ta opisuje atribute TABLE, ki so veljavni v HTML 4.01, vendar so zastareli v HTML5. Če še vedno pišete dokumente HTML 4.01, lahko uporabite te atribute, vendar ima večina alternativ, zaradi katerih bodo vaše strani bolj varne za prihodnost, ko se premaknete na HTML5.
Veljavni atributi HTML 4.01
Atribut, ki smo ga opisali zgoraj. Edina razlika v HTML 4.01 od HTML5 je ta, da lahko določite poljubno celo število (0, 1, 2, 15, 20, 200 itd.), Da določite širino obrobe v slikovnih pikah.
Če želite zgraditi tabelo z obrobo 5 px, napišite:
border = "5">
Ta tabela ima obrobo 5 slikovnih pik.
Atribut definira količino prostora med robovi celic in vsebino celice. Privzeto sta dve slikovni piki. Če ne želite presledka med vsebino in mejami, nastavite polnjenje celic na 0.
Če želite oblazinjenje celic nastaviti na 20, napišite:
cellpadding = "20">
V tej tabeli je 20 celic.
Meje celic bodo ločene z 20 slikovnimi pikami.
Oglejte si primer tabele s celicami.
Atribut definira količino prostora med celicami tabele in vsebino celice. Tako kot celično oblazinjenje je privzeto nastavljeno na dve slikovni piki, zato ga morate nastaviti na 0, če ne želite razmika med celicami.
Če želite tabeli dodati razmik celic, napišite:
cellpacing = "20">
Tabela ima razmik celic 20.
Celice bodo ločene z 20 slikovnimi pikami.
Atribut določa, kateri deli obrobe, ki obkrožajo zunanjo stran tabele, bodo vidni. Mizo lahko postavite na vse štiri strani, na katero koli stran, zgoraj in spodaj, levo in desno ali nobeno.
Tu je HTML za tabelo z levo stransko obrobo:
frame = "lhs">
Ta tabela
bo imel
samo
leva stran uokvirjena.
In še en primer z spodnjim okvirjem:
frame = "spodaj">
Ta miza ima na dnu okvir.
Oglejte si nekaj tabel z okvirji.
Atribut je podoben atributu okvirja, le da vpliva na obrobe okoli celic tabele. Pravila lahko nastavite v vseh celicah, med stolpci, med skupinami, kot sta TBODY in TFOOT ali nobena.
Če želite zgraditi tabelo s črtami samo med vrsticami, napišite:
rules = "vrstice">
Ta miza 4x4 ima
vrstice ne stolpci
opisano z
atribut pravila.
In še ena s črtami med stolpci:
rules = "cols">
To je
miza
kje za
stolpci
so
poudarjeno
The atribut zagotavlja informacije o tabeli za bralnike zaslona in druge uporabniške agente, ki bi lahko imeli težave pri branju tabel. Če želite uporabiti atribut povzetek, napišite kratek opis tabele in ga postavite kot vrednost atributa. Povzetek v večini običajnih spletnih brskalnikov ne bo prikazan na spletni strani.
Tukaj je opisano, kako napisati preprosto tabelo s povzetkom:
povzetek = "To je vzorčna tabela, ki vsebuje informacije o polnilu. Namen te tabele je prikazati povzetek. ">
stolpec 1 vrstica 1.
stolpec 2 vrstica 1.
stolpec 1 vrstica 2.
stolpec 2 vrstica 2.
Atribut določa širino tabele bodisi v slikovnih pikah bodisi kot odstotek elementa vsebnika. Če širina ni nastavljena, bo tabela zavzela le toliko prostora, kolikor potrebuje za prikaz vsebine, z največjo širino, enako širini nadrejenega elementa.
Če želite zgraditi tabelo z določeno širino v pikslih, zapišite:
width = "300">
Ta tabela je 80% širine vsebnika, v katerem je.
Če želite zgraditi tabelo s širino, ki je odstotek nadrejenega elementa, napišite:
width = "80%">
Ta tabela je 80% širine vsebnika, v katerem je.
Zastareli atribut tabele HTML 4.01
Obstaja en atribut elementa TABLE, ki je v HTML 4.01 zastarel in v HTML5 zastarel: align. Ta atribut vam omogoča, da nastavite, kje naj bo tabela na strani glede na besedilo ob njej. Ta atribut je zastarel v HTML 4.01 in se ga izogibajte. Namesto tega uporabite lastnost CSS ali margin-left: auto; in rob desno: samodejno; stilov. Lastnost float vam daje rezultat, ki je bližje tistemu, ki ga nudi atribut align, vendar lahko vpliva na prikaz preostale vsebine strani. Desni rob: samodejno; in rob levo: samodejno; so tisto, kar W3C priporoča kot alternativo.
Tu je zastarel primer z uporabo atributa align:
align = "right">
Tabela je poravnana desno.
Besedilo teče okoli njega v levo.
In če želite doseči enak učinek z veljavnim (ne zastarelim) HTML-jem, napišite:
style = "float: right;">
Tabela je poravnana desno.
Besedilo teče okoli njega v levo.
Zastareli atributi TABELE
Prejšnje informacije opisujejo atribute elementa HTML, ki so veljavni v HTML 4.01, vendar so zastareli v HTML5.
V nadaljevanju so opisani atributi TABLE, ki niso veljavni v nobeni trenutni specifikaciji. Če vas ne zanima, ali vaše strani preverjajo veljavnost in uporabniki uporabljajo brskalnik, ki podpira te elemente, jih lahko uporabite. Toda večina jih v sodobnih brskalnikih ni podprta ali pa imajo alternative, ki so bolj skladne s standardi.
Ne priporočamo uporabe teh atributov v tabelah HTML.
Atribut je star atribut, ki je bil vključen, preden je bil CSS široko podprt. Omogoča vam spreminjanje barve ozadja tabele. Nastavite lahko ime barve ali šestnajstiško kodo. Ta atribut še vedno deluje v številnih brskalnikih, vendar ga v prihodnje zaščitenem HTML-ju ne smete uporabljati in namesto tega uporabite CSS.
Boljša alternativa temu atributu je lastnost sloga.
Če želite spremeniti barvo ozadja tabele, napišite:
style = "background-color: #ccc;">
Ta tabela ima sivo ozadje.
Podobno kot atribut bgcolor tudi atribut bordercolor omogoča spreminjanje barve atributa. Ta atribut podpira samo Internet Explorer. Namesto tega uporabite lastnost sloga obrobe.
Če želite spremeniti barvo obrobe tabele, napišite:
style = "border-color: red;">
Ta tabela ima rdečo obrobo.
Atributa bordercolorlight in bordercolordark sta bila vključena v Internet Explorer, da lahko ustvarite 3D obrobo okoli mize. Od IE8 in novejših različic je to podprto samo v standardnem načinu IE7 in Način Quirks. Microsoft navaja, da te lastnosti niso več podprte.
Za kratek čas je bil predlagan atribut cols v elementu TABLE, ki brskalnikom pomaga, da vedo, koliko stolpcev ima tabela. Predpostavka je bila, da bi to pomagalo pospešiti upodabljanje velikih tabel. Vendar pa ga je implementiral samo Internet Explorer, od IE8 in novejših pa to podpira samo IE7 Standards Mode in Quirks Mode.
Ker obstaja atribut širine (zastarel v HTML5), je marsikdo domneval, da obstaja atribut višine tudi za tabele. Ker pa tabele ustrezajo širini njihove vsebine ali opredeljeni širini v atributu CSS ali width, višine ni bilo mogoče omejiti. Namesto tega so brskalniki dovolili atribut višine, da določi najmanjšo višino tabele. Če bi bila miza višja od te višine, bi bila višja. Vendar bi morali uporabiti lastnino.
Z lastnostjo višine CSS lahko omejite višino, če tudi z lastnostjo CSS določite, kaj se bo zgodilo s presežno vsebino.
Če želite nastaviti najmanjšo višino na mizo, napišite:
style = "height: 30em;">
Ta tabela je visoka vsaj 30 ems.
Atributa in dodani prostor okoli leve / desne strani (hspace) in zgoraj / spodaj (vspace) tabele. Namesto tega uporabite lastnost style.
Če želite navpični prostor nastaviti na 20 slikovnih pik, vodoravni prostor pa na 40 slikovnih pik, zapišite:
style = "margin: 20px 40px;"
Tabela ima presledek 20 slikovnih pik in hspace 40 pik.
Atribut je logični atribut, ki določa, ali naj se vsebina tabele zavije na rob nadrejenega elementa ali okna ali prisili vodoravno drsenje. Namesto tega morate z lastnostjo CSS določiti značilnosti zavijanja vsake celice tabele.
Če želite, da stolpec z veliko besedila ni zavit, napišite:
style = "white-space: nowrap;"> To je stolpec z veliko vsebino. Toda tudi če je širše od vsebnika, se besedilo ne sme zaviti v naslednjo vrstico, temveč mora prisiliti okno brskalnika, da se vodoravno pomakne, da vidi vso vsebino.
Na koncu atribut definira, kako naj se vsebina vsake celice poravna navpično znotraj celice. Namesto tega neveljavnega atributa uporabite lastnost CSS v vsaki celici, ki ji želite spremeniti poravnavo. Učinkov tega sloga ne boste opazili, razen če je vsebina celice manjša od razpoložljivega prostora, ki ga ustvarijo druge večje celice.
Če želite celico prisiliti, da se poravna na dno (namesto na sredino, kot privzeto), napišite:
Ta celica je daljša od ostalih, zato bo višina višja. Tako boste videli, da je navpično poravnana celica poravnana na dno.
style = "vertical-align: bottom;"> Vsebina na dnu.
Vsebina na sredini.