Tabellen

Eines vorab: Tabellen sollten nur im Ausnahmefall zu Design- oder Layoutzwecken verwendet werden. Denken Sie daran, dass der Anteil der Website-Besuche mit mobilen Geräten ständig steigt.

Wie eine neu erstellte Tabelle aussieht, ist abhängig vom verwendeten Editor. Zudem kann es beträchtliche Unterschiede zwischen der Darstellung im Bearbeitungsmodus und im Frontend (Vorschau) geben. Deshalb ist es sinnvoll, dem Template ein paar grundsätzliche Styles für eine Tabelle ohne CSS-Klasse mitzugeben.

Damit die Styles des Editors überschrieben werden, sollten die Styles im Template mit !important versehen werden.

Tabelle ohne zugewiesene CSS Klasse:

Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt
Ein wenig Inhalt in der Tabellenzelle Ein wenig Inhalt in der Tabellenzelle
Ein wenig Inhalt in der Tabellenzelle Ein wenig Inhalt

 
CSS-Code in der stylesheet.css des Templates:

/* table basic design */

table {
width: auto%!important;
border: 0!important;
border-collapse: collapse!important;
}

td {
vertical-align: top!important;
font-family: RobotoCondensed, arial, sans-serif!important;
font-size: 16px!important;
line-height: 1.2em!important;
border: 1px solid!important;
padding: 2px 8px!important;
}


Hier nun ein paar Designvarianten, definiert im Template. Die CSS Klassen finden Sie weiter unten, sie können der (markierten) Tabelle per Format => Formate => Table styles zugewiesen werden.

Tabelle im Design "grey":

Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt
Ein wenig Inhalt in der Tabellenzelle Ein wenig Inhalt
Ein wenig Inhalt in der Tabellenzelle Ein wenig Inhalt in der Tabellenzelle

Tabelle im Design "white":

Ein wenig Inhalt in der Tabellenzelle Ein wenig Inhalt in der Tabellenzelle
Ein wenig Inhalt in der Tabellenzelle Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen.
Ein wenig Inhalt Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen.

Tabelle im Design "transparent":

Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt in der Tabellenzelle
Ein wenig Inhalt in der Tabellenzelle, um das Verhalten der Tabelle unter verschiedenen Bedingungen zu testen. Ein wenig Inhalt in der Tabellenzelle
Ein wenig Inhalt in der Tabellenzelle Ein wenig Inhalt

Die CSS Klassen:

Die folgenden CSS-Beispiele können Sie einfach in die stylesheet.css Ihres Templates kopieren.

/* table design grey */

table.grey {
width: 100%!important;
height: auto!important;
background: #fff!important;
border: 0!important;
margin: 2px 0 16px 0!important;
border-collapse: separate!important;
}

table.grey td {
width: auto!important;
height: auto!important;
background: #ddd!important;
color: #333!important;
font-family: RobotoCondensed, arial, sans-serif!important;
font-size: 16px!important;
line-height: 1.2em!important;
border: 0!important;
padding: 6px 10px!important;
}

table.grey td p {
margin: 6px 0!important;
}


/* table design white */

table.white {
width: 100%!important;
height: auto!important;
background: #fff!important;
border: 0!important;
border-collapse: collapse!important;
margin: 2px 0 16px 0!important;
}

table.white td {
width: auto!important;
height: auto!important;
background: #fff!important;
color: #333!important;
font-family: RobotoCondensed, arial, sans-serif!important;
font-size: 16px!important;
line-height: 1.2em!important;
border: 1px solid #aaa!important;
padding: 6px 10px!important;
}

table.white td p {
margin: 6px 0!important;
}


/* unsichtbare Tabelle linksbündig / unvisible table align left */

table.transparent {
width: auto!important;
height: auto!important;
border: 0!important;
border-collapse: collapse!important;
margin: 2px 0 16px 0!important;
}

table.transparent td {
width: auto!important;
height: auto!important;
vertical-align: top!important;
font-size: 16px!important;
line-height: 1.2em!important;
border: 0px solid!important;
padding: 6px 20px 6px 0!important;
}

table.transparent td p {
margin: 6px 0!important;
}