Hilfe:Tabellen: Unterschied zwischen den Versionen

Aus DMUW-Wiki
Wechseln zu: Navigation, Suche
(<tt> entfernt)
K (1 Version: Aktualisierung)
 
(3 dazwischenliegende Versionen von einem Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
−
{| {{Prettytable}}
+
=== Positionierung von Text und Bild mit Hilfe einer Tabelle ===
−
|- style="background-color:#8DB6CD"
+
{|
−
! Überschrift A !! Überschrift B !! Überschrift C
+
|width=500px|
−
|-
+
{|
−
| Zelle A1 || Zelle B1 || Zelle C1
+
|width="40%" |Die verwendete Tabelle hat drei Spalten. Die erste Spalte nimmt 40% der Seitenbreite in Anspruch. Die mittlere Spalte ist leer und stellt der Abstand ( 3% ) zwischen Text und Bild sicher. In der rechten Spalte sitzt das Bild durch <nowiki>valign="top"</nowiki> oben.
−
|-
+
|width="3%"|
−
| Zelle A2 || Zelle B2 || Zelle C2
+
|valign="top" |[[Datei:DBPB 1952 93 Walther Rathenau.jpg|100px]]
−
|-
+
−
| 1234 || 1235-9999 || 10000
+
 
|}
 
|}
  
−
Die obige Tabelle wird durch den folgenden Quelltext erzeugt:
+
|width=5px|
 +
|valign="top" |
 
<pre>
 
<pre>
−
{| {{Prettytable}}
+
{|
−
|- style="background-color:#8DB6CD"
+
 
−
! Überschrift A !! Überschrift B !! Überschrift C
+
|width="40%"|Die verwendete Tabelle hat drei Spalten.
−
|-
+
Die erste Spalte nimmt 40% der Seitenbreite in Anspruch.
−
| Zelle A1 || Zelle B1 || Zelle C1
+
Die mittlere Spalte ist leer und stellt der Abstand ( 3% )
−
|-
+
zwischen Text und Bild sicher. In der rechten Spalte
−
| Zelle A2 || Zelle B2 || Zelle C2
+
sitzt das Bild durch <nowiki>valign="top"</nowiki> oben.
−
|-
+
 
−
| 1234 || 1235-9999 || 10000
+
|width="3%"|
 +
 
 +
|valign="top"|[[Datei:DBPB 1952 93 Walther Rathenau.jpg|100px]]
 +
 
 
|}
 
|}
 
</pre>
 
</pre>
  
−
'''Erläuterungen'''
 
  
−
* Die Zeichen <code>{|</code> beginnen eine Tabelle, während <code>|}</code> sie abschließen. Beide Tags müssen an einem Zeilenanfang stehen.
+
|}
−
* Die Vorlage <code>{{Prettytable}}</code> veranlasst, dass die ganze Tabelle nach den Vorgaben der Klasse <code>Prettytable</code> formatiert wird. Diese sieht unter anderem Trennlinien zwischen den Zellen sowie zusätzlichen Platz zwischen Zelleninhalt und Zellenrand (das sogenannte ''cellpadding'') vor.
+
 
−
* Die Angabe <code>|- style="background-color:#8DB6CD"</code> färbt den Hintergrund der folgenden Tabellenzeile im der Farbe <code>#8DB6CD</code>. Siehe auch [[Hilfe:Farben|Farben]]
+
===Einfache Tabellen ===
−
* Zeilen, die mit einem Ausrufezeichen (<code>!</code>) beginnen, definieren Kopfzeilen von Tabellen. Der Text in einer Zelle einer solchen Zeile wird zentriert und fettgedruckt. Gewöhnliche Tabellenzeilen beginnen dagegen mit einem senkrechten Trennstrich (<code>|</code>).
+
{|
−
* Das Tag <code>|-</code> beginnt eine neue Tabellenzeile, falls es im Quelltext an einem Zeilenanfang steht.
+
|width=500px; |
−
* Die Zeichen <code>||</code> trennen nebeneinanderliegende Tabellenzellen.
+
{|
 +
| Spalte A
 +
*1.1
 +
*1.2
 +
| Spalte B
 +
*2.1
 +
*2.2
 +
| Spalte C
 +
*3.1
 +
*3.2
 +
|}
 +
 
 +
 
 +
|width=5px|
 +
|valign="top" |
 +
<pre>
 +
{|
 +
| Spalte A
 +
*1.1
 +
*1.2
 +
| Spalte B
 +
*2.1
 +
*2.2
 +
| Spalte C
 +
*3.1
 +
*3.2
 +
|}
 +
</pre>
 +
 
 +
 
 +
|}
 +
 
 +
 
 +
 
 +
=== Zweizeilige Tabelle mit Rahmen und bestimmter Spaltenbreite ===
 +
{|
 +
|width=500px; |
 +
{| border="1" cellspacing="0"  valign="top"
 +
| width="5%" | A1 
 +
| width="10%" | B1
 +
| width="20%" | C1
 +
|-valign="top"
 +
| A2
 +
| B2
 +
| C3
 +
|}
 +
|width=5px|
 +
|valign="top" |
 +
<pre>
 +
{| border="1" cellspacing="0"  valign="top"
 +
| width="5%" | A1 
 +
| width="10%" | B1
 +
| width="20%" | C1
 +
|-valign="top"
 +
| A2
 +
| B2
 +
| C3
 +
|}
 +
</pre>
 +
 
 +
 
 +
|}
 +
 
 +
 
 +
 
 +
===Tabelle mit Rahmen, Spaltenbreite, Hintergrundfarbe und Textfarbe===
 +
{|
 +
|width=500px;|
 +
{|style="background:#BFEFFF" border="1" cellspacing="0" cellpadding="4"
 +
|style="vertical-align:top" ; width="50%"|
 +
<span style="color:#990000">Erste Spalte
 +
|style="vertical-align:top" ; width="25%"|
 +
<span style="color:#009900">Zweite Spalte
 +
|style="vertical-align:top" ; width="25%"|
 +
<span style="color:#000099">Dritte Spalte
 +
|}
 +
 
 +
|width=5px|
 +
|valign="top" |
 +
<pre>
 +
{|style="background:#BFEFFF" border="1"
 +
cellspacing="0" cellpadding="4"
 +
|style="vertical-align:top" ; width="50%"|
 +
<span style="color:#990000">Erste Spalte
 +
|style="vertical-align:top" ; width="25%"|
 +
<span style="color:#009900">Zweite Spalte
 +
|style="vertical-align:top" ; width="25%"|
 +
<span style="color:#000099">Dritte Spalte
 +
|}
 +
</pre>
 +
 
 +
 
 +
|}
 +
 
 +
===2 Spalten ===
 +
{|
 +
|width=500px; valign="top" |
 +
{|
 +
 
 +
|width=200px|Spalte 1
 +
 
 +
(die erste hat ein feste Breite 400px)
 +
|width=5px|
 +
|valign="top" | Spalte 2
 +
 
 +
|}
 +
 
 +
|width=5px|
 +
|valign="top" |
 +
<pre>{|
 +
 
 +
|width=400px|Spalte 1
 +
 
 +
(die erste hat ein feste Breite 400px)
 +
|width=5px|
 +
|valign="top" | Spalte 2
 +
 
 +
|}</pre>
 +
 
 +
|}

Aktuelle Version vom 8. Februar 2014, 22:39 Uhr

Inhaltsverzeichnis

Positionierung von Text und Bild mit Hilfe einer Tabelle

Die verwendete Tabelle hat drei Spalten. Die erste Spalte nimmt 40% der Seitenbreite in Anspruch. Die mittlere Spalte ist leer und stellt der Abstand ( 3% ) zwischen Text und Bild sicher. In der rechten Spalte sitzt das Bild durch valign="top" oben. 100px 
{|

|width="40%"|Die verwendete Tabelle hat drei Spalten. 
Die erste Spalte nimmt 40% der Seitenbreite in Anspruch. 
Die mittlere Spalte ist leer und stellt der Abstand ( 3% )
zwischen Text und Bild sicher. In der rechten Spalte 
sitzt das Bild durch valign="top" oben.

|width="3%"|

|valign="top"|[[Datei:DBPB 1952 93 Walther Rathenau.jpg|100px]]

|}


Einfache Tabellen

Spalte A
  • 1.1
  • 1.2
Spalte B
  • 2.1
  • 2.2
Spalte C
  • 3.1
  • 3.2 


{|
| Spalte A
*1.1
*1.2
| Spalte B 
*2.1
*2.2
| Spalte C
*3.1
*3.2
|}



Zweizeilige Tabelle mit Rahmen und bestimmter Spaltenbreite

A1 B1 C1
A2 B2 C3 
{| border="1" cellspacing="0"  valign="top"
| width="5%" | A1  
| width="10%" | B1
| width="20%" | C1
|-valign="top"
| A2
| B2
| C3
|}



Tabelle mit Rahmen, Spaltenbreite, Hintergrundfarbe und Textfarbe

Erste Spalte

Zweite Spalte

Dritte Spalte 

{|style="background:#BFEFFF" border="1"
cellspacing="0" cellpadding="4"
|style="vertical-align:top" ; width="50%"|
<span style="color:#990000">Erste Spalte 
|style="vertical-align:top" ; width="25%"|
<span style="color:#009900">Zweite Spalte
|style="vertical-align:top" ; width="25%"|
<span style="color:#000099">Dritte Spalte
|}


2 Spalten

Spalte 1

(die erste hat ein feste Breite 400px)

Spalte 2 
{|

|width=400px|Spalte 1

(die erste hat ein feste Breite 400px)
|width=5px|
|valign="top" | Spalte 2

|}

Von „http://dmuw.zum.de/index.php?title=Hilfe:Tabellen&oldid=31956“