So erstellen Sie einen Produktkatalog mit HTML

Tabellen bieten die einfachste Methode zum Erstellen eines Online-Katalogs in HTML. Eine dreispaltige Tabelle bietet Ihnen Platz für Produktbild, Beschreibung und Versand-/Bestellinformationen. Durch das Einfügen von Informationen in Tabellen wird der Zeitaufwand für die Textausrichtung verringert. Darüber hinaus geben Ihnen Tabellen die Kontrolle über den Leerraum, der die Informationen auf Ihrer Seite umgibt, um das Erscheinungsbild und die Übersichtlichkeit Ihrer Website zu verbessern.

Schritt 1

Definieren Sie eine Tabelle mit einem Ein-Pixel-Rahmen mithilfe der Öffnung

Schild:

Video des Tages

Schritt 2

Fügen Sie die erste Zeile von Zellen und deren Inhalt mit diesem Code ein:

Schritt 3

Fügen Sie die zweite Zellenreihe und deren Inhalt mit diesem Code ein:

Schritt 4

Schließen Sie die Tabelle mit dem End-Tag:

Dies ist eine Beschreibung des ersten Elements. Dieser Artikel ist derzeit verfügbar.
Dies ist eine Beschreibung des zweiten Elements. Dieser Artikel ist im Rückstand.

Spitze

Dieses einfache Beispiel erzeugt eine Tabelle mit zwei Zeilen und drei Spalten. In der ersten Spalte wird ein 60 x 60 Pixel großes Bild des Produkts angezeigt, das das Tag verwendet. In der zweiten und dritten Spalte werden Produktbeschreibung und Lagerinformationen angezeigt. Beachten Sie, dass jede Zeile mit dem Tag beginnt und endet und jedes Element in der Zeile mit einem Tag beginnt und endet. Fügen Sie so viele Spalten oder Zeilen ein, wie Sie benötigen, um Ihr Produkt zu beschreiben.

Fügen Sie den cellpadding-Befehl direkt nach der Rahmenangabe in die Tabellendefinition ein, um den Leerraum zwischen den Tabellenrändern und Ihrem Inhalt zu vergrößern. Zum Beispiel,

erstellt einen 10-Pixel-Weißraum um den Inhalt jeder Zelle in der Tabelle.

Verweise

  • W3Schools.com: HTML-Tabellen