Wie man einen Produktkatalog mit HTML

Tabellen stellen die einfachste Methode der Aufbau eines Online-Katalog in HTML. Ein Drei-Säulen-Tabelle gibt Ihnen Raum für ein Produktbild, Beschreibung und Versand / Bestellinformationen. Einfügen von Informationen in Tabellen verringert die Menge an Zeit erforderlich, um Text zu rechtfertigen. Darüber hinaus geben Tabellen Sie die Kontrolle über den weißen Raum um die Informationen auf Ihrer Seite, um das Aussehen und die Klarheit Ihrer Website zu erhöhen.

Definieren Sie eine Tabelle mit einer Ein-Pixel-Grenze mit dem öffnenden table tag:

table border = "1"

Legen Sie die erste Zeile von Zellen und deren Inhalt mit diesem Code:

tr

td

img src = "picture1.jpg" width = "60" height = "60" /

/ Td

tdThis ist eine Beschreibung des ersten Elements. / td

tdThis Artikel ist derzeit nicht verfügbar. / td

/ Tr

Legen Sie die zweite Zeile von Zellen und deren Inhalt mit diesem Code:

tr

td

img src = "picture2.jpg" width = "60" height = "60" /

/ Td

tdThis ist eine Beschreibung des zweiten Artikel. / td

tdThis Artikel ist bestellt. / td

/ Tr

Schließen Sie die Tabelle mit der Endung tag:

/ Table

Tipps und Warnungen

Dieses einfache Beispiel erzeugt eine Tabelle mit zwei Zeilen und drei Spalten. Die erste Spalte zeigt eine 60-by-60 pixel Bild des Produkts mit dem img-Tag. Die zweiten und dritten Spalten anzuzeigen Produktbeschreibung und Lagerbestände. Beachten Sie, dass jede Zeile beginnt und endet mit dem tr tag und jedes Element in der Zeile beginnt und endet mit einem td-Tag. Legen Sie so viele Spalten oder Zeilen, wie Sie Ihr Produkt beschreiben müssen.

Legen Sie die cellpadding Befehl unmittelbar nach der Grenze Spezifikation in der Tabelle Definition, um die Menge der weißen Raum zwischen der Tabelle Grenzen und Ihre Inhalte zu erhöhen. Zum Beispiel, table border = "1" cellpadding = "10" erzeugt eine 10-Pixel Leerraum um den Inhalt jeder Zelle in der Tabelle.