Vaiheittainen opas HTML-taulukoiden aloittamiseen

HTML-taulukko

Yleiskatsaus

Verkko on täynnä tietoja, kuten jalkapallo-tuloksia, kriketti-tuloksia, luetteloita työntekijöiden nimistä ja sähköpostiosoitteita. HTML-taulukoiden avulla voit näyttää tietoja ns. Taulukkotiedoissa.

HUOMAUTUS: Olen jo lisännyt muotoilun CSS: llä, joten elementit näyttävät erilaisilta. Mutta ne toimivat täsmälleen samalla tavalla.
Jos haluat saada elementtisi näyttämään minun omalta, löydät CSS-tiedostoni alla olevista linkeistä:
CSS: https://gist.github.com/abhishekjakhar/2ea51dfc0dcf6f6ed0d44ac0e72f9c54

Perustaulukko

Voimme luoda HTML-taulukon taulukkoelementin avulla. Siinä on avautuva ja sulkeva tunniste, ja se kääri kaikki taulukkorivit ja taulukon solut sen sisälle.

Kirjoita nyt taulukkorivi. Taulukot koostuvat rivistä tietoa, jotka kulkevat sivun läpi.

-elementtiä käytetään taulukkorivin luomiseen.

Taulukon sarakkeessa ei kuitenkaan ole elementtiä. Taulukon sarakkeet riippuvat siitä, kuinka monta taulukon solua on kunkin rivin sisällä.

-elementtiin, on täsmälleen sama määrä sarakkeita, jotka saat taulukkorivillesi.

Kiteyttää:

  • : Taulukkoelementti edustaa rivi- ja sarakkeiden sarjan tietoja. Taulukoita tulisi käyttää vain taulukkotietojen näyttämiseen, eikä koskaan sivun asetteluun.
: Taulukkorivielementti määrittelee taulukkorivirivin. Taulukkorivit voidaan täyttää taulukon soluilla ja taulukon otsikkosoluilla.
  • -elementtiä käytetään taulukkosolun luomiseen. Joten pohjimmiltaan -elementtien lukumäärä, jotka lisäät
    : Taulukon soluelementti sisältää tietoja ja edustaa yhtä taulukon solua. Jokaisen taulukon solun tulisi olla taulukkorivin sisällä.taulukkorivi (<tr>) ja taulukkosolu (<td>) elementit yhdessä taulukon muodostamiseksi
    Huomaa: -elementeillä ei ole määritteitä. Jos olet työskennellyt aiemmin taulukoiden kanssa, olet ehkä käyttänyt joitain määritteitä aiemmin. Ne ovat kuitenkin nyt vanhentuneet.

    Pöydän yläosa

    Olemme luoneet peruspöydän, mutta ei ole selvää, että taulukon ensimmäinen rivi on todellakin yritys merkitä jokainen sarake. Tällä hetkellä ensimmäinen rivi näyttää yksinkertaisesti uudelta riviltä pöydässämme.

    Voimme käyttää taulukon otsikkotietoelementtiä jokaisessa näissä kolmessa sarakkeessa kertoaksesi selaimelle, hakukoneiden indeksointiroboteille ja näytönlukijoille, että nämä ovat tosiasiallisesti otsikot, eivät vain tavallisia tietoja.

    Nyt muutamme ensimmäisen rivin taulukkosolut taulukon otsikkosoluiksi. Korvaamme sen

    korvaamalla .

    Ensimmäisen rivin teksti on rohkeampaa kuin muiden rivien, koska ensimmäisen <tr> sisällä käytetään <th> -elementtiä

    Pöydän pää ja runko

    Samoin kuin HTML-asiakirjamme rakenteessa, jossa meillä on pää ja runko, voimme lisätä myös pään ja rungon taulukkoomme. Emme ehdottomasti käytä samoja HTML-elementtejä, koska silloin syntaksi tulee virheelliseksi. Pöydässä meillä on päälle ja vartalolle.

    • - Taulukon pääelementti (jota ei pidä sekoittaa taulukon otsikkosoluelementtiin) määrittelee rivisarjan, joka muodostaa taulukon otsikon.
    • - taulukon runkoelementti määrittelee yhden tai useamman rivin, jotka muodostavat taulukon ensisijaisen sisällön (tai ”rungon”).
    pöydän pää (<pää>) ja pöydän runko (<henkilö>) elementit

    Pöytäjalkaelementti

    Meillä on pöydän pää ja pöydän runko-osa. Joten tietysti on olemassa myös pöytäjalkaelementti. Mutta kysymys on, mikä on taulukon alatunnisteen tarkoitus, kun meillä on jo taulukon otsikot, jotka merkitsevät sarakkeet?

    Yleensä taulukon alatunniste-elementin tulisi sisältää yhteenveto taulukosta. Tämä voi olla lopullinen solu, joka sisältää summat, kokonaismäärät ja keskiarvot jokaiselle sarakkeelle. Se voi sisältää myös joitain metatietoja, kuten tekijänoikeustietoja tai tietolähdettä taulukossa.

    Nyt luulet, että pöydän alatunniste menisi pöydän alaosaan. Sen pitäisi tosiasiassa mennä heti pöydän pääelementin jälkeen ja juuri ennen pöydän runko-osaa.

    • - Taulukon alatunniste-elementti määrittelee rivisarjan, joka on yhteenveto taulukon sarakkeista.
    pöydän jalka (<jalka>) -elementti

    Kuvateksti

    Tämä elementti on pohjimmiltaan taulukon otsikko, ja sen pitäisi tulla heti avautuvan taulukon tunnisteen jälkeen. Tätä on mukavaa lisätä, koska se tekee nopeasti yhteenvedon siitä, mitä taulukko saattaa sisältää.

    Nyt olemme käsittäneet HTML-taulukkoelementtien perusteet.

    Voit oppia lisää alla olevista linkeistä olevista taulukoista.

    Toivon, että olet löytänyt tämän viestin informatiiviseksi ja hyödylliseksi. Haluaisin kuulla palautteesi!

    Kiitos, että luit!