Sie betrachten eine alte Version der Seite. Zur neuesten Version gehen.
VisualEditor/Tabellen/Beispiele: Unterschied zwischen den Versionen
K |
Inhaltsverzeichnis
Tabellen formatieren[Bearbeiten | Quelltext bearbeiten]
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.portalboxes {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; }
Design 1[Bearbeiten | Quelltext bearbeiten]
Einführung | Wichtige Dokumente |
---|---|
Bei der Abteilung Personalwesen finden Sie vor allem folgende Inhalte im Wiki:
|
Diese Informationen sollten Sie kennen:
|
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[Bearbeiten | Quelltext bearbeiten]
Überschrift | Überschrift |
---|---|
Inhalt | Inhalt |
{| class="portal tyellow" style="width:100%;"
! style="width:50%;" |'''Überschrift'''
! style="width:50%;" |'''Überschrift'''
|-
| Inhalt
| Inhalt
|}
Design 3[Bearbeiten | Quelltext bearbeiten]
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. |
{| 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[Bearbeiten | Quelltext bearbeiten]
Box 1 | Box 2 | Box 3 | Box 4 |
Box 5 | Box 6 | Box 7 | Box 8 |
{| class="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'''
|}
{{DISPLAYTITLE:Formatieren mit Tabellen-Designs}} ==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:<syntaxhighlight lang="css"> table.portal {border-spacing: 20px 2px; border-collapse: separate;} table.portalboxes {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; } </syntaxhighlight><br /> ==Design 1== <br /> {| class="portal tblue" style="width:100%;" ! style="width:50%;" |'''Einführung''' ! style="width:50%;" ! |'''Wichtige Dokumente''' |- | style="vertical-align:top;width:48%;" |Bei der Abteilung '''Personalwesen''' finden Sie vor allem folgende Inhalte im Wiki:<br /> *Wichtige Ankündigungen *Mitarbeiterhandbuch *Informationen für neue Mitarbeiter<br /> *Organigramme *Ansprechpartner |Diese Informationen sollten Sie kennen:<br /> *Datenschutzrichtlinien (Stand:1/2020) *Urlaubsantrag *Dienstreisen <br /> *Alle Formulare |} Code im Quelltext der Wikiseite einfügen: <syntaxhighlight lang="text"> {| class="portal tblue" style="width:100%;" ! style="width:50%;" |'''Spalte 1''' ! style="width:50%;" ! |'''Spalte 2''' |- | Inhalt Spalte 1 | Inhalt Spalte 2 |} </syntaxhighlight><br /> ==Design 2== <br /> {| class="portal tyellow" style="width:100%;" ! style="width:50%;" |'''Überschrift''' ! style="width:50%;" |'''Überschrift''' |- |Inhalt |Inhalt |} Code im Quelltext der Wikiseite einfügen:<syntaxhighlight lang="text"> {| class="portal tyellow" style="width:100%;" ! style="width:50%;" |'''Überschrift''' ! style="width:50%;" |'''Überschrift''' |- | Inhalt | Inhalt |} </syntaxhighlight> ==Design 3== <br /> {| class="portal twhite" style="width:100%;" ! style="width:33%;" |'''Schon gewußt?''' ! style="width:33%;" |'''Unsere Mission''' ! style="width:33%;" |'''Ansprechpartner''' |- |Seit 1. April 2020 unterstützt uns nun [[Benutzer:Pschertel|'''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 [[Benutzer:WikiSysop|'''Herrn Baumeister''']]. |} Code im Quelltext der Wikiseite einfügen:<syntaxhighlight lang="css"> {| 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 |} </syntaxhighlight><br /> ==Design 4== <br /> {| class="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''' |} Code im Quelltext der Wikiseite einfügen:<syntaxhighlight lang="css"> {| class="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''' |} </syntaxhighlight> <br /> [[en:Manual:VisualEditor/Tables/Examples]] [[de:{{FULLPAGENAME}}]]
Zeile 1: | Zeile 1: | ||
− | {{DISPLAYTITLE: | + | {{DISPLAYTITLE:Tabellen-Designs}} |
==Tabellen formatieren== | ==Tabellen formatieren== |