Wissensdatenbank

EverWeb hat kein Werkzeug zum Einfügen von Tabellen. Am besten fügen Sie eine Tabelle hinzu, indem Sie ein kurzes Stück Tabellencode in ein HTML-Snippet-Widget einsetzen: Der Text bleibt echter Text, den Suchmaschinen und Screenreader lesen können, und Sie ändern ihn, indem Sie einfach die Wörter bearbeiten. Sie können auch eine Google Sheets-Tabelle anzeigen, Inhalte mit einem Container nebeneinander anordnen oder als letzten Ausweg ein Bild verwenden.

Welche Möglichkeit passt

Eine Tabelle mit dem HTML-Snippet-Widget hinzufügen

1. Öffnen Sie die Seite, klicken Sie auf den Tab Widgets und ziehen Sie HTML-Snippet auf die Seite.
2. Gehen Sie zu Inspektor > Widget-Einstellungen, fügen Sie den Code unten in das Feld HTML Quelltext ein und klicken Sie auf Anwenden.
3. Lassen Sie Embed Option (Einbettungsoption) auf Auto, oder wählen Sie Direct Embed (direkt einbetten). Wählen Sie nicht External Frame (externer Rahmen): Suchmaschinen lesen dessen Inhalt unter Umständen nicht.
4. Aktivieren Sie Adjust height to content (Höhe an Inhalt anpassen), damit das Feld mit der Tabelle mitwächst.
5. Legen Sie das Widget auf einer responsiven Seite in einen Container, oder aktivieren Sie Volle Breite unter Inspektor > Maße, damit es auf den Bildschirm passt.
6. Klicken Sie zur Kontrolle auf Vorschau und veröffentlichen Sie dann.

Hier ist eine Preisliste zum Kopieren. Ersetzen Sie die Wörter und Preise durch Ihre eigenen:

<div class="ew-table">
<table>
  <caption>Prices</caption>
  <thead>
    <tr><th>Service</th><th>Time</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Haircut</td><td>30 minutes</td><td>$35</td></tr>
    <tr><td>Cut and colour</td><td>90 minutes</td><td>$95</td></tr>
    <tr><td>Children's cut</td><td>20 minutes</td><td>$20</td></tr>
  </tbody>
</table>
</div>
<style>
.ew-table { overflow-x: auto; }
.ew-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ew-table caption { text-align: left; font-weight: bold; padding: 8px 0; }
.ew-table th, .ew-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #dddddd; }
.ew-table thead th { background: #f2f2f2; }
.ew-table tbody tr:nth-child(even) { background: #fafafa; }
</style>

So passen Sie sie an:

• Eine Zeile hinzufügen: Kopieren Sie eine ganze Zeile, die mit <tr> beginnt und mit </tr> endet, setzen Sie sie darunter ein und ändern Sie die Wörter.
• Eine Spalte hinzufügen: Fügen Sie der Kopfzeile ein weiteres <th>...</th> und jeder anderen Zeile ein weiteres <td>...</td> hinzu.
• Den Titel ändern: Bearbeiten Sie den Text in <caption>, oder löschen Sie diese Zeile, wenn Sie keinen Titel möchten.
• Farben: Ersetzen Sie #f2f2f2 (Kopfzeile) und #fafafa (jede zweite Zeile) durch Ihre eigenen Farben.

Breite Tabellen auf dem Smartphone

Die Zeile overflow-x: auto sorgt dafür, dass sich eine breite Tabelle auf dem Smartphone innerhalb ihres Felds seitlich scrollen lässt, statt alle Spalten zusammenzuquetschen. Bei einer Tabelle mit vielen Spalten fügen Sie der Zeile .ew-table table noch min-width: 700px; hinzu. So bleiben die Spalten lesbar, und Besucher wischen seitlich. Beschränken Sie Tabellen für Smartphones nach Möglichkeit auf etwa vier kurze Spalten.

Sie haben die Tabelle schon in Excel, Numbers oder Google Sheets? Ein Online-„HTML table generator“ (HTML-Tabellengenerator) kann aus einer eingefügten Tabelle Tabellencode machen. Setzen Sie nur den Teil <table> in das Snippet ein.

Eine Google Sheets-Tabelle anzeigen

Gut geeignet für einen Spielplan oder Stundenplan, der sich jede Woche ändert: Änderungen in der Tabelle erscheinen nach kurzer Zeit auf Ihrer Website, ohne dass Sie neu veröffentlichen müssen.

1. Wählen Sie in Google Sheets File > Share > Publish to web (Datei > Freigeben > Im Web veröffentlichen), klicken Sie auf den Tab Embed (Einbetten), wählen Sie das Tabellenblatt aus und klicken Sie auf Publish (Veröffentlichen).
2. Kopieren Sie den Code, den Sie erhalten (er beginnt mit <iframe).
3. Fügen Sie ihn wie oben beschrieben in ein HTML-Snippet ein. Ändern Sie im Code width="..." in width="100%", damit er auf ein Smartphone passt.

Eine veröffentlichte Tabelle kann jeder sehen, tragen Sie also keine privaten Daten darin ein. Suchmaschinen zählen die Tabelle unter Umständen nicht zu Ihrer Seite.

Inhalte mit einer Container-Zeile anordnen

Für ein paar Textspalten ohne Gitterlinien, etwa eine Adresse links und die Öffnungszeiten rechts, klicken Sie in der Werkzeugleiste auf Container, wählen Container-Zeile und ziehen in jede Spalte ein Textfeld. Stellen Sie unter Widget-Einstellungen > Anzeigen den Umbruch auf Wrap (Umbrechen), damit die Spalten auf dem Smartphone untereinander rutschen. Weil jede Spalte als Ganzes umbricht, eignet sich das nicht für Daten, die in Zeilen ausgerichtet bleiben müssen. Siehe Mit Containern eine responsive Seite erstellen, die sich auf dem Smartphone sauber stapelt.

Ein Bild einer Tabelle (letzter Ausweg)

Sie können die Tabelle in Pages, Word oder Excel erstellen, als Bild speichern und der Seite hinzufügen. Das geht schnell, aber Suchmaschinen und Screenreader können die Wörter nicht lesen, der Text wird auf dem Smartphone winzig, und jede Änderung bedeutet ein neues Bild. Wenn Sie das tun, beschreiben Sie die Tabelle im Alt-Text des Bilds und verlinken Sie auf eine PDF-Kopie, die Besucher vergrößern und drucken können: siehe Wie verlinke ich auf ein PDF, damit Besucher es öffnen oder herunterladen können?

Drittentwickler bieten auch Tabellen-Widgets für EverWeb an, etwa Datentabellen, Preistabellen und durchsuchbare Tabellen. Sie finden sie auf der Seite mit EverWeb-Add-ons. Wie Sie eines installieren, lesen Sie unter Widgets von Drittanbietern in EverWeb installieren und verwenden. Den Support für das Widget leistet sein Entwickler.

Verwandte Artikel

• Einen Buchungskalender, einen Instagram-Feed oder anderen externen Code mit dem HTML-Snippet-Widget einfügen
• Mit Containern eine responsive Seite erstellen, die sich auf dem Smartphone sauber stapelt
• Ihre Website barrierefrei machen: Alt-Text, Überschriften, Linktext und Kontrast
• Ein FAQ mit Fragen hinzufügen, die sich öffnen und schließen (Akkordeon)
• Widgets von Drittanbietern in EverWeb installieren und verwenden