HTML-taulukkotunniste käytetään tietojen näyttämiseen taulukkomuodossa (rivi * sarake). Rivissä voi olla useita sarakkeita.

Voimme luoda taulukon tietojen näyttämiseksi taulukkomuodossa käyttämällä

Jokaisessa taulukossa taulukon rivi määritellään-tunnisteen, taulukon otsikon määrittää, ja taulukon tiedot määrittäätunnisteet.

HTML-taulukoita käytetään sivun ulkoasun hallintaan mm. ylätunnisteosio, siirtymispalkki, leipäsisältö, alatunnisteosio jne. Mutta on suositeltavaa käyttää div-tunnistetta taulukon päällä sivun asettelun hallintaan.

HTML-taulukon tunnisteet

Esimerkki HTML-taulukosta

Katsotaanpa esimerkkiä HTML-taulukkotunnisteesta. Sen ulostulo näkyy yllä.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Lähtö:

arraylist

Yllä olevassa html-taulukossa on 5 riviä ja 3 saraketta = 5 * 3 = 15 arvoa.

HTML-taulukko reunalla

On kaksi tapaa määrittää reuna HTML-taulukoille.

1. Taulukon reunamääritteen mukaan HTML:ssä
2. CSS:n rajaomaisuuden mukaan

1) HTML Border -attribuutti

Voit määrittää reunuksen HTML-koodin taulukkotunnisteen border-attribuutilla. Mutta nyt sitä ei suositella.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Lähtö:

2) CSS Border -ominaisuus

Nyt on suositeltavaa käyttää CSS:n border-ominaisuutta määrittääksesi reunuksen taulukossa.

 table, th, td { border: 1px solid black; } 

Voit tiivistää kaikki reunat yhdeksi reunukseksi border-collapse -ominaisuuden avulla. Se kaataa rajan yhdeksi.

lista gimpin fonteista

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

Lähtö:

HTML-taulukko solutäytteellä

Voit määrittää taulukon otsikoiden ja taulukon tietojen täytön kahdella tavalla:

1. HTML:n taulukon cellpadding-attribuutilla
2. Täyttämällä ominaisuus CSS:ssä

HTML-taulukkotunnisteen cellpadding-attribuutti on nyt vanhentunut. On suositeltavaa käyttää CSS:ää. Katsotaanpa CSS-koodia.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

Lähtö:

HTML-taulukon leveys:

Voimme määrittää HTML-taulukon leveyden käyttämällä CSS-leveys omaisuutta. Se voidaan määrittää pikseleinä tai prosentteina.

Voimme säätää pöydän leveyttä tarpeidemme mukaan. Seuraavassa on esimerkki taulukon näyttämiseksi leveydellä.

 table{ width: 100%; } 

Esimerkki:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

Lähtö:

HTML-taulukko colspanilla

Jos haluat tehdä solusta useamman kuin yhden sarakkeen, voit käyttää colspan-attribuuttia.

Se jakaa yhden solun/rivin useisiin sarakkeisiin, ja sarakkeiden määrä riippuu colspan-attribuutin arvosta.

Katsotaanpa esimerkkiä, joka kattaa kaksi saraketta.

CSS-koodi:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

HTML-koodi:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

Lähtö:

binääripuu vs binäärihakupuu

HTML-taulukko rivivälillä

Jos haluat tehdä solusta useamman kuin yhden rivin, voit käyttää rowspan-määritettä.

Se jakaa solun useisiin riveihin. Jaettujen rivien määrä riippuu rivivälin arvoista.

Katsotaanpa esimerkkiä, joka kattaa kaksi riviä.

CSS-koodi:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

HTML-koodi:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

Lähtö:

HTML-taulukko ja kuvateksti

HTML-teksti näkyy taulukon yläpuolella. Sitä tulee käyttää vain taulukkotunnisteen jälkeen.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

HTML-taulukon parillisten ja parittomien solujen muotoilu

CSS-koodi:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

Lähtö:

HUOMAUTUS: Voit myös luoda erilaisia ​​taulukoita käyttämällä erilaisia ​​CSS-ominaisuuksia taulukossasi.

Tuetut selaimet

Elementti	Kromi	IE	Firefox	Ooppera	Safari
	Joo	Joo	Joo	Joo	Joo