Kaip sukurti produktų katalogą naudojant HTML

Lentelės yra paprasčiausias būdas sukurti internetinį katalogą HTML. Trijų stulpelių lentelėje rasite vietos produkto vaizdui, aprašymui ir pristatymo/užsakymo informacijai. Informacijos įterpimas į lenteles sumažina laiką, reikalingą tekstui pagrįsti. Be to, lentelės leidžia valdyti tuščią erdvę, esančią jūsų puslapyje, kad pagerintumėte svetainės išvaizdą ir aiškumą.

1 žingsnis

Naudodami angą apibrėžkite lentelę su vieno pikselio kraštine

žyma:

Dienos vaizdo įrašas

2 žingsnis

Įterpkite pirmąją langelių eilutę ir jų turinį naudodami šį kodą:

3 veiksmas

Įdėkite antrą langelių eilutę ir jų turinį su šiuo kodu:

4 veiksmas

Uždarykite lentelę su pabaigos žyma:

Tai yra pirmojo elemento aprašymas. Ši prekė šiuo metu yra prieinama.
Tai yra antrojo elemento aprašymas. Ši prekė yra užsakyta.

Patarimas

Šis paprastas pavyzdys sukuria lentelę su dviem eilutėmis ir trimis stulpeliais. Pirmame stulpelyje rodomas 60 x 60 pikselių gaminio vaizdas naudojant žymą. Antrame ir trečiame stulpeliuose rodomas produkto aprašymas ir atsargų informacija. Atminkite, kad kiekviena eilutė prasideda ir baigiasi žyma, o kiekvienas eilutės elementas prasideda ir baigiasi žyma. Įterpkite tiek stulpelių ar eilučių, kiek reikia gaminiui apibūdinti.

Įterpkite komandą cellpadding iš karto po kraštinės specifikacijos lentelės apibrėžime, kad padidintumėte tarpą tarp lentelės kraštinių ir turinio. Pavyzdžiui,

aplink kiekvieną lentelės langelį sukuria 10 pikselių baltą tarpą.

nuorodos

  • W3Schools.com: HTML lentelės