CMSimple Templates

Tabellen

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;
}

Schon morgen Online!

Ab 360 EUR zzgl. MWSt haben Sie schon morgen Ihre eigene Internetseite, die Sie selbst mit Inhalten füllen können.

Eine General License für alle meine Templates und Plugins ist bereits im Preis enthalten.

Mehr Informationen »

Buy me a coffee

Eigentlich mag ich ja keine Spendenaufrufe per PayPal Button.

Aber ich erhalte immer mal wieder Anfragen von privaten Nutzern meiner

Templates und Plugins

auf welchem Weg sie mir eine kleine Anerkennung zukommen lassen können, auch wenn sie nicht lizenzpflichtig sind.

Das ist ab sofort bequem per PayPal Spendenbutton möglich:

CMSimple Templates

Templates sind Designvorlagen, mit deren Hilfe man das Aussehen einer CMSimple Website innerhalb von Sekunden grundlegend verändern kann, nur indem man ein anderes Template aktiviert.

Seit einiger Zeit beschäftige ich mich mit responsiven Templates. Responsive Templates passen sich automatisch an die Grösse des Bildschirmes an.

Responsive Templates werden von Google als "mobile optimiert" erkannt und bei der Suche mit mobilen Geräten bevorzugt gelistet.

Hier finden Sie Templates von ge-webdesign.de für das Content Management System CMSimple:

Demo & Download »

CMSimple Plugins

Plugins sind Zusatzprogramme, die den Funktionsumfang von CMSimple erweitern. Beliebte Plugins sind z. B.:

  • Gästebuch und Kommentare
  • Blog Plugins
  • News Plugins
  • Fotogalerien
  • Multimedia Plugins
  • Mitgliederbereich

Hier finden Sie viele CMSimple Plugins von ge-webdesign.de, die sich teilweise miteinender kombinieren lassen:

Demo & Download »

nach oben