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.
Beispiel CSS-Code in der stylesheet.css des Templates:
/* table basic design */
table {
border-collapse: collapse;
}
td {
min-width: 20px!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-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-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;
}
