Template styling

By default, a semantic template that was created with the page Special:CreateTemplate, is displayed in a basic table format. Each property/value pair is shown in a new table row.The table width adjusts to the table content.

To change the table layout, we can add some styling information to the template.

Adjusting the template styling

To format the table, we create a subpage to the template. It contains the custom template styles. In the following example, we create a variation of the original table with a width of 100%, left-aligned labels and more padding in the table cells.

1. Create the subpage styles.css. For the template Customer data, you need to create the page Template:Customer data/styles.css.
2. To achieve the shown table styling, add the following code to the new styles.css.

   table.mysmwtable {
   	width:100%; /*width of the box/
   	margin: 0 0 2em 0; /*cell padding*/
   	background-color: #f8f9fa; /*background color for the table*/
   	color: #222; /*Textfarbe*/
   	border: 1px solid #a2a9b1; /*border*/
   	border-collapse: collapse; /*border*/
   }
   table.mysmwtable > tr > th, table.mysmwtable > * > tr > th {
   	background-color: #eaecf0; /*background color of the label column*/
   	text-align: left; /*alignment of the label column*/
   	width:25%;/*width of the label column*/
   }
   table.mysmwtable > tr > td, table.mysmwtable > * > tr > td {
   	background-color: #f8f9fa; /*background-color of the second column*/
   }
   table.mysmwtable > tr > th, table.mysmwtable > tr > td, table.mysmwtable > * > tr > th, table.mysmwtable > * > tr > td {
   	border: 1px solid #a2a9b1; /*border around cells*/
   	padding: 10px; /*cell padding*/
   }
   form.createbox table.formtable th {
   	padding:10px 0; /*distance between form fields*/
   }
   

   
   verweis=https://de.wiki.bluespice.com/wiki/Datei:Vorlage-Stil-css.png|alternativtext=Stilanpassung definieren|zentriert|mini|750x750px|Stilanpassung definierenSave the page.
3. Now edit the page Template:Customer data.
   (1) Add the reference to the page styles.css at the beginning of the template. You can copy the following tag:
   
   (2) Change the name of the css-class used in the table from wikitable mysmwtable.
   
   alternativtext=CSS-Seite in der Vorlage referenzieren|zentriert|mini|750x750px|CSS-Seite in der Vorlage referenzieren Save the changes.
   

Now you can see the new table styling..

As a variation, you can also define the background color of the table cells. For example, you can create white cell backgrounds. Change the following lines in your styles.css:

table.mysmwtable > tr > th, table.mysmwtable > * > tr > th {
	background-color: white; /*background color of the label column*/
}

sowie

table.smwtable > tr > td, table.smwtable > * > tr > td {
	background-color: white; /*Hintergrundfarbe der Wertespalte*/
}

Im CSS ändern sich also folgende Zeilen:alternativtext=Weiße Zellhintergründe|zentriert|mini|850x850px|Weiße Zellhintergründe

Die Zellhintergründe werden entsprechend angepasst.

alternativtext=Weißer Tabellenhintergrund|zentriert|mini|850x850px|Weißer Tabellenhintergrund

Infobox

Die Tabelle kann auch als Infobox formatiert werden. Diese erscheint dann rechts oder links neben dem Fließtext.

alternativtext=Infobox|zentriert|mini|850x850px|Infobox

1. Geben Sie auf der Seite Vorlage:Kundendaten/styles.css folgenden Code ein und speichern Sie die Seite. Stellen Sie sicher, dass Sie bestehenden Code mit der Klasse .smwtable voher löschen, falls Sie bereits eine andere Tabellenformatierung erstellt hatten:

   table.smwtable {
   float:right; /*Infobox rechts vom Fließtext*/
   width:300px; /*Breite der Infobox*/
   margin: 0 0 2em 2em; /*Abstand vom Fließtext links und unten*/
   background-color: #f8f9fa; /*Hintergrundfarbe der Tabelle*/
   color: #222; /*Textfarbe*/
   border: 1px solid #a2a9b1; /*Umrandung*/
   border-collapse: collapse; /*Umrandung*/
   }
   table.smwtable > tr > th, table.smwtable > * > tr > th {
   background-color: #eaecf0; /*Hintergrundfarbe der Beschriftungsspalte*/
   text-align: left; /*Textausrichtung der Beschriftungsspalte*/
   }
   table.smwtable > tr > th, table.smwtable > tr > td, table.smwtable > * > tr > th, table.smwtable > * > tr > td {
   border: 1px solid #a2a9b1; /*Umrandung der Zellen*/
   padding: 0.2em 0.4em; /*Zellenabstand innen*/
   }
   form.createbox table.formtable th {
   padding:10px 0; /*Abstand zwischen den Formularfeldern*/
   }

Tip: Wenn Sie mehrere Formate für Ihre Datentabellen benötigen, erstellen Sie jeweils unterschiedliche Vorlagen. Die Stile für die Datentabellen können Sie dann in entsprechenden Unterseiten (styles.css) zur jeweiligen Vorlage definieren.