VisualEditor/Tabellen/Beispiele

Tabellen formatieren

Tabellen sind nützlich, um Informationen im Wiki übersichtlich darzustellen. Beachten Sie hierbei nur, dass sich mehrspaltige Tabellen nicht zur Darstellung auf mobilen Geräten eignen, da sich der Inhalt hier nicht automatisch auf die Bildschirmbreite anpassen kann.

Die Hintergrundfarben und Formatierungsangaben der Tabellen werden einmalig in die Seite MediaWiki:Common.css kopiert:

                    table.portal {border-spacing: 20px 2px; border-collapse: separate;}
table.portalboxportalboxes {border-spacing: 20px; border-collapse: separate;}
table.portal th, table.portal td, table.portalboxes th, table.portalboxes td 
{padding:10px; border:0; vertical-align:top;}

.tblue th {background-color:#CADAEA;}
.tblue td {background-color:#E0ECF8;}

.tyellow th {background-color:#F7E1B2;}
.tyellow td {background-color:#E0ECF8;}

.twhite th {background-color:#787878; color:#FFF;}
.twhite td {background-color:#FFF;}

.tgrey th {background-color:#ACB1CF; color:#FFF;}
.tgrey td {background-color:#E6E7EB}

/** cropped image **/
img.responsive {width:100%;height:auto;}
.crop { max-height: 50px; overflow: hidden; }

                

Inhaltsverzeichnis

1

Design 1

2 Design 2

3 Design 3

4 Design 4

Design 1

Einführung	Wichtige Dokumente
Bei der Abteilung Personalwesen finden Sie vor allem folgende Inhalte im Wiki: Wichtige Ankündigungen Mitarbeiterhandbuch Informationen für neue Mitarbeiter Organigramme Ansprechpartner	Diese Informationen sollten Sie kennen: Datenschutzrichtlinien (Stand:1/2020) Urlaubsantrag Dienstreisen Alle Formulare

Code im Quelltext der Wikiseite einfügen:

                    {| class="portal tblue" style="width:100%;"
! style="width:50%;" |'''Spalte 1'''
! style="width:50%;" ! |'''Spalte 2'''
|-
| Inhalt Spalte 1
| Inhalt Spalte 2
|}

                

Design 2

Überschrift	Überschrift
Inhalt	Inhalt

Code im Quelltext der Wikiseite einfügen:

                    {| class="portal tyellow" style="width:100%;"
! style="width:50%;" |'''Überschrift'''
! style="width:50%;" |'''Überschrift'''
|-
| Inhalt
| Inhalt
|}

                

Design 3

Schon gewußt?	Unsere Mission	Ansprechpartner
Seit 1. April 2020 unterstützt uns nun Frau Yildiz als Sachbearbeiterin. Wir begrüßen Frau Yildiz herzlich und wünschen Ihr viel Spaß in unserer Abteilung.	Wir arbeiten fleißig daran, Ihnen die wichtigsten Informationen immer aktuell und leicht verständlich aufzubereiten. Lassen Sie uns wissen, was wir noch besser machen können.	Bei inhaltlichen Fragen zu unseren Wikiseiten wenden Sie sich bitte an Herrn Baumeister.

Code im Quelltext der Wikiseite einfügen:

                    {| class="portal twhite" style="width:100%;"
! style="width:33%;" |'''Überschrift 1'''
! style="width:33%;" |'''Überschrift 2'''
! style="width:33%;" |'''Überschrift 3'''
|-
|  Inhalt Spalte 1
|  Inhalt Spalte 2
|  Inhalt Spalte 3
|}

                

Design 4

Box 1	Box 2	Box 3	Box 4
Box 5	Box 6	Box 7	Box 8

Code im Quelltext der Wikiseite einfügen:<syntaxhighlight lang

                    {| class="
                

css"> Box 1 Box 2 Box 3 Box 4 Box 5 Box 6 Box 7 Box 8

                    portalboxes tgrey" style="width:100%;"
|-
| style="width:25%;" |'''Box 1'''
| style="width:25%;" |'''Box 2'''
| style="width:25%;" |'''Box 3'''
| style="width:25%;" |'''Box 4'''
|-
| '''Box 5'''
| '''Box 6'''
| '''Box 7'''
| '''Box 8'''
|}