{"id":189,"date":"2022-08-19T07:34:50","date_gmt":"2022-08-19T05:34:50","guid":{"rendered":"https:\/\/www.servicepraxis.com\/plugins\/?page_id=189"},"modified":"2026-02-23T10:05:30","modified_gmt":"2026-02-23T09:05:30","slug":"tabellen","status":"publish","type":"page","link":"https:\/\/www.servicepraxis.com\/plugins\/tabellen\/","title":{"rendered":"Tabellen in WordPress"},"content":{"rendered":"\n

Manche Informationen ben\u00f6tigen zur optischen Visualisierung eine Tabelle. Was tun, wenn die Bordmittel von WordPress nicht ausreichen? Wie lassen sich Tabellen am besten auf dem Mobiltelefon darstellen? <\/strong>Inhalte auf einer Website, die mittels einer Tabelle dargestellt werden, bed\u00fcrfen der besonderen Aufmerksamkeit, denn Tabellen und die kleinen Displays von Mobilger\u00e4ten sind zwei Welten, die nicht sonderlich gut zusammen passen. <\/p>\n\n\n\n

Tabellen nach WordPress importieren<\/strong><\/h3>\n\n\n\n

Von Haus bietet WordPress Gutenberg das Erstellen von Tabellen in einem Beitrag, letztlich aber nur recht einfache Varianten mit Kopf- und Fu\u00dfzeile sowie dem Tabelleninhalt. Die Umwandlung, der Im- und Export, au\u00dfer \u00fcber die M\u00f6glichkeit Tabellen als wieder verwendbare Bl\u00f6cke zu speichern, sind nicht im Umfang enthalten.<\/p>\n\n\n\n

\n
\n
\n

Tipp<\/p>\n\n\n\n

\n

Plugin TablePress<\/h3>\n\n\n\n

Das Plugin TablePress erm\u00f6glicht das zentrale Erstellen und Verwalten von Tabellen<\/strong> in Artikeln und Seiten, die Einbindung \u00fcber Shortcodes an beliebigen Stellen innerhalb der Website und f\u00fcgt bei Bedarf f\u00fcr Besucher:innen n\u00fctzliche Funktionen wie die Sortierung von Spalten, Seitennummerierung, Filter und mehr hinzu. Besonders letztere und die Import- bzw. Exportfunktionen<\/strong> beispielsweise aus Tabellenkalkulationen wie Exel oder LibreOffice Calc bzw. als Tab getrenntes File machen das Plugin zu einem meiner Favoriten. Dar\u00fcber hinaus hat jede Tabelle bestimmte Klassen, die als Selektoren genutzt werden k\u00f6nnen, sodass diese ganz an das Layout der eigenen Homepage angepasst werden k\u00f6nnen.<\/p>\n<\/div><\/div>\n\n\n\n

\n

Zum Artikel<\/a><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

Tabellen responsiv gestalten<\/strong><\/h3>\n\n\n\n

Wer kennt vielleicht noch die Zeiten, wo Tabellen das Mittel erster Wahl waren, um ganze Layouts von Webseiten zu gestalten. Heute dienen Tabellen nur noch ihrem eigentlichen Zweck, der Aufbereitung von Inhalten. W\u00e4hrend das Exelsheet auf dem Desktop perfekt r\u00fcberkommt, wird es auf kleinen Bildschirmen schnell un\u00fcbersichtlich.<\/p>\n\n\n\n

\n
\n
\n

Inhalte \u00e4ndern<\/p>\n\n\n\n

\n

\u00dcberfl\u00fcssiges Ausblenden<\/h4>\n\n\n\n

Zeilen bzw. Spalten in Tabellen k\u00f6nnen Klassen zugewiesen werden, mit dem Ziel abh\u00e4ngig von der Gr\u00f6\u00dfe des Bildschirms der Besucher:innen \u00fcber display:none<\/code> bzw. visibility:hidden<\/code> diese Zeilen oder Spalten nicht anzuzeigen<\/strong>. Dies w\u00fcrde aber zum einen dem Ansatz Mobile First widersprechen und zum anderen f\u00fcr Redakteure ohne gr\u00f6\u00dfere Kenntnisse die Wartung bei dynamischen Tabellen unn\u00f6tig erschweren.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n

Scrollen nach rechts erzwingen<\/p>\n\n\n\n

\n

Scroll Snapp<\/h4>\n\n\n\n

Eine l\u00e4ngere Seite, auch so manche Darstellung als One Page, mag auf dem Desktop \u00fcbersichtlich erscheinen, auf dem Tablet, sp\u00e4testens dem Handy ist diese jedoch oft dahin. Mit der passenden Cascading Stylesheet Eigenschaft scroll-snap<\/code> kann man diese \u00dcbersichtlichkeit wieder herstellen. Statt nach unten l\u00e4sst man einzelne Bereiche horizontal scrollen<\/strong>, auf Mobilger\u00e4ten kann der User dann nach rechts bzw. links wischen<\/strong>. Usability und User Experience werden deutlich verbessert. Sch\u00f6n umsetzen kann man dies im Zusammenspiel mit Bootstrap Cards. <\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n
\n

Script basierte L\u00f6sungen<\/p>\n\n\n\n

\n

JavaScript nutzen<\/h4>\n\n\n\n

Sollte die erste Spalte<\/strong> die wichtigste sein, sodass beabsichtigt ist, dass diese immer sichtbar ist und weitere Spalten mit dieser verglichen werden, bietet sich das Framework der Zurp Foundation an: zurb.com<\/a>.<\/p>\n\n\n\n

Eine andere M\u00f6glichkeit bietet FooTable, das seine St\u00e4rken insbesondere in Kombination mit Bootstrap ausspielt. Zellen innerhalb von Tabellen m\u00fcssen hierzu mit Data-Attributen versehen<\/strong> werden, die Umstellung je nach Gr\u00f6\u00dfe des Ger\u00e4ts des Nutzers \u00fcbernimmt das Script: fooplugins.github.io<\/a>.<\/p>\n\n\n\n

Besteht kein Einfluss auf die Auszeichnung der Tabelle<\/strong>, wie es oftmals der Fall, wenn der Kunde in seinem Content-Management-System selbst\u00e4ndig Tabellen erstellt, kann u.U. jQuery weiterhelfen, um der Tabelle etwa ein class=responsive<\/code> zu verpassen bzw. diese mit einem div=scrollsnapp-container<\/code> zu umschlie\u00dfen.<\/p>\n\n\n\n

Unabh\u00e4ngig wie Tabellen dargestellt werden, gibt es gerade, wenn diese Termine<\/strong> abbilden, den Wunsch nur aktuelle<\/strong> Veranstaltungen anzuzeigen. Auch dies l\u00e4sst sich mit einem Skript umsetzen.<\/p>\n<\/div><\/div>\n\n\n\n

\n

Zum Artikel<\/a><\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n

Fallbeispiel TablePress in der Basisversion auf der von mir realisierten Website f\u00fcr Beatriz von Eidlitz, wo ich das Plugin u.a. f\u00fcr Biografie, Ausstellungen und Projekte einsetzte. Bei besonders kleinen Displays bis maximal 290 Pixel Breite l\u00f6se ich die Spalten auf und pr\u00e4sentiere diese jeweils in einer Zeile: \u279a www.eidlitz.de\/vita<\/a>.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"

Manche Informationen ben\u00f6tigen zur optischen Visualisierung eine Tabelle. Was tun, wenn die Bordmittel von WordPress nicht ausreichen? Wie lassen sich Tabellen am besten auf dem Mobiltelefon darstellen? Inhalte auf einer Website, die mittels einer Tabelle dargestellt werden, bed\u00fcrfen der besonderen Aufmerksamkeit, denn Tabellen und die kleinen Displays von Mobilger\u00e4ten sind zwei Welten, die nicht sonderlich […]<\/p>\n","protected":false},"author":1,"featured_media":186,"parent":0,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-189","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":0,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media\/186"}],"wp:attachment":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media?parent=189"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/tags?post=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}