Tabellentypen

Sie können den im Editor erstellten und markierten Tabellen (Rand anklicken + STRG Taste) mit dem Menüpunkt "Stil/Format" verschiedene Klassen zuweisen oder direkt aus der Tabellengalerie (Tabelle einfügen - Zeige Galerie - RUS Tabellen) fertige Tabellen einfügen.

 

 

Tabelle grey

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

Klassenname: grey

<table style="width:100%" class="grey">
	<thead>
		<tr>
			<th style="width:25%" scope="col">Spalte 1</th>
			<th style="width:25%" scope="col">Spalte 2</th>
			<th style="width:25%" scope="col">Spalte 3</th>
			<th style="width:25%" scope="col">Spalte 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
</table>

↑ Inhaltsverzeichnis



Tabelle belted

Spalte 1Spalte 2Spalte 3Spalte 4
1 2 3 4
5 6 7 8
9 10 11 12

Klassenname: belted

<table style="width:100%" class="belted">
	<thead>
		<tr>
			<th style="width:25%" scope="col">Spalte 1</th>
			<th style="width:25%" scope="col">Spalte 2</th>
			<th style="width:25%" scope="col">Spalte 3</th>
			<th style="width:25%" scope="col">Spalte 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
		<tr>
			<td>9</td>
			<td>10</td>
			<td>11</td>
			<td>12</td>
		</tr>
</table>

↑ Inhaltsverzeichnis



Tabelle suits

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

Klassenname: suits

<table style="width:100%" class="suits">
	<thead>
		<tr>
			<th style="width:25%" scope="col">Spalte 1</th>
			<th style="width:25%" scope="col">Spalte 2</th>
			<th style="width:25%" scope="col">Spalte 3</th>
			<th style="width:25%" scope="col">Spalte 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
</table>

↑ Inhaltsverzeichnis



Tabelle fine

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

Klassenname: fine

<table style="width:100%" class="fine">
	<thead>
		<tr>
			<th style="width:25%" scope="col">Spalte 1</th>
			<th style="width:25%" scope="col">Spalte 2</th>
			<th style="width:25%" scope="col">Spalte 3</th>
			<th style="width:25%" scope="col">Spalte 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
</table>

↑ Inhaltsverzeichnis



Tabelle fine2

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

Klassenname: fine2

<table style="width:100%" class="fine2">
	<thead>
		<tr>
			<th style="width:25%" scope="col">Spalte 1</th>
			<th style="width:25%" scope="col">Spalte 2</th>
			<th style="width:25%" scope="col">Spalte 3</th>
			<th style="width:25%" scope="col">Spalte 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
</table>

↑ Inhaltsverzeichnis



Tabelle borderwhite

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

Klassenname: borderwhite

<table style="width:100%" class="borderwhite">
	<thead>
		<tr>
			<th style="width:25%" scope="col">Spalte 1</th>
			<th style="width:25%" scope="col">Spalte 2</th>
			<th style="width:25%" scope="col">Spalte 3</th>
			<th style="width:25%" scope="col">Spalte 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
</table>

↑ Inhaltsverzeichnis



Tabelle special

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

Klassenname: special

<table style="width:100%" class="special">
	<thead>
		<tr>
			<th style="width:25%" scope="col">Spalte 1</th>
			<th style="width:25%" scope="col">Spalte 2</th>
			<th style="width:25%" scope="col">Spalte 3</th>
			<th style="width:25%" scope="col">Spalte 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>
		</tr>
</table>

↑ Inhaltsverzeichnis



Tabelle subtitled

Die Klasse "subtitled" ist ein Sonderfall: Wenn mehrere tabellarische Informationen in einer Tabelle vereint werden (um zu erreichen, dass Spaltenbreiten global beibehalten werden), dann können Überschriften, die über mehrerer Spalten gehen, mit dieser Klasse so formatiert werden, dass sie auch als saubere Überschriften wahrgenommen werden.

Überschrift 1
1 2 3 4
5 6 7 8
Überschrift 2
9 10 11 12
13 14 15 16

Klassenname: subtitled

<table style="width:100%" class="subtitled grey">
	<tr>
		<th colspan="4"><strong>Überschrift 1</strong></td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
	<tr>
		<td colspan="4"><strong>Überschrift 2</strong></td>
	</tr>
	<tr>
		<td>9</td>
		<td>10</td>
		<td>11</td>
		<td>12</td>
	</tr>
	<tr>
		<td>13</td>
		<td>14</td>
		<td>15</td>
		<td>16</td>
	</tr>
</table>

↑ Inhaltsverzeichnis



Einheitliche Spaltenbreiten

Für den Fall, dass in mehreren aufeinanderfolgenden Tabellen die Breiten der Tabellenspalten identisch gehalten werden sollen, kann in der lokalen realm.css (im CSS-Ordner Ihres Projekts) eine CSS-Klasse definiert werden.
Mit sogenannten Pseudo-Selektoren können in CSS die einzelnen Spalten einer Tabelle ausgewählt werden.
Folgende CSS-Klasse "testklasse" bewirkt eine Aufteilung der Spaltenbreiten in 50%, 30% und 20%.

.testklasse { width: 100%; }
.testklasse th:nth-child(1),
.testklasse td:nth-child(1) { width: 50%; }
.testklasse th:nth-child(2),
.testklasse td:nth-child(2) { width: 30%; }
.testklasse th:nth-child(3),
.testklasse td:nth-child(3) { width: 20%; }

Damit können beliebige Spaltenbreiten für beliebig viele Spalten vergeben werden.
(Achtung: Pseudo-Selektoren werden von alten Browserversionen teilweise noch nicht unterstützt)

Tabelle 1
1 (50%) 2 (30%) 3 (20%)
4 (50%) 5 (30%) 6 (20%)

 

Tabelle 2
1 (50%) 2 (30%) 3 (20%)
4 (50%) 5 (30%) 6 (20%)

↑ Inhaltsverzeichnis



Nach links schieben

Entfernt den linken Innen-Abstand der ersten Tabellenzelle - unabhängig davon, ob diese vom Typ TH oder TD ist. Dient zur optischen Beruhigung im Zusammenspiel mit Fließtext. Macht natürlich wenig Sinn bei Tabellen mit Rändern oder mit Hintergrundfarbe.

Überschrift: Lorem ipsum dolor sit amet
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Klassenname: moveleft

<table class="special moveleft" style="width: 60%;">
	<tbody>
		<tr>
			<td><strong>Überschrift:</strong></td>
			<td>Lorem ipsum dolor sit amet</td>
		</tr>
		<tr>
			<td colspan="2">Consetetur sadipscing elitr, 
			sed diam nonumy eirmod tempor invidunt ut labore 
			et dolore magna aliquyam erat, sed diam voluptua.</td>
		</tr>
	</tbody>
</table>

↑ Inhaltsverzeichnis