Support » Allgemeine Fragen » Tabellen, Hintergrundfarbe und vertikale Position

  • Gelöst wupsberger

    (@wupsberger)


    Hallo,
    zwei Fragen zu den Tabellen in WordPress (6.5.4, TwentyTwentyThree Theme):

    1. In Tabellenzeilen wird der Text anscheinend immer vertikal zentriert. Ich würde den Text gerne vertikal auf die „Top“ (oben) Position setzen für eine bessere Lesbarkeit, finde aber keine Option dazu im Menü rechts.

    2. Den Tabellenkopf (Kopfzeile) einer Tabelle mit den Spaltentiteln möchte ich in einem leichten Grau hervorheben. Wenn ich Zellen oder die Spalte selektiere, und rechts über Farbe->Hintergrund die gewünschte Farbe setze, wird aber immer die gesamte Tabelle komplett eingefärbt. Wie kann ich nur die Kopfzeile mit einer Hintergrundfarbe versehen?

    Vielen Dank!

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Wenn es keine Einstellung in WordPress dafür gibt, hilft https://www.w3schools.com/css/css_table.asp

    Du kannst beim Einfügen eines Tabellen-Blocks in der Sidebar einstellen, ob deine Tabelle eine Kopfzeile haben soll (1). Dort kannst du dann eigene Text einfügen (2) und festlegen, ob der Text linkbündig oder zentriert ausgegeben werden soll (3). Für alle anderen Einstellungen kannst du eine eigene CSS-Klasse vergeben, in meinem Beispiel my-table (4).

    Screenshot

    Um nun die Tabellen-Kopfzeile farbig zu hinterlegen und den Text in den Tabellenzellen vertikal oben auszurichten, ist noch ein wenig CSS notwendig:

    .my-table thead {
    background: pink;
    }

    .my-table tbody td {
    vertical-align: top;
    }

    Diese Zeilen füge ich je nach Theme im Customizer unter Zusätzliches CSS oder im Website-Editor bei Bearbeitung des Stils per Kebab-Menü oben rechts als Zusätzliches CSS ein. Das Ergebnis sieht so aus:

    Screenshot

    Die Formatierung kann mehrfach verwendet werden, indem du anderen Tabellen ebenfalls die CSS-Klasse my-table zuweist (ein etwas sinnvollerer Name wäre aber angebracht).

    Thread-Starter wupsberger

    (@wupsberger)

    Vielen Dank! Probiere ich gleich aus.

    Thread-Starter wupsberger

    (@wupsberger)

    Funktioniert, Danke!

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)