Kuinka tehdä tuoteluettelo HTML-koodilla

click fraud protection

Taulukot ovat yksinkertaisin tapa luoda verkkoluettelo HTML-kielellä. Kolmisarakkeinen taulukko antaa tilaa tuotekuvalle, kuvaukselle ja toimitus-/tilaustiedoille. Tietojen lisääminen taulukoihin vähentää tekstin tasaamiseen tarvittavaa aikaa. Lisäksi taulukoiden avulla voit hallita sivusi tietoja ympäröivää tyhjää tilaa, mikä parantaa verkkosivustosi ulkonäköä ja selkeyttä.

Vaihe 1

Määritä taulukko yhden pikselin reunalla aukon avulla

tag:

Päivän video

Vaihe 2

Lisää ensimmäinen rivi soluja ja niiden sisältö tällä koodilla:

Vaihe 3

Lisää toinen rivi soluja ja niiden sisältö tällä koodilla:

Vaihe 4

Sulje taulukko lopputunnisteella:

Tämä on kuvaus ensimmäisestä kohteesta. Tämä kohde on tällä hetkellä saatavilla.
Tämä on kuvaus toisesta kohteesta. Tämä tuote on jälkitoimituksessa.

Kärki

Tämä yksinkertainen esimerkki tuottaa taulukon, jossa on kaksi riviä ja kolme saraketta. Ensimmäisessä sarakkeessa näkyy 60 x 60 pikselin kuva tuotteesta tunnistetta käyttäen. Toisessa ja kolmannessa sarakkeessa näkyy tuotekuvaus ja varastotiedot. Huomaa, että jokainen rivi alkaa ja päättyy tunnisteeseen ja jokainen rivin kohde alkaa ja päättyy tunnisteeseen. Lisää niin monta saraketta tai riviä kuin tarvitset kuvaamaan tuotettasi.

Lisää solun täytettävä komento välittömästi taulukon määrittelyn reunamäärityksen jälkeen lisätäksesi tyhjää tilaa taulukon reunojen ja sisällön välillä. Esimerkiksi,

luo 10 pikselin valkoisen tilan taulukon jokaisen solun sisällön ympärille.

viittauksia

  • W3Schools.com: HTML-taulukot