Izkoriščanje tabel HTML HTML z atributi učne tabele
Atributi tabele HTML vam omogočajo veliko več nadzora nad tabelami HTML. Tabelam je na voljo veliko atributov, da jih naredite zanimivejše in spremenite videz vaše strani.
Atributi atributa HTML TABLE
V HTML5 element uporablja globalne atribute in še en atribut:. In spremenila se je samo na vrednost 1 ali prazno (tj. Rob = ""). Če želite spremeniti širino meje, uporabite lastnost CSS lastnosti.
Glejte spodaj, če želite izvedeti več o veljavnih atributih tabele HTML5.
Obstaja tudi več atributov, ki so del specifikacije HTML 4.01, ki je zastarela v HTML5:
- -Uporabite lastnost oblazinjenja CSS na tabličnih TD in TH elementih.
- -Uporabite robni razmik CSS na mizi.
- -Uporabi sloge CSS-ov meje barve: črna; in mejni slog na mizi.
- -Uporabi sloge CSS -ov meje barve: črna; in mejnega sloga na ustreznih elementih tabele.
- -Nadad bi morali opisati strukturo tabele v CAPTION ali pa celotno tabelo v sliki in jo opisati v FIGCAPTION. Lahko pa tudi poenostavite strukturo tabele, tako da nobena razlaga ni potrebna.
- -Uporabite CSS lastnosti širine.
In en atribut, ki je bil opuščen v HTML 4.01 in je tudi zastarelo v HTML5.
Preberite več o atributih HTML 4.01 TABLE.
- poravnava - Namesto tega uporabite CSS lastnost marže.
Obstaja tudi več atributov, ki niso del katere koli specifikacije HTML.
Uporabite te atribute, če veste, da lahko brskalniki, ki jih podpirate, ravnajo z njimi in vam ni vseeno veljaven HTML.
- -Uporabite CSS lastnost barve ozadja.
- bordercolor-Uporabite CSS lastnost barvne barve namesto tega.
- bordercolorlight-Namesto tega uporabite CSS lastnost barvne barve.
- bordercolordark-Uporabite CSS lastnost barvne barve namesto tega.
- cols -Ta atribut ni alternativa.
- višina - Namesto tega uporabite višino premoženja CSS.
- Namesto tega uporabite CSS lastnost premoženja.
- Namesto tega uporabite CSS lastnost premoženja.
- Namesto tega uporabite CSS lastnost belega prostora.
- -Uporabite CSS lastnost navpično poravnavo.
Preberite več o lastnostih brskalnika TABLE.
Atributi atributa HTML5 TABLE
Kot smo omenili zgoraj, obstaja samo en atribut, ki presega globalne atribute, ki velja na elementu HTML TABLE: border.
Mejni atribut se uporablja za določitev meje okrog celotne tabele in vseh celic v njej. Vprašanje je bilo, ali bo vključeno v specifikacijo HTML5, vendar je ostalo zato, ker je posredovalo informacije o strukturi tabele, ne samo zaradi slogovnih posledic.
Če želite dodati atribut meje, nastavite vrednost na 1, če je meja in prazna (ali pa pustite atribut), če je ni. Večina brskalnikov podpira tudi 0 brez meje in katero koli drugo celoštevilsko vrednost (2, 3, 30, 500 itd.), Da razglasi širino meje v slikovnih pikah, vendar je to v HTML5 zastarelo. Namesto tega uporabite lastnosti sloga CSS, da določite širino in druge sloge.
Če želite ustvariti tabelo z mejo, napišite:
border = "1" >
To je tabela z robom
Obstajajo atributi HTML 4.01, ki so zastareli v HTML5. Če nameravate napisati dokumente HTML 4.01, jih lahko naučite, sicer jih lahko prezrete. Večina teh atribut ima možnosti, opisane zgoraj.
Opisujemo atribute elementa, ki veljajo v HTML5 (in HTML 4.01). To 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 med njimi druge možnosti, s katerimi bodo vaše strani bolj varne v prihodnosti, ko se premaknete v HTML5.
Veljavni HTML 4.01 Atributi
Atribut, ki smo ga opisali zgoraj.
Edina razlika v HTML 4.01 iz HTML5 je, da lahko določite celo celo število (0, 1, 2, 15, 20, 200 itd.), Da določite širino meje v slikovnih pikah.
Če želite zgraditi tabelo z mejo 5px, napišite:
border = "5" >
Ta tabela ima mejo 5px.
Oglejte si primer dveh tabel z mejami.
Atribut določa količino presledka med celičnimi robovi in vsebino celice. Privzeto je dve sliki. Postavite celično okno na 0, če ne želite prostora med vsebino in robovi.
Če želite nastaviti spreminjanje celic na 20, napišite:
cellpadding = "20" >
V tej tabeli je celica v velikosti 20.
Robske celice bodo ločene za 20 pik.
Oglejte si primer tabele s celično prevleko
Atribut določa količino prostora med celicami tabele in celično vsebino. Podobno kot cellpadding je privzeto nastavljena na dve sliki, zato jo morate nastaviti na 0, če želite, da ni razmika med celicami.
Če želite v tabelo dodati razmik med celicami, napišite:
cellspacing = "20" >
Ta tabela ima celično razpon od 20.
Celice bodo ločene za 20 pik.
Oglejte si tabelo s prenosom celic
Atribut določa, kateri deli meje, ki obdajajo zunanjo tabelo, bodo vidni. Svojo mizo lahko postavite na vseh štirih straneh, na kateri koli strani, na vrhu in na dnu, na levo in desno ali na nobeno stran.
Tukaj je HTML za tabelo z le levo obrobo:
frame = "lhs" >
Ta tabela
bo imela
samo
levo stran okvirja.
In še en primer s spodnjim okvirjem:
okvir = "spodaj" >
Ta tabela ima okvir na dnu.
Oglejte si nekaj miz z okvirji
Atribut je podoben atributu okvirja, le to vpliva na meje okoli celic tabele. Lahko določite pravila za vse celice, med stolpci, med skupinami, kot sta TBODY in TFOOT ali nobena.
Če želite zgraditi tabelo s črtami le med vrsticami, napišite:
rules = "vrstice" >
Ta 4x4 tabela ima
vrstice niso stolpci
opisano z
atribut pravil.
In drugi s črtami med stolpci:
rules = "cols" >
To je
tabelo
kjer je
stolpci
so
poudarjeno
Tukaj je primer tabele s pravili
Atribut vsebuje informacije o tabeli za bralnike zaslona in druge uporabniške agente, ki imajo težave pri branju tabel. Če želite uporabiti atribut povzetka, pišete kratek opis tabele in jo navedite kot vrednost atributa. Povzetek se ne bo prikazal na spletni strani v večini standardnih spletnih brskalnikov.
Tukaj je, kako napisati preprosto tabelo s povzetkom:
povzetek = "To je vzorčna tabela, ki vsebuje informacije o polnilniku. Namen te tabele je prikazati povzetek." >
stolpec 1 vrstica 1
stolpec 2 vrstica 1
stolpec 1 vrstica 2
stolpec 2 vrstica 2
Oglejte si tabelo s povzetkom
Atribut določa širino tabele v pikih ali kot odstotek elementa vsebnika. Če širina ni nastavljena, bo miza porabila le toliko prostora, kot je potrebno za prikaz vsebine, z največjo širino pa je enaka širini nadrejenega elementa.
Če želite zgraditi tabelo s posebno širino v slikovnih pik, napišite:
širina = "300" >
Ta tabela je 80% širine vsebnika, v katerem je.
In za gradnjo tabele s širino, ki je odstotek nadrejenega elementa, napišite:
širina = "80%" >
Ta tabela je 80% širine vsebnika, v katerem je.
Oglejte si primer tabele s širino
Zastarela HTML 4.01 TABELA atributa
Obstaja en atribut elementa TABLE, ki je v HTMLu 4,01 opuščen in je zastarelo v HTML5: align . Ta atribut vam omogoča, da nastavite, kje naj bo tabela na strani glede na besedilo, ki je poleg nje. Ta atribut je bil v HTML 4.01 opuščen, zato ga ne uporabljajte. Namesto tega uporabite lastnost CSS ali rob levega: auto; in margin-right: auto; sloge. Lastnost float vam daje rezultat, ki je bližje tistim, kar je določil atribut poravnave, vendar lahko vpliva na prikaz vsebine strani. Desno-desno: auto; in margin-left: auto; kar W3C priporoča kot alternativo.
Tukaj je zastareli primer z uporabo atributa align:
align = "desno" >
Ta tabela je pravilno poravnana
Besedilo teče okoli njega levo
Oglejte si zastarelo primer z uporabo atributa poravnave.
In, da bi dobili enak učinek z veljavnim (neupravičenim) HTML-jem, napišite:
style = "float: desno;" >
Ta tabela je pravilno poravnana
Besedilo teče okoli njega levo
V nadaljevanju so razložene atribute TABLE, ki niso del katere koli specifikacije HTML.
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 kateri koli trenutni specifikaciji. Če vam ni vseeno, ali so vaše strani potrjene in vaši uporabniki uporabljajo brskalnik, ki podpira te elemente, lahko uporabite te elemente. Večina jih v sodobnih brskalnikih ni podprta ali imajo druge možnosti, ki so bolj skladne s standardi.
Ne priporočamo, da te atribute uporabite v svojih HTML tabelah.
Atribut je stari atribut, ki je bil vključen, preden je bila CSS široko podprta. Omogoča vam spreminjanje barve ozadja tabele. Nastavite lahko barvno ime ali šestnajstiško kodo. Ta atribut še vedno deluje v veliko brskalnikih, vendar za prihodnostno zaščitene HTML ga ne smete uporabljati in namesto tega uporabite CSS.
Boljša alternativa temu atributu je lastnost sloga.
Če želite spremeniti barvo ozadja tabele, vnesite:
style = "barva ozadja: #ccc;" >
Ta tabela ima sivo ozadje
Podobno kot atribut bgcolor lahko atribut bordercolor spremeni barvo atributa. Ta atribut podpira samo Internet Explorer. Namesto tega uporabite lastnost sloga barvne barve.
Če želite spremeniti barvo mize na mizi, napišite:
style = "border-color: red;" >
Ta tabela ima rdečo obrobo.
Atributi bordercollight in bordercolordark so bili vključeni v Internet Explorer, tako da lahko ustvarite 3D rob okoli svoje mize. Vendar, od IE8 in navzgor, je to podprto samo v IE7 standardnih načinih in v načinu Quirks Mode . Microsoft navaja, da te lastnosti niso več podprti.
Za kratek čas je bil predlagan atribut barv na elementu TABLE, ki je pomagal brskalnikom vedeti, koliko stolpcev je imela miza. Predpostavka je bila, da bi to pripomoglo k hitrejši obdelavi velikih miz. Vendar pa ga je izvajal samo Internet Explorer, in sicer od IE8 in navzgor, je to podprto le v IE7 standardnih načinih in v načinu Quirks Mode.
Ker obstaja atribut širine (zastarelo v HTML5), je veliko ljudi domislilo, da je bil tudi višinski atribut za tabele. Toda ker tabele ustrezajo širini njihove vsebine ali določene širine v atributu CSS ali širini, višine ni bilo mogoče omejiti. Namesto tega so brskalniki omogočili atribut višine, da določijo najmanjšo višino tabele. Če bi bila tabela višja od te višine, bi se prikazala višja. Ampak morate uporabiti premoženje
Z višino lastnosti CSS lahko omejite višino, če uporabite tudi lastnost CSS, da določite, kaj se zgodi z morebitno preseženo vsebino.
Če želite v tabeli nastaviti najnižjo višino, napišite:
style = "višina: 30em;" >
Ta tabela je visoka najmanj 30 emsov.
Dve atributi in dodani prostor okrog leve / desne strani (hspace) in zgoraj / spodaj (vspace) tabele. Namesto tega morate uporabiti slogovno lastnost.
Če želite navpični prostor nastaviti na 20 slikovnih pik in vodoravni prostor na 40 slikovnih pik, vpišite:
style = "margin: 20px 40px;"
Ta tabela ima vspace 20 pikslov in hspace 40 pik.
Atribut je logični atribut, ki določa, ali naj se vsebina tabele preklopi na rob nadrejenega elementa ali okna ali sili po vodoravnem pomiku. Namesto tega bi morali določiti značilnosti ovojnice vsake celice tabele s pomočjo lastnosti CSS.
Če želite, da se stolpec z veliko besedilom ne zavije, napišite:
style = "white-space: nowrap;" > To je stolpec z tono vsebine. Toda tudi če je širša od vsebnika, se besedilo ne sme preklopiti v naslednjo vrstico, temveč namesto tega okno brskalnika premakniti vodoravno in prikazati vso vsebino.
Nazadnje atribut določa, kako naj se vsebina vsake celice poravna navpično znotraj celice. Namesto tega neveljavnega atributa uporabite lastnost CSS v vsaki celici, ki jo želite spremeniti. Ne boste opazili učinkov tega sloga, če vsebina celice ni manjša od razpoložljivega prostora, ki ga ustvarijo druge, večje celice.
Če želite, da se celica poravna na dno (namesto na sredino kot privzeto), napišite:
Ta celica je daljša od ostalih, zato bo višja višja. Torej boste videli, da je vertikalno poravnana celica poravnana na dnu.
style = "vertical-align: bottom;" > Vsebina spodaj.
Vsebina v sredini.