Hyödynnä mahdollisimman paljon HTML-taulukoita oppimisen taulun ominaisuuksilla
HTML-taulukkoominaisuudet antavat paljon enemmän hallintaa HTML-taulukoihin. Taulukoiden käytettävissä on paljon ominaisuuksia, jotta ne ovat mielenkiintoisempia ja muuttavat sivusi ulkoasua.
HTML-taulukkoelementtiominaisuudet
HTML5: ssä elementti käyttää yleisiä määritteitä ja yhtä muuta määritettä:. Ja se on muuttunut vain arvoon 1 tai tyhjään (ts. Raja = ""). Jos haluat muuttaa reunan leveyttä, käytä raja-leveyden CSS-ominaisuutta.
Katso alla olevista HTML5-taulukon määritteistä.
HTML5: stä on vanhentunut HTML 4.01 -sisältöä sisältäviä ominaisuuksia.
- -Käytä CSS-pehmuste-ominaisuutta pöydän TD- ja TH-elementeillä.
- -Käytä taulukon CSS-ominaisuusrajan välimatkaa.
- -Käytä CSS-tyylit border-color: black; ja rajatyyliä pöydälle.
- -Käytä CSS- tyylit border-color: black; ja rajatyyliä taulukon asianmukaisiin osiin.
- -Tiiväthän, kannattaa kuvata taulukon rakenne CAPTION: ssa tai laittaa koko taulukko kuvioon ja kuvata se kuvassa. Vaihtoehtoisesti voit yksinkertaistaa taulukon rakennetta niin, että mitään selitystä ei tarvita.
- -Käytä CSS-leveysominaisuutta.
Ja yksi attribuutti, joka oli vanhentunut HTML 4.01: ssa, ja se on myös vanhentunut HTML5: ssä.
Lisätietoja HTML 4.01 TABLE -ominaisuuksista.
- align - Käytä CSS-margin-ominaisuutta sen sijaan.
On myös useita ominaisuuksia, jotka eivät ole osa mitään HTML-määritystä.
Käytä näitä attribuutteja, jos tiedät, että tukemat selaimet voivat käsitellä niitä ja et välitä kelvollisesta HTML-koodista.
- -Käytä CSS-ominaisuuden taustaväriä sijaan.
- bordercolor -Käytä CSS-ominaisuuden raja-väriä sijaan.
- bordercolorlight-Käytä sen sijaan CSS-ominaisuuden reunaviivaa.
- bordercolordark -Käytä CSS-ominaisuuden raja-väri sijaan.
- cols -Tämä ominaisuus ei ole käytettävissä.
- korkeus - Käytä CSS-ominaisuuden korkeutta sijaan.
- -Käytä CSS-ominaisuusmarginaalia sen sijaan.
- -Käytä CSS-ominaisuusmarginaalia sen sijaan.
- -Käytä sen sijaan CSS-ominaisuutta.
- -Käytä CSS-ominaisuutta pystysuorassa kohdistettuna.
Lisätietoja selaintaulukon ominaisuuksista.
HTML5-taulukon elementtimääritykset
Kuten yllä mainittiin, on vain yksi attribuutti, joka on globaalien ominaisuuksien lisäksi HTML5 TABLE -elementti: raja.
Rajamerkki määritetään rajan määrittämiseksi koko taulukon ja kaikkien sen sisältämien solujen ympärille. Oli kysymys siitä, sisällytetäänkö se HTML5-määritykseen, mutta se säilyi, koska se sisälsi tietoa taulukkorakenteesta, pelkästään tyyliin kohdistuvien vaikutusten lisäksi.
Jos haluat lisätä rajamääritteen, asetat arvoon 1, jos raja on ja tyhjä (tai jätä attribuutti), jos sitä ei ole. Useimmat selaimet tukevat myös 0: tä ilman rajoja ja minkä tahansa muun kokonaislukuarvon (2, 3, 30, 500 jne.), Jotta rajan leveys voidaan ilmaista pikseleinä, mutta tämä on vanhentunut HTML5: ssä. Sen sijaan sinun pitäisi käyttää CSS-rajatyypin ominaisuuksia raja-arvon ja muiden tyylejen määrittämiseen.
Jos haluat luoda taulukon, jossa on raja, kirjoita:
border = "1" >
Tämä on taulukko, jossa on raja
HTML5: ssa on vanhentuneita HTML 4.01 -attribuutteja. Jos aiot kirjoittaa HTML 4.01 -asiakirjoja, voit oppia niitä, muuten voit jättää ne huomiotta. Suurin osa näistä ominaisuuksista on edellä kuvattuja vaihtoehtoja.
Kuvaamme HTML5: ssa (ja HTML 4.01: ssä) voimassa olevia elementtejä. Tämä kuvaa TABLE-määritteet, jotka ovat voimassa HTML 4.01: ssä, mutta ovat vanhentuneita HTML5: ssa. Jos kirjoitat HTML 4.01 -asiakirjoja edelleen, voit käyttää näitä ominaisuuksia, mutta useimmilla niillä on vaihtoehtoja, jotka tekevät sivuillesi entistä paremman tulevaisuuden, kun siirryt HTML5: een.
Valid HTML 4.01 -ominaisuudet
Edellä kuvattu attribuutti.
Ainoa ero HTML 4.01: ssä HTML5: ssä on, että voit määrittää kokonaisen kokonaislukuvuoden (0, 1, 2, 15, 20, 200 jne.) Rajan leveyden määrittämiseksi pikseleinä.
Jos haluat rakentaa taulukon, jossa on 5px-raja, kirjoita:
border = "5" >
Tässä taulukossa on 5px raja.
Katso esimerkki kahdesta reunustavasta taulukosta.
Määritelmä määrittää tilaa solujen rajojen ja solun sisällön välillä. Oletuksena on kaksi pikseliä. Aseta solunpalaus arvoon 0, jos et halua sisällön ja reunusten välistä tilaa.
Voit asettaa solupohjapakkauksen 20: ksi seuraavasti:
cellpadding = "20" >
Tässä taulukossa on 20 soluyksikkö.
Solujohdot erotetaan 20 pikselillä.
Näytä esimerkki taulukosta, jossa on solupaneeli
Määritelmä määrittää tilan määrän taulukon solujen ja solusisällön välillä. Kuten cellpadding, oletusasetuksena on kaksi pikseliä, joten sinun on asetettava arvoon 0, jos et halua solujen välistä etäisyyttä.
Jos haluat lisätä solujen välisen etäisyyden taulukkoon, kirjoita:
cellspacing = "20" >
Tässä taulukossa on 20 soluväli.
Solut erotetaan 20 pikselillä.
Katso taulukko solujen välityksellä
Määritelmä määrittää, mitkä reunuksen ulkopuolella sijaitsevat reunat näkyvät. Voit piirtää taulukon kaikilla neljällä sivulla, yhdellä puolella, ylhäällä ja alhaalla, vasemmalla ja oikealla tai ei lainkaan.
Tässä on HTML-taulukko, jossa on vain vasemman reunan reunus:
frame = "lhs" >
Tämä taulukko
on
vain
vasen puoli kehystetty.
Ja toinen esimerkki alalaidun kanssa:
frame = "alla" >
Taulussa on kehys alhaalta.
Tarkista joitakin pöytiä kehyksillä
Määritelmä on samanlainen kuin kehysattribuutti, mutta se vaikuttaa taulukon solujen ympärille. Voit asettaa säännöt kaikille soluille, sarakkeiden välille, ryhmien, kuten TBODY ja TFOOT tai ei lainkaan.
Jos haluat rakentaa taulukon rivien välille, kirjoita:
rules = "rivit" >
Tämä 4x4-taulukko on
rivejä ei sarakkeita
kuvattu
sääntömääritte.
Ja toinen sarakkeiden välissä:
rules = "cols" >
Tämä on
taulukko
missä
sarakkeet
ovat
korostetun
Tässä on esimerkki taulukosta, jossa on sääntöjä
Määritelmä antaa tietoja taulukon lukulaitteista ja muista käyttäjäagentteista, joilla voi olla vaikeuksia lukea taulukoita. Yhteenvetomääritteen käyttämiseksi kirjoitat lyhyen kuvauksen taulukosta ja laita se attribuutin arvona. Yhteenveto ei näy verkkosivuilla useimmissa tavallisissa selaimissa.
Tässä on yksinkertaisen taulukon kirjoittaminen yhteenvedon kanssa:
summary = "Tämä on esimerkkitapaus, joka sisältää täyteaineistotietoja. Tämän taulukon tarkoituksena on esittää yhteenveto." >
sarake 1 rivi 1
sarake 2 rivi 1
sarake 1 rivi 2
sarake 2 rivi 2
Näytä taulukko, jossa on yhteenveto
Määritelmä määrittää taulukon leveyden joko pikseleinä tai prosentteina säiliöelementistä. Jos leveyttä ei ole asetettu, taulukko vie vain niin paljon tilaa kuin se tarvitsee näyttää sisällön, jonka enimmäisleveys on sama kuin pääelementin leveys.
Jos haluat rakentaa taulukon, jossa on leveys pikseleinä, kirjoita:
width = "300" >
Tämä taulukko on 80% kontin leveydestä.
Ja rakentaa taulukko, jonka leveys on prosenttiosuus emo-elementistä, kirjoita:
width = "80%" >
Tämä taulukko on 80% kontin leveydestä.
Katso esimerkki taulukosta, jossa on leveys
Epäonnistunut HTML 4.01 TAULUKKO Ominaisuus
TABLE-elementti on yksi attribuutti, joka on vanhentunut HTML 4.01: ssa ja vanhentunut HTML5: ssä. Tällä määritteellä voit määrittää, missä taulukko on sijoitettava sivulle sen vieressä olevan tekstin suhteen. Tämä ominaisuus on hylätty HTML 4.01: ssä, ja sinun tulisi välttää sen käyttämistä. Käytä sen sijaan CSS-ominaisuutta tai marginaali-left: auto; ja marginaali-oikea: auto; tyylejä. Float-ominaisuus antaa tuloksen, joka on lähempänä sitä, mitä kohdistusominaisuus tarjoaa, mutta se voi vaikuttaa siihen, miten loppusivun sisältö näkyy. Marginaali-oikea: auto; ja margin-left: auto; ovat mitä W3C suosittelee vaihtoehtona.
Tässä on vanhentunut esimerkki, joka käyttää kohdistusominaisuutta:
align = "right" >
Tämä taulukko on oikein kohdistettu
Teksti virtaa sen vasemmalle puolelle
Katso vanhentuneesta esimerkistä kohdistusominaisuuden avulla.
Ja saada sama vaikutus voimassa olevalla (ei-deprecated) HTML: llä, kirjoita:
style = "float: right;" >
Tämä taulukko on oikein kohdistettu
Teksti virtaa sen vasemmalle puolelle
Seuraavassa selitetään TABLE-attribuutteja, jotka eivät ole osa mitään HTML-määritystä.
Edelliset tiedot kuvaavat HTML-elementin HTML 4.01 -tietokohdetta, mutta ovat HTML5: ssa vanhentuneita.
Seuraavassa kuvataan TABLE-attribuutteja, jotka eivät ole voimassa missään nykyisessä määrityksessä. Jos et välitä sivujesi vahvistamisesta ja käyttäjät käyttävät näitä elementtejä tukevaa selainta, voit käyttää näitä elementtejä. Mutta useimmat niistä eivät ole tukikelpoisia nykyaikaisissa selaimissa tai niillä on vaihtoehtoja, jotka ovat standardien mukaisempia.
Emme suosittele näitä ominaisuuksia HTML-taulukoissasi.
Attribuutti on vanha attribuutti, joka oli mukana ennen kuin CSS: ää tuettiin laajasti. Sen avulla voit muuttaa taulukon taustaväriä. Voit määrittää värin nimen tai heksadesimaalisen koodin. Tämä ominaisuus toimii yhä useissa selaimissa, mutta tulevassa HTML-muodossa, sinun ei pitäisi käyttää sitä ja käyttää sen sijaan CSS: ää.
Parempi vaihtoehto tähän attribuuttiin on tyyliominaisuus.
Jos haluat muuttaa taulukon taustaväriä, kirjoita:
style = "background-color: #ccc;" >
Taulussa on harmaa tausta
Bgcolor-attribuutin tavoin bordercolor attribuutin avulla voit muuttaa attribuutin väriä. Internet Explorer tukee tätä ominaisuutta. Käytä sen sijaan raja-värityyppistä ominaisuutta.
Voit muuttaa taulukon reunan väriä kirjoittamalla:
style = "border-väri: punainen;" >
Taulussa on punainen reunus.
Rajamerkki- ja bordercolordark-attribuutit sisällytettiin Internet Exploreriin, jotta voit luoda 3D-rajan taulukon ympärille. Kuitenkin IE8: sta ja uudemmasta alkaen tämä on tuettu vain IE7-standarditilassa ja Quirks-tilassa . Microsoft ilmoittaa, että näitä ominaisuuksia ei enää tueta.
Lyhyessä ajassa taulukko-elementin COLS-attribuutin tarkoituksena oli auttaa selaimia tietää, kuinka monta saraketta taulukolla oli. Lähtökohtana oli, että tämä auttaisi nopeuttamaan suurien pöytien esittämistä. Internet Explorer on kuitenkin toteuttanut sen vain, ja IE8: sta ja uudemmaksi tämä on tuettu vain IE7-standarditilassa ja Quirks-tilassa.
Koska leveysmääritelmä (vanhentunut HTML5: ssä), monet olettaa, että taulukkoissa oli myös korkeusominaisuus. Mutta koska taulukot noudattavat sisällön leveyttä tai määriteltyä leveyttä CSS- tai width-attribuutissa, korkeutta ei voitu rajoittaa. Sen sijaan selaimet sallivat korkeusominaisuuden määritellä taulukon minimikorkeuden. Jos taulukko oli korkeampi kuin kyseinen korkeus, se näyttäisi pitemmältä. Mutta sinun pitäisi käyttää omaisuutta
CSS-korkeusominaisuuden avulla voit rajoittaa korkeutta, jos käytät myös CSS-ominaisuutta ja määritä mikä tapahtuu ylimääräisen sisällön kanssa.
Voit määrittää taulukon minimikorkeuden kirjoittamalla:
style = "height: 30em;" >
Tämä taulukko on vähintään 30 ems korkea.
Nämä kaksi ominaisuutta ja lisätyt tilat taulukon vasemman / oikean puolen (hspace) ja ylä- / alaosan (vspace) ympärillä. Käytä tyylisuunnittelua sen sijaan.
Jos haluat asettaa pystytilan 20 pikseliin ja vaakasuuntaisen tilan 40 pikseliin, kirjoita:
style = "marginaali: 20px 40px;"
Taulussa on 20 pikselin välinen etäisyys ja 40 sivun hspace.
Määritelmä on booleinen attribuutti, joka määrittää, pitävätkö taulukon sisällön päätyelementin tai ikkunan reunassa vai vaimentavatko vaakasuoraa vieritystä. Sen sijaan sinun pitäisi määrittää kunkin taulukon solun käärintäominaisuudet käyttämällä CSS-ominaisuutta.
Jos haluat tehdä sarakkeen, jossa paljon tekstiä ei ole, kirjoita:
style = "white-space: nowrap;" > Tämä on sarake, jossa on paljon sisältöä. Mutta vaikka se olisi säiliöä laajempi, tekstin ei pitäisi kääriä seuraavalle riville vaan pakottaa selainikkunan vierittämään vaakasuoraan nähdäksesi kaiken sisällön.
Lopuksi määritteessä määritellään, kuinka kunkin solun sisältö on kohdistettava pystysuoraan soluun. Tämän virheellisen attribuutin sijasta sinun on käytettävä jokaisen solun CSS-ominaisuutta, jonka haluat muuttaa. Et saa huomata tämän tyylin vaikutuksia, ellei solun sisältö ole pienempi kuin muiden, suurempien solujen luoma käytettävissä oleva tila.
Jos haluat pakottaa solun kohdistamaan pohjaan (pikemminkin kuin keskellä, oletuksena), kirjoita:
Tämä solu on pidempi kuin muu, joten se pakottaa korkeuden olevan korkeampi. Joten näet, että pystysuorassa oleva solu on kohdistettu pohjaan.
style = "vertikaalinen align: bottom;" > Sisällysluettelo alhaalta.
Sisältö keskellä.