Erstellung individueller Formatvorlagen für Tabellen innerhalb von SharePoint 2013

SharePoint 2013 bietet dem Benutzer die Möglichkeit, mehrere Formatvorlagen für Tabellen zu wählen. Leider decken diese Formatvorlagen nicht immer alle Wünsche unserer Kunden ab.

Es gibt zwei Möglichkeiten, wie wir eine Tabelle individuell gestalten können. Die erste Möglichkeit wäre es, mit Hilfe von „CSS” gezielt die gewünschte Tabelle anzusprechen und somit zu gestalten. Bei der zweiten Möglichkeit, welche innerhalb dieses Beitrages beschrieben wird, erstellen wir in unserer CSS-Datei eine eigene Formatvorlage. Diese Formatvorlage steht im gesamten SharePoint zur Auswahl.

Abbildung 1: Dropdown Tabellenformatvorlage´

 

1.  Anlegen einer neuen „rteTable”-Klasse mit unserem Namen

Wir erstellen eine neue CSS-Datei und fügen folgenden Code hinzu:

Abbildung 2: Neue Formatvorlage anlegen 

Dank der Eigenschaft -ms-name ist unsere Formatvorlage mit dem Namen: “My custom table” im Dropdown der Tabellenformatvorlage zu finden. Die Klasse dieser Tabelle lautet ms-rteTable-customTable.

2. Eigenschaften der Tabelle festlegen

Mit den folgenden Zeilen Code legen wir das Styling fest. In unserem Beispiel wird der Rand der Tabelle rot und der Text wird zentriert, horizontal sowie vertikal ausgerichtet.

Abbildung 3: Eigenschaften der Tabelle festlegen

Jede individuelle Formatvorlage, die wir für Tabellen erstellen, wird mit der CSS-Klasse .ms-rteTable-customTable deklariert. Dadurch ist es möglich, die individuellen Tabellen zu stylen.

 3. Hochladen der CSS-Datei

Nun kann man die CSS-Datei in die Style-Library hochladen. Dazu navigiert man über die Websiteinhalte zur Formatbibliothek.

Abbildung 4: Formatbibliothek / Style-Library 

Nun kann die CSS-Datei eingebunden werden und unsere neu erstellte Vorlage steht in allen Tabellenformatvorlagen zur Auswahl.

Abbildung 5: Unsere Tabellenformatvorlage

Bildnachweise

By |2017-01-27T11:10:56+01:00April 8th, 2016|SharePoint|0 Comments

About the Author:

Auszubildender, Experte für: HTML, CSS

Leave a Reply

%d bloggers like this:

novaCapta verwendet Cookies, um die Funktionalität dieser Website zu verbessern. Durch die Nutzung dieser Seite stimmen Sie der Verwendung von Cookies zu. Weiterlesen

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close