Kā izveidot produktu katalogu, izmantojot HTML

Tabulas nodrošina vienkāršāko metodi tiešsaistes kataloga izveidei HTML valodā. Trīs kolonnu tabulā ir vieta produkta attēlam, aprakstam un piegādes/pasūtīšanas informācijai. Informācijas ievietošana tabulās samazina teksta pamatošanai nepieciešamo laiku. Turklāt tabulas sniedz jums iespēju kontrolēt balto laukumu ap jūsu lapas informāciju, lai uzlabotu vietnes izskatu un skaidrību.

1. darbība

Izmantojot atvērumu, definējiet tabulu ar viena pikseļa apmali

tags:

Dienas video

2. darbība

Ievietojiet pirmo šūnu rindu un to saturu ar šo kodu:

3. darbība

Ievietojiet otro šūnu rindu un to saturu ar šo kodu:

4. darbība

Aizveriet tabulu ar beigu tagu:

Šis ir pirmās preces apraksts. Šī prece pašlaik ir pieejama.
Šis ir otrā vienuma apraksts. Šī prece ir pēc pasūtījuma.

Padoms

Šis vienkāršais piemērs veido tabulu ar divām rindām un trim kolonnām. Pirmajā kolonnā tiek parādīts 60 x 60 pikseļu produkta attēls, izmantojot tagu. Otrajā un trešajā kolonnā tiek parādīts produkta apraksts un informācija par krājumiem. Ņemiet vērā, ka katra rinda sākas un beidzas ar atzīmi, un katrs rindas vienums sākas un beidzas ar atzīmi. Ievietojiet tik daudz kolonnu vai rindu, cik nepieciešams, lai aprakstītu savu produktu.

Ievietojiet šūnu papildināšanas komandu tūlīt pēc apmales specifikācijas tabulas definīcijā, lai palielinātu atstarpi starp tabulas apmalēm un saturu. Piemēram,

izveido 10 pikseļu balto atstarpi ap katras tabulas šūnas saturu.

atsauces

  • W3Schools.com: HTML tabulas