Tabellen im JTL-Shop erstellen – mit dem OnPage Composer, ganz ohne HTML
Dreizack Medien GmbH
Du willst eine Größentabelle, eine Vergleichsübersicht oder eine Versandtabelle in Deinen JTL-Shop einbauen – und stehst plötzlich vor einer Wand aus HTML. Genau hier hat es bisher fast jeden erwischt: Tabellen im JTL-Shop waren Handarbeit im Code, und auf dem Handy sah das Ergebnis dann oft zerquetscht aus.
Mit dem neuen Tabellen-Portlet von OPC Plus ist damit Schluss. Du baust Deine Tabelle direkt im Editor – Spalte für Spalte, ohne eine einzige Zeile HTML – und sie sieht auf dem Smartphone genauso sauber aus wie am Desktop. In diesem Beitrag zeigen wir Dir, wie Du das Tabellen-Portlet einsetzt, welche Einstellungen wirklich wichtig sind und an welchen typischen Beispielen sich der Aufwand sofort lohnt.
Einordnung
Warum Tabellen im JTL-Shop bisher so nervig waren
Wer im JTL-Shop schon mal eine Tabelle gebraucht hat, kennt den Ablauf: Du wechselst in die HTML-Ansicht der Artikelbeschreibung, tippst <table>, <tr> und <td> von Hand – und hoffst, dass nichts verrutscht. Ein vergessenes schließendes Tag, und das halbe Layout steht schief.
Das eigentliche Problem kommt aber erst auf dem Handy. Eine klassische HTML-Tabelle ist starr: Sie behält ihre Spaltenbreite bei, egal wie schmal der Bildschirm wird. Auf dem Smartphone heißt das entweder gequetschte Spalten, abgeschnittener Text oder ein horizontaler Scrollbalken, den niemand bedient. In der JTL-Community taucht diese Frage immer wieder auf – „Tabelle responsive machen" gehört zu den Dauerbrennern, und die übliche Antwort lautet: Bau es lieber mit dem Bootstrap-Grid nach oder lass die Tabelle ganz weg.
Beides ist Murks. Das Grid ist keine echte Tabelle, und „weglassen" ist keine Lösung, wenn Deine Kunden die Infos zum Kaufen brauchen. Genau diese Lücke schließt das Tabellen-Portlet.
Kurzanleitung
So fügst Du eine Tabelle ein
Das Tabellen-Portlet lebt im OnPage Composer – also dort, wo Du ohnehin Seiten im OnPage Composer gestaltest. Der Einstieg ist denkbar einfach:
-
Öffne im JTL-Shop den OnPage Composer auf der Seite, auf der die Tabelle erscheinen soll (z. B. eine Artikeldetailseite oder eine CMS-Seite).
-
Zieh das Portlet Tabelle aus der Portlet-Liste an die gewünschte Stelle.
- Es öffnet sich der Dialog „Tabelle bearbeiten" mit mehreren Reitern – hier baust Du Inhalt und Aussehen zusammen.
Den Inhalt pflegst Du im ersten Reiter Inhalt. Über + Zeile und + Spalte baust Du das Raster auf, die Zellen füllst Du direkt aus. Drei Dinge, die Dir hier Arbeit sparen:
- Header-Zeile aktivieren, damit die oberste Zeile als Tabellenkopf gilt
- Spaltenausrichtung pro Spalte festlegen (links, zentriert, rechts) – Zahlen wirken rechtsbündig deutlich aufgeräumter.
- Zellen-Markup für Feinschliff: Mit
**fett**,*kursiv*und[Linktext](URL)setzt Du Akzente oder Verlinkungen direkt in der Zelle, ohne HTML.
Optional gibst Du der Tabelle noch eine Caption mit – eine kurze Beschreibung, die vor allem für Screenreader und damit für die barrierefreie Darstellung zählt.
Das war der Kern. Speichern, und die Tabelle steht – sauber formatiert, ohne dass Du den Code-Editor auch nur gesehen hast.
Style, Farben und mobile Darstellung
So wird die Tabelle wirklich responsive
Eine Tabelle, die nur Daten zeigt, ist die halbe Miete. Das Tabellen-Portlet bringt das Aussehen gleich mit – ganz ohne CSS.
Im Reiter Style stellst Du das Erscheinungsbild ein: Zebra-Streifen für bessere Lesbarkeit, Rahmen, einen Hover-Effekt, eine kompakte Variante mit weniger Innenabstand sowie Schriftgröße und eine maximale Höhe. Unter Farben passt Du Header, Zeilen, Rahmen und Hover an Dein Shop-Design an – standardmäßig übernimmt die Tabelle aber ohnehin die Farben Deines Templates. Jede dieser Einstellungen zeigen wir Dir Schritt für Schritt im Portlets-in-Kürze Video: [Video folgt in Kürze]
Der wichtigste Reiter für das Problem aus diesem Abschnitt ist aber Mobile. Hier entscheidest Du, was mit Deiner Tabelle auf dem Smartphone passiert – und genau das ist die Antwort auf das Responsive-Problem, an dem HTML-Tabellen bisher gescheitert sind. Du legst einen Breakpoint fest (z. B. unter 768 Pixeln) und wählst eine Mobile-Strategie:
- Auto – Card unter Breakpoint, Scroll darüber: Die empfohlene Standardeinstellung. Auf großen Bildschirmen bleibt es eine normale Tabelle, unterhalb des Breakpoints wird jede Zeile automatisch zu einer eigenen Karte – jeder Wert steht dann mit seiner Spaltenüberschrift als Label daneben. Das ist auf dem Smartphone deutlich besser lesbar als eine gequetschte Tabelle.
- Horizontal scrollbar, erste Spalte sticky: Die Tabelle bleibt eine Tabelle und lässt sich seitlich wischen, während die erste Spalte (z. B. die Größe) stehen bleibt. Ideal, wenn der Bezug zur ersten Spalte immer sichtbar sein soll.
- Card-Modus (jede Zeile als Block): Stellt jede Zeile als eigenen Block dar – unabhängig von der Bildschirmbreite, also auch am Desktop.
- Keine Optimierung: Die Tabelle bleibt unverändert. Nur sinnvoll, wenn sie ohnehin sehr schmal ist.
Dazu kommt der Scroll-Lock (X/Y getrennt) im Style-Reiter: Er verhindert, dass beim Wischen gleichzeitig horizontal und vertikal gescrollt wird – beim ersten Wisch legt das Portlet die Achse fest. Das macht vor allem die Variante „Horizontal scrollbar" auf dem Handy angenehm, weil die Tabelle nicht mehr in beide Richtungen verrutscht.
Für die meisten Tabellen ist „Auto" die richtige Wahl: Du baust die Tabelle einmal, und sie passt sich dem Gerät von allein an.
Praxisbeispiele
Diese Tabellen lohnen sich im JTL-Shop sofort
Genug Theorie – schauen wir, wo Dir das Tabellen-Portlet im Alltag wirklich Arbeit abnimmt. Allen Beispielen gemeinsam: Es sind feste Inhalte, die Du einmal pflegst und die Deinen Kunden eine konkrete Frage beantworten.
Größentabelle
Der Klassiker im Mode- und Schuhhandel. Du legst die Maße pro Größe an – Brustumfang, Länge, Schulterbreite – und packst die Tabelle direkt auf die Artikeldetailseite. Der Kunde sieht auf einen Blick, welche Größe passt, und Du sparst Dir Retouren, die nur entstehen, weil die Info fehlte. Dank Card-Ansicht bleibt die Tabelle auch auf dem Smartphone lesbar, wo die meisten Mode-Käufe stattfinden.
Vergleichstabelle
Du hast mehrere Varianten, Pakete oder Tarife, und der Kunde soll sie nebeneinander abwägen können? Eine Vergleichstabelle stellt Ausstattung, Leistung oder Preis Zeile für Zeile gegenüber. Das ist stark auf Landing- oder Kategorieseiten, wo Du die Kaufentscheidung aktiv lenken willst – etwa „Basis vs. Premium vs. Pro".
Versand- und Lieferzeiten-Tabelle
Versandkosten und Lieferzeiten nach Land oder Versandart gehören zu den häufigsten Fragen im Support – und auf eine Info-, Service- oder Versandseite. Eine saubere Tabelle beantwortet die Frage, bevor sie im Ticket landet. Da sich diese Werte selten ändern, ist das ein typischer „einmal anlegen und gut"-Fall.
Maß- und Materialtabelle
Technische Eckdaten, Maße oder Pflegehinweise, die für eine ganze Produktserie gelten: Möbelmaße, Materialzusammensetzung, Reinigungssymbole. Solche Tabellen sind über viele Artikel hinweg identisch – ideal, um Deinen Produktseiten ohne Mehraufwand eine professionelle, einheitliche Info-Ebene zu geben.
Wohin die Reise gehen kann
Das Tabellen-Portlet als Grundgerüst
Damit Du die richtige Erwartung hast: Das Tabellen-Portlet ist für feste Inhalte gemacht. Was Du in die Zellen schreibst, steht in der Tabelle – es zieht keine Werte automatisch aus Deinen Artikeldaten, und es arbeitet nicht mit Smarty-Variablen. Für Größen, Maße, Versandkosten oder Vergleichswerte, die sich selten ändern, ist genau das ideal: Du baust die Tabelle einmal und hast Ruhe.
Wir sehen die Tabelle als stabiles Grundgerüst – und denken durchaus weiter. Eine Anbindung an dynamische Inhalte, etwa über Smarty-Portlets, wäre ein denkbarer nächster Schritt. Ob und wann wir das angehen, machen wir vom Bedarf abhängig. Heißt konkret: Wenn Du sowas in Deinem Shop brauchst, sag uns Bescheid. Unsere Roadmap richtet sich nach dem, was Ihr aus der Praxis zurückmeldet.
Bonus
Eine Tabelle auf vielen Seiten nutzen
Ein letzter Tipp für alle, die dieselbe Tabelle auf vielen Seiten brauchen – etwa die Größentabelle auf jedem T-Shirt einer Kategorie. Im OnPage Composer hängt eine Tabelle normalerweise an genau einer Seite. Willst Du sie auf 50 Artikeln zeigen, müsstest Du sie 50-mal anlegen und bei jeder Änderung 50-mal nachpflegen.
Genau hier setzt unser Plugin OPC Portlets vererben an (Teil der OPC Suite, also ein optionales Zusatz-Plugin). Du baust die Tabelle einmal als Mastertemplate und vererbst sie gezielt – zum Beispiel an eine bestimmte Kategorie (auf Wunsch inklusive Unterkategorien), an eine Produktgruppe oder an alle Artikel eines Herstellers. Änderst Du die Tabelle zentral, ändert sie sich überall mit.
Besonders praktisch bei Varianten-Artikeln wie Bekleidung: Im Standard überträgt der OnPage Composer die Inhalte eines Vaterartikels nicht mehr automatisch auf seine Kindartikel – Du müsstest die Tabelle also bei jeder einzelnen Variante erneut einfügen. OPC Portlets vererben bringt dafür eine eigene Option mit und übernimmt die Tabelle auf Wunsch direkt auf alle Kindartikel.
Für den Einstieg brauchst Du das nicht. Aber sobald sich Tabellen über viele Artikel wiederholen, sparst Du Dir damit eine Menge Fleißarbeit.
TIPP
Noch mehr aus dem OnPage-Composer holen
OPC Portlets vererben ist Teil der OPC Suite – unserem Komplett-Paket für den OnPage-Composer. Vom Design über Smarty-Variablen bis hin zu Conversion-Boostern: Mit unserer OPC Suite holst Du noch mehr aus dem OnPage-Composer Deines JTL-Shop 5 heraus.
Fazit
Tabellen im JTL-Shop sind kein HTML-Projekt mehr
Tabellen waren im JTL-Shop lange ein Ärgernis – Handarbeit im Code, und auf dem Handy unbrauchbar. Mit dem Tabellen-Portlet im OnPage Composer baust Du sie in Minuten, ganz ohne HTML, und sie sehen auf jedem Gerät sauber aus. Ob Größentabelle, Vergleich oder Versandübersicht: Für feste Inhalte ist das genau das richtige Werkzeug.
Das Tabellen-Portlet steckt in OPC Plus. Wenn Du es ausprobieren willst, buch Dir einfach eine kostenfreie Demolizenz. Und wenn Du Fragen zur Einrichtung hast, melde Dich gern bei uns – wir helfen Dir weiter.
Häufig gestellte Fragen zu Tabellen im JTL-Shop
Wie füge ich eine Tabelle im JTL-Shop ein?
Du fügst eine Tabelle über das Portlet „Tabelle" im OnPage Composer ein. Öffne den OnPage Composer auf der gewünschten Seite, zieh das Tabellen-Portlet an die passende Stelle und befülle es im Dialog „Tabelle bearbeiten" – ganz ohne HTML. Das Portlet ist Teil von OPC Plus.
Kann ich im JTL-Shop Tabellen ohne HTML erstellen?
Ja. Mit dem Tabellen-Portlet baust Du Tabellen komplett über eine Oberfläche – Zeilen und Spalten per Klick, Inhalte direkt in die Zellen. Du musst keinen <table>-Code mehr schreiben und auch nichts in der HTML-Ansicht der Artikelbeschreibung anpassen.
Sind die Tabellen auf dem Smartphone responsive?
Ja. Im Reiter „Mobile" legst Du fest, wie sich die Tabelle unterhalb eines Breakpoints verhält. In der empfohlenen Auto-Einstellung wird jede Zeile zur eigenen Karte mit beschrifteten Werten – statt einer gequetschten Tabelle. Alternativ gibt es horizontales Scrollen mit fixierter erster Spalte.
Brauche ich für das Tabellen-Portlet ein zusätzliches Plugin?
Das Tabellen-Portlet ist Teil von OPC Plus und seit Version 1.10.4 verfügbar. Sobald OPC Plus in dieser Version installiert ist, steht Dir das Portlet im OnPage Composer zur Verfügung. Für das Übertragen einer Tabelle auf viele Seiten brauchst Du zusätzlich das Plugin „OPC Portlets vererben".
Wo kann ich Tabellen im JTL-Shop überall einsetzen?
Überall, wo der OnPage Composer greift: auf Artikeldetailseiten, Kategorieseiten und eigenen CMS-Seiten. So baust Du Größentabellen auf Produktseiten, Vergleichstabellen auf Landingpages oder eine Versandtabelle auf Deiner Serviceseite.
Video zum Thema
Über uns
Aus Leidenschaft geboren, durch Hingabe gewachsen – mit voller Kraft für deinen Erfolg im E-Commerce. DREIZACK Medien steht für all das was du bei deiner letzten Agentur vermisst hast. Mit einem Faible für das große Ganze decken wir nicht nur stumpf Anforderungen ab – wir schaffen echte Lösungen. Wie? Indem wir mit- und weiterdenken, Potenziale erkennen und Chancen kreieren. Und indem wir auf ein Netzwerk erstklassiger Partner setzen. Unser Anspruch: Nachhaltige Lösungen, die dich unabhängig machen. Unsere Philosophie: Einfach mal nen Zacken weiter denken
JTL Servicepartner 
