Seitenlayout 1: Unterschied zwischen den Versionen

Aus RMG-Wiki
Wechseln zu: Navigation, Suche
 
(4 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 3: Zeile 3:
 
=Positionierung von Text und Bild mit Hilfe einer Tabelle=
 
=Positionierung von Text und Bild mit Hilfe einer Tabelle=
 
{|
 
{|
|width="30%" |Hier können Sie einen echten Text einfügen. Das zugehörige Bild steht nebenan. Dieser Text kann auch länger sein. Hier enthält er viele unnötige Worte, nur um zu zeigen, welchen Anwendungsbereich der Einsatz von Tabellen in Kombination mit Bildern hat. Die verwendete Tabelle hat drei Spalten, wobei die mittlere leer und sehr schmal ist, und nur den notwendigen Abstand zwischen Text und Bild sicherstellt.
+
|width="30%" |Hier können Sie einen echten Text einfügen. Das zugehörige Bild steht nebenan. Dieser Text kann auch länger sein.  
 +
Die verwendete Tabelle hat drei Spalten, wobei die mittlere leer und sehr schmal ist, und nur den notwendigen Abstand zwischen Text und Bild sicherstellt.
 
|width="3%"|<!--Diese Spalte bleibt leer und legt den Abstand zwischen Text und Bild fest-->
 
|width="3%"|<!--Diese Spalte bleibt leer und legt den Abstand zwischen Text und Bild fest-->
 
|valign="top" |[[Bild:RMG.jpg]]
 
|valign="top" |[[Bild:RMG.jpg]]
 
|}
 
|}
  
 +
<pre>
 +
{|
 +
|width="30%" |Hier können Sie einen echten Text einfügen. Das zugehörige Bild steht nebenan.
 +
Dieser Text kann auch länger sein.
 +
Die verwendete Tabelle hat drei Spalten, wobei die mittlere leer und sehr schmal ist,
 +
und nur den notwendigen Abstand zwischen Text und Bild sicherstellt.
 +
|width="3%"|<!--Diese Spalte bleibt leer und legt den Abstand zwischen Text und Bild fest-->
 +
|valign="top" |[[Bild:RMG.jpg]]
 +
|}
 +
</pre>
  
 
=Anlegen einer zweispaltigen Seite=
 
=Anlegen einer zweispaltigen Seite=
Zeile 13: Zeile 24:
 
  | style="vertical-align:top" |
 
  | style="vertical-align:top" |
 
<div style="margin: 0; margin-right:10px; border: 1px solid #dfdfdf; padding: 0em 1em 1em 1em; background-color:#F5F5F5; align:left;">
 
<div style="margin: 0; margin-right:10px; border: 1px solid #dfdfdf; padding: 0em 1em 1em 1em; background-color:#F5F5F5; align:left;">
 
 
== Deutsch ==
 
== Deutsch ==
 
+
Der Hund bellt
 
+
  
 
</div>
 
</div>
 
| width="50%" style="vertical-align:top" |
 
| width="50%" style="vertical-align:top" |
 
<div style="margin:0;  border:1px solid #dfdfdf; padding: 0em 1em 1em 1em; background-color:#F5F5F5; align:left;">
 
<div style="margin:0;  border:1px solid #dfdfdf; padding: 0em 1em 1em 1em; background-color:#F5F5F5; align:left;">
 
 
== Englisch==
 
== Englisch==
 +
The dog barks
  
 +
</div>
 +
|}
 +
<pre>
 +
{| width="99%"
 +
| style="vertical-align:top" |
 +
<div style="margin: 0; margin-right:10px; border: 1px solid #dfdfdf;
 +
padding: 0em 1em 1em 1em; background-color:#F5F5F5; align:left;">
 +
== Deutsch ==
 +
Der Hund bellt
  
 +
</div>
 +
| width="50%" style="vertical-align:top" |
 +
<div style="margin:0;  border:1px solid #dfdfdf; padding: 0em 1em 1em 1em;
 +
background-color:#F5F5F5; align:left;">
 +
== Englisch==
 +
The dog barks
  
 
</div>
 
</div>
 
|}
 
|}
 
+
</pre>
  
 
=Einfache Tabellen=
 
=Einfache Tabellen=
Zeile 43: Zeile 67:
 
|}
 
|}
  
 +
<pre>
 +
{|
 +
| Spalte A
 +
*1.1
 +
*1.2
 +
| Spalte B
 +
*2.1
 +
*2.2
 +
| Spalte C
 +
*3.1
 +
*3.2
 +
|}
 +
</pre>
  
 
=Formatierung von Tabellen=
 
=Formatierung von Tabellen=
Zeile 54: Zeile 91:
 
| A2
 
| A2
 
| B2
 
| B2
| C2
+
| [[Bild:theli3.jpg]]
 
|}
 
|}
  
 +
<pre>
 +
{| border="1" cellspacing="0"  valign="top"
 +
| width="5%" | A1 
 +
| width="10%" | B1
 +
| width="20%" | C1
 +
|-valign="top"
 +
| A2
 +
| B2
 +
| [[Bild:theli3.jpg]]
 +
|}
 +
</pre>
  
  
Zeile 69: Zeile 117:
 
|}
 
|}
  
 
+
<pre>
{| border="1" cellspacing="0" valign="top"
+
{|style="background:#C4C4C4" border="1" cellspacing="0" cellpadding="4"
| width="100" | A1 A1A1A A1A1 A1A A1A1A1 AA1A1A1A  A1A1A1A
+
|style="vertical-align:top" ; width="50%"|
| width="200" | B1B1B1 B1B1 B1 B1 B1B1 B1B1 B1B1B1B1B1B1 B1B1B1
+
<span style="color:#990000">Erste Spalte
| width="400" | C1C1 C1C1C1 C1C1 C1C1 C1 C1C1 C1C1C1 C1 C1 C1C1C1
+
|style="vertical-align:top" ; width="25%"|
|-valign="top"
+
<span style="color:#009900">Zweite Spalte
| A2
+
|style="vertical-align:top" ; width="25%"|
| B2
+
<span style="color:#000099">Dritte Spalte
| C2
+
 
|}
 
|}
 +
</pre>
  
 
[[Bild:theli3.jpg]]
 
  
  

Aktuelle Version vom 4. November 2010, 22:03 Uhr

zur Fortbildung zurück

Positionierung von Text und Bild mit Hilfe einer Tabelle

Hier können Sie einen echten Text einfügen. Das zugehörige Bild steht nebenan. Dieser Text kann auch länger sein.

Die verwendete Tabelle hat drei Spalten, wobei die mittlere leer und sehr schmal ist, und nur den notwendigen Abstand zwischen Text und Bild sicherstellt.

RMG.jpg
{|
|width="30%" |Hier können Sie einen echten Text einfügen. Das zugehörige Bild steht nebenan. 
Dieser Text kann auch länger sein. 
Die verwendete Tabelle hat drei Spalten, wobei die mittlere leer und sehr schmal ist, 
und nur den notwendigen Abstand zwischen Text und Bild sicherstellt.
|width="3%"|<!--Diese Spalte bleibt leer und legt den Abstand zwischen Text und Bild fest-->
|valign="top" |[[Bild:RMG.jpg]]
|}

Anlegen einer zweispaltigen Seite

Deutsch

Der Hund bellt

Englisch

The dog barks

{| width="99%"
 | style="vertical-align:top" |
<div style="margin: 0; margin-right:10px; border: 1px solid #dfdfdf;
padding: 0em 1em 1em 1em; background-color:#F5F5F5; align:left;">
== Deutsch ==
Der Hund bellt

</div>
| width="50%" style="vertical-align:top" |
<div style="margin:0;  border:1px solid #dfdfdf; padding: 0em 1em 1em 1em;
background-color:#F5F5F5; align:left;">
== Englisch==
The dog barks

</div>
|}

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
|}

Formatierung von Tabellen

Zweizeilige Tabelle mit Rahmen und bestimmter Spaltenbreite

A1 B1 C1
A2 B2 Datei:Theli3.jpg
{| border="1" cellspacing="0"  valign="top"
| width="5%" | A1  
| width="10%" | B1
| width="20%" | C1
|-valign="top"
| A2
| B2
| [[Bild:theli3.jpg]]
|}


Tabelle mit Rahmen, Spaltenbreite, Hintergrundfarbe und Textfarbe

Erste Spalte

Zweite Spalte

Dritte Spalte

{|style="background:#C4C4C4" 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
|}


Tipps

  • Kopieren Sie den Quelltext einer Tabelle, die Ihnen gefällt. Gehen Sie dazu auf den zur Tabelle gehörenden "Bearbeiten"-Link rechts, markieren Sie den Quelltext im "Bearbeiten"- Fenster und fügen Sie diesen auf Ihrer Seite ein!
  • Tabellen (Hilfe im ZUM-WIKI)