Hur man gör en produktkatalog med HTML

Tabeller ger den enklaste metoden att bygga en onlinekatalog i HTML. En tabell med tre kolumner ger dig utrymme för produktbild, beskrivning och frakt-/beställningsinformation. Att infoga information i tabeller minskar den tid som krävs för att justera text. Dessutom ger tabeller dig kontroll över det vita utrymmet som omger informationen på din sida för att förbättra utseendet och tydligheten på din webbplats.

Steg 1

Definiera en tabell med en en-pixel ram med hjälp av öppningen

märka:

Dagens video

Steg 2

Infoga den första raden av celler och deras innehåll med denna kod:

Steg 3

Infoga den andra raden med celler och deras innehåll med denna kod:

Steg 4

Stäng tabellen med sluttaggen:

Detta är en beskrivning av det första föremålet. Denna artikel är tillgänglig för närvarande.
Detta är en beskrivning av det andra föremålet. Denna vara är på restorder.

Dricks

Detta enkla exempel ger en tabell med två rader och tre kolumner. Den första kolumnen visar en bild på 60 gånger 60 pixlar av produkten som använder taggen. Den andra och tredje kolumnen visar produktbeskrivning och lagerinformation. Observera att varje rad börjar och slutar med taggen och varje objekt i raden börjar och slutar med en tagg. Infoga så många kolumner eller rader som du behöver för att beskriva din produkt.

Infoga cellpadding-kommandot omedelbart efter kantspecifikationen i tabelldefinitionen för att öka mängden blanksteg mellan tabellens kanter och ditt innehåll. Till exempel,

skapar ett 10-pixlars vitt utrymme runt innehållet i varje cell i tabellen.

referenser

  • W3Schools.com: HTML-tabeller