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.

Default table of a semantic template

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.

Customized table styling

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*/
   }
   

   

   Create a custom table style
   
   Save 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.
   
   

   Add style tag to the template

   
   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:

White cell backgrounds

Die Zellhintergründe werden entsprechend angepasst.

Display of white table backgrounds

Infobox

You can also format the table as an infobox. An infobox is floating to the left or right of the text flow.

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.mysmwtable {
   	float:right; /*right-aligned infobox*/
   	width:300px; /*width of the box*/
   	margin: 0 0 2em 2em; /*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*/
   }
   
   table.mysmwtable > tr > th, table.mysmwtable > tr > td, table.mysmwtable > * > tr > th, table.mysmwtable > * > tr > td {
   	border: 1px solid #a2a9b1; /*border around cells*/
   	padding: 0.2em 0.4em; /*cell padding*/
   }
   form.createbox table.formtable th {
   	padding:10px 0; /*distance between form fields*/
   }
   

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.