TABLE-elementtimääritteiden (HTML) käyttö

click fraud protection

HTML-taulukon määritteet antavat sinulle paljon paremman hallinnan HTML-taulukoihin. Taulukoissa on paljon ominaisuuksia, jotka tekevät niistä mielenkiintoisempia ja muuttavat sivusi ulkoasua.

HTML TABLE -elementin määritteet

Sisään HTML5 elementti käyttää yleisiä määritteitä ja yhtä muuta attribuuttia, ja se on muuttunut siten, että sen arvo on vain 1 tai tyhjä (eli raja = ""). Jos haluat muuttaa reunan leveyttä, käytä reunuksen leveyttä CSS-ominaisuus.

Alla on lisätietoja kelvollisista HTML5-taulukon määritteistä.

On myös useita määritteitä, jotka ovat osa HTML 4.01 -määrittelyä, joka on vanhentunut HTML5: ssä:

  • —Käytä CSS-täyteominaisuutta pöydän TD- ja TH-elementeissä.
  • —Käytä CSS-ominaisuuden reunaväliä taulukossa.
  • —Käytä CSS-tyylejä reunaväri: musta; ja reunatyyli pöydällä.
  • —Käytä CSS-tyylejä reunaväri: musta; ja reunatyyli taulukon sopiviin osiin.
  • —Sen sijaan sinun tulisi kuvata taulukon rakenne CAPTION-muodossa tai laittaa koko taulukko KUVAKSI ja kuvata se FIGCAPTION-muotoon. Vaihtoehtoisesti voit yksinkertaistaa taulukon rakennetta siten, ettei selityksiä tarvita.
  • instagram viewer
  • —Käytä CSS width -ominaisuutta.

Ja yksi attribuutti, joka oli vanhentunut HTML 4.01: ssä ja joka on myös vanhentunut HTML5: ssä.

  • tasaa - käytä sen sijaan CSS-marginaali-ominaisuutta.

On myös useita määritteitä, jotka eivät kuulu mihinkään HTML-määritykseen. Käytä näitä määritteitä, jos tiedät, että tukemasi selaimet pystyvät käsittelemään niitä ja et välitä kelvollisesta HTML: stä.

  • —Käytä sen sijaan CSS-ominaisuuden taustaväriä.
  • bordercolor - Käytä sen sijaan CSS-ominaisuuden reunaväriä.
  • bordercolorlight - Käytä sen sijaan CSS-ominaisuuden reunaväriä.
  • bordercolordark - Käytä sen sijaan CSS-ominaisuuden reunaväriä.
  • cols - tälle määritteelle ei ole vaihtoehtoa.
  • height - Käytä sen sijaan CSS-ominaisuuden korkeutta.
  • —Käytä sen sijaan CSS-ominaisuusmarginaalia.
  • —Käytä sen sijaan CSS-ominaisuuden tyhjää tilaa.
  • —Käytä sen sijaan CSS-ominaisuutta pystysuuntaisesti.

HTML5 TABLE -elementin määritteet

Kuten edellä mainitsimme, HTML5 TABLE -elementissä on voimassa vain yksi attribuutti globaalien attribuuttien lisäksi: border.

Raja-määritteellä määritetään reuna koko taulukon ja sen kaikkien solujen ympärille. Oli jonkin verran kysymystä siitä, sisältyykö se HTML5-määritykseen, mutta se jäi, koska se antoi tietoja taulukon rakenteesta pelkkien tyylivaikutusten lisäksi.

Reunamääritteen lisäämiseksi asetat arvoksi 1, jos reunus on, ja tyhjä (tai jätät määritteen pois), jos sitä ei ole. Suurin osa selaimista tukee myös 0: ta ilman reunusta ja muita kokonaislukuja (2, 3, 30, 500 jne.) Ilmoittaakseen reunuksen leveyden pikseleinä, mutta HTML5: ssä se on vanhentunut. Sen sijaan sinun on käytettävä CSS-reunatyypin ominaisuuksia määritettäessä reunan leveys ja muut tyylit.

Jos haluat luoda taulukon, jossa on reunus, kirjoita:

reunus = "1">
Tämä on reunuksella varustettu taulukko
Tämä kuvaa TABLE-määritteet, jotka ovat kelvollisia HTML 4.01: ssä, mutta ovat vanhentuneita HTML5. Jos kirjoitat edelleen HTML 4.01 -asiakirjoja, voit käyttää näitä määritteitä, mutta useimmilla niistä on vaihtoehtoja, jotka tekevät sivuistasi tulevaisuudenkestävämmät, kun siirryt HTML5: een.

Voimassa olevat HTML 4.01 -ominaisuudet

Edellä kuvattu ominaisuus. Ainoa ero HTML 4.01: ssä HTML5: stä on, että voit määrittää minkä tahansa kokonaisluvun (0, 1, 2, 15, 20, 200 jne.) Määrittääksesi reunan leveyden pikseleinä.

Voit rakentaa taulukon, jossa on 5 kuvapisteen reunus, kirjoittamalla:

reunus = "5">

Tässä taulukossa on 5 kuvapisteen raja.

Attribuutti määrittelee solun reunojen ja solun sisällön välisen tilan määrän. Oletusarvo on kaksi pikseliä. Aseta solupohjan arvoksi 0, jos et halua välilyöntiä sisällön ja reunusten väliin.

Aseta solun täytteeksi 20 kirjoittamalla:

cellpadding = "20">

Tässä taulukossa on 20 solualustaa.

Solurajat erotetaan 20 pikselillä.

Katso esimerkki taulukosta, jossa on solupehmuste.

Attribuutti määrittää taulukon solujen ja solun sisällön välisen tilan määrän. Kuten solupehmuste, oletusasetukseksi on asetettu kaksi pikseliä, joten sinun on asetettava se arvoon 0, jos et halua soluväliä.

Lisää soluvälit taulukkoon kirjoittamalla:

solutila = "20">

Tämän taulukon solualue on 20.

Solut erotetaan 20 pikselillä.

Attribuutti identifioi, mitkä taulukon ulkopintaa ympäröivät reunan osat näkyvät. Voit kehystää pöydän kaikilla neljällä puolella, toisella puolella, ylhäällä ja alhaalla, vasemmalla ja oikealla tai ei missään.

Tässä on taulukon HTML-koodi, jossa on vain vasen reunus:

frame = "lhs">
Tämä taulukko
tulee olemaan
vain
vasen puoli kehystetty.
Ja toinen esimerkki alarungosta:

frame = "alapuolella">
Tämän pöydän pohjassa on kehys.
Katso joitain taulukoita, joissa on kehyksiä.

Määrite on samanlainen kuin kehysattribuutti, vain se vaikuttaa taulukon solujen ympärillä oleviin rajoihin. Voit asettaa sääntöjä kaikille soluille sarakkeiden välillä, ryhmien välillä kuten TBODY ja TFOOT tai ei yhtään.

Jos haluat rakentaa taulukon, jossa on vain viivat rivien välissä, kirjoita:

rules = "rivit">
Tällä 4x4-pöydällä on
rivit eivät sarakkeita
hahmoteltu
rules attribuutti.
Ja toinen rivillä sarakkeiden välillä:

rules = "cols">
Tämä on
pöytä
missä
sarakkeita
ovat
korostettu
attribuutti antaa tietoja Tietoja näytönlukuohjelmien ja muiden käyttäjäagenttien taulukosta, joilla saattaa olla vaikeuksia taulukoiden lukemisessa. Jos haluat käyttää yhteenvetomääritettä, kirjoita lyhyt kuvaus taulukosta ja laita se attribuutin arvoksi. Yhteenveto ei näy verkkosivulla useimmissa tavallisissa selaimissa.

Näin kirjoitetaan yksinkertainen taulukko yhteenvedolla:

summary = "Tämä on esimerkkitaulukko, joka sisältää täyteaineita. Tämän taulukon tarkoituksena on osoittaa yhteenveto. ">

sarake 1 rivi 1.

sarake 2 rivi 1.

sarake 1 rivi 2.

sarake 2 rivi 2.

Attribuutti määrittää taulukon leveyden joko pikseleinä tai prosentteina konttielementistä. Jos leveyttä ei ole asetettu, taulukko vie vain niin paljon tilaa kuin se tarvitsee sisällön näyttämiseen, ja enimmäisleveys on sama kuin pääelementin leveys.

Voit rakentaa taulukon, jonka leveys on pikseleinä, kirjoittamalla:

width = "300">

Tämä taulukko on 80% sen kontin leveydestä, jossa se on.

Jos haluat rakentaa taulukon, jonka leveys on prosenttiosuus pääelementistä, kirjoita:

leveys = "80%">

Tämä taulukko on 80% sen kontin leveydestä, jossa se on.

Vanhentunut HTML 4.01 -taulukon attribuutti

TABLE-elementillä on yksi attribuutti, joka on vanhentunut HTML 4.01: ssä ja vanhentunut HTML5: ssä: tasaa. Tämän määritteen avulla voit määrittää, missä taulukon tulisi sijaita sivulla, suhteessa sen vieressä olevaan tekstiin. Tämä attribuutti on poistettu käytöstä HTML 4.01: ssä, ja sinun tulee välttää sen käyttöä. Sen sijaan sinun tulisi käyttää CSS-ominaisuutta tai marginaali-vasen: auto; ja marginaali-oikea: auto; tyylejä. Float-ominaisuus antaa tuloksen, joka on lähempänä tasausmääritteen antamaa tulosta, mutta se voi vaikuttaa sivun muun sisällön näyttötapaan. Oikea marginaali: auto; ja marginaali vasemmalle: auto; ovat mitä W3C suosittelee vaihtoehtona.

Tässä on vanhentunut esimerkki käyttämällä tasausmääritettä:

tasaa = "oikea">

Tämä taulukko on kohdistettu oikealle.

Teksti virtaa sen ympäri vasemmalle.

Ja saadaksesi saman vaikutuksen kelvollisella (vanhentumattomalla) HTML-koodilla, kirjoita:

style = "float: right;">

Tämä taulukko on kohdistettu oikealle.

Teksti virtaa sen ympäri vasemmalle.

Vanhentuneet taulukon määritteet

Aiemmat tiedot kuvaavat HTML-elementin määritteitä, jotka ovat kelvollisia HTML 4.01: ssä, mutta vanhentuneita HTML5: ssä.

Seuraavassa kuvataan TABLE-määritteet, jotka eivät kelpaa missään nykyisessä määrityksessä. Jos et välitä siitä, vahvistavatko sivusi ja käyttävätkö selainta, joka tukee näitä elementtejä, voit käyttää näitä elementtejä. Mutta useimpia niistä joko ei tueta nykyaikaisissa selaimissa, tai niillä on vaihtoehtoja, jotka ovat standardien mukaisia.

Emme suosittele näiden määritteiden käyttöä HTML-taulukoissasi.

Määrite on vanha määritelmä, joka sisällytettiin ennen CSS: n laajaa tukea. Sen avulla voit muuttaa taulukon taustaväriä. Voit asettaa värin nimen tai heksadesimaalikoodin. Tämä attribuutti toimii edelleen monissa selaimissa, mutta tulevaisuuden suojatun HTML: n tapauksessa sinun ei pitäisi käyttää sitä ja käyttää CSS: ää.

Parempi vaihtoehto tälle määritteelle on tyyliominaisuus.

Muuta taulukon taustaväriä kirjoittamalla:

style = "background-color: #ccc;">

Tällä taulukolla on harmaa tausta.

Samoin kuin bgcolor-attribuutti, bordercolor-attribuutin avulla voit muuttaa attribuutin väriä. Tätä määritettä tukee vain Internet Explorer. Sen sijaan sinun tulisi käyttää reunus-väri-tyylistä ominaisuutta.

Muuta taulukon reunuksen väriä kirjoittamalla:

style = "border-color: red;">
Tässä taulukossa on punainen reunus.
Bordercolorlight- ja bordercolordark-määritteet sisällytettiin Internet Exploreriin, jotta voit luoda 3D-reunuksen pöydän ympärille. IE8: sta ja uudemmista lähtien tätä tuetaan kuitenkin vain IE7: n standarditilassa ja Quirks-tila. Microsoft toteaa, että näitä ominaisuuksia ei enää tueta.

Lyhyeksi ajaksi TABLE-elementin cols-määritettä ehdotettiin, jotta selaimet saisivat tietää, kuinka monta saraketta taulukossa oli. Lähtökohtana oli, että tämä auttaisi nopeuttamaan isojen pöytien renderointia. Kuitenkin vain Internet Explorer otti sen käyttöön, ja IE8: sta alkaen sitä tuetaan vain IE7-standarditilassa ja Quirks-tilassa.

Koska siellä on leveysattribuutti (vanhentunut HTML5: ssä), monet ihmiset olettivat, että myös taulukoiden korkeusattribuutti oli olemassa. Mutta koska taulukot noudattavat niiden sisällön leveyttä tai CSS: ssä tai width-määritteessä määritettyä leveyttä, korkeutta ei voitu rajoittaa. Joten selaimet antoivat korkeusattribuutille määrittää taulukon vähimmäiskorkeuden. Jos pöytä olisi tätä korkeutta korkeampi, se näyttäisi pitemmältä. Mutta sinun tulisi käyttää omaisuutta.

CSS height -ominaisuudella voit rajoittaa korkeutta, jos käytät CSS-ominaisuutta myös määritelläksesi, mitä tapahtuu ylimääräiselle sisällölle.

Aseta pöydän vähimmäiskorkeus kirjoittamalla:

style = "height: 30em;">

Tämä taulukko on vähintään 30 ems korkea.

Kaksi määritettä ja lisätty tila taulukon vasemman / oikean puolen (hspace) ja ylä / ala (vspace) ympärillä. Käytä sen sijaan tyyliominaisuutta.

Aseta pystysuora tila 20 pikseliksi ja vaaka-tila 40 pikseliksi kirjoittamalla:

style = "marginaali: 20px 40px;"

Tämän taulukon vspace on 20 pikseliä ja hspace 40 pikseliä.

Attribuutti on looginen attribuutti, joka määrittää, pitäisikö taulukon sisällön kiertyä ylätason elementin tai ikkunan reunaan vai pakottaako vaakasuuntainen vieritys. Sen sijaan sinun on määritettävä kunkin taulukon solun käärimisominaisuudet CSS-ominaisuuden avulla.

Jos haluat, että paljon tekstiä sisältävä sarake ei kääri, kirjoita:


style = "white-space: nowrap;"> Tämä on sarake, jossa on paljon sisältöä. Mutta vaikka se on leveämpi kuin säiliö, tekstin ei pitäisi kiertyä seuraavalle riville, vaan pakottaa selainikkuna vierittämään vaakasuunnassa nähdäksesi kaiken sisällön.
Lopuksi määritteellä määritetään, kuinka kunkin solun sisällön tulee kohdistaa pystysuoraan solun sisällä. Tämän virheellisen määritteen sijaan sinun tulisi käyttää CSS-ominaisuutta jokaisessa solussa, jonka tasausta haluat muuttaa. Et huomaa tämän tyylin vaikutuksia, ellei solun sisältö ole pienempi kuin muiden, suurempien solujen luoman vapaan tilan.

Pakota solu kohdistumaan alareunaan (oletuksena keskelle), kirjoita:


Tämä solu on pidempi kuin muu ja pakottaa siten korkeuden pitemmäksi. Joten huomaat, että pystysuunnassa tasattu solu on kohdistettu pohjaan.
style = "vertical-align: bottom;"> Sisältö alareunassa.
Sisältö keskellä.

instagram story viewer