Hilfe:Tabellen: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
KKeine Bearbeitungszusammenfassung
(Zwischenstand, + Vorlage2:Spalten, 3Spalten)
Markierung: 2017-Quelltext-Bearbeitung
Zeile 1: Zeile 1:
{{Hilfe Navigation}}
{{Hilfe Navigation}}
== Flexible Spalten ==  
== Tabellen ==
Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an.
Der einsatz von Tabellen im ZUM-Unterrichten-Wiki ist weiterhin möglich und wird auf [https://wiki.zum.de/wiki/Hilfe:Tabellen Hilfe:Tabellen] ausführlich erklärt.
 
{{Box|Achtung|
Allerdings sollten Tabellen '''nur für tabellarische Daten''' und nicht zur Gestaltung von Webseiten dienen.|Hervorhebung2}}
== Mehrspaltenlayout ==
Es gibt Vorlagen für ein Mehrspalten-Layout auf großen Bildschirmen. Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an.
 
=== 2-Spalten ===
[[Vorlage:2Spalten]]
 
;So sieht's aus:
Die Hintergrundfarben dienen nur der Veranschaulichung.
{{Vorlage:2Spalten
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }}
|{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}}
 
}}
 
;Syntax:
  <nowiki>{{2Spalten|
Spalte 1
|
Spalte 2
}} 
</nowiki>
 
=== 3-Spalten ===
Die Vorlage erlaubt es 3 Spalten zu erzeugen.
 
'''So sieht's aus:''' Die Hintergrundfarben dienen nur der Veranschaulichung.
{{Vorlage:3Spalten
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }}
|{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}}
|{{Box-spezial | Titel = Spalte 3 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-rechts | 1}}}}
}}
 
;Syntax:
  <nowiki>{{3Spalten|
  Spalte 1
  |
  Spalte 2
  |
  Spalte 3
  }} 
</nowiki>
Für spezielle Anforderungen gibt es noch 2 weitere Features: [[Vorlage:3Spalten]]
 
=== HTML-Markup ===
Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.  
Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.  



Version vom 20. August 2019, 08:18 Uhr


Tabellen

Der einsatz von Tabellen im ZUM-Unterrichten-Wiki ist weiterhin möglich und wird auf Hilfe:Tabellen ausführlich erklärt.

Achtung
Allerdings sollten Tabellen nur für tabellarische Daten und nicht zur Gestaltung von Webseiten dienen.

Mehrspaltenlayout

Es gibt Vorlagen für ein Mehrspalten-Layout auf großen Bildschirmen. Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an.

2-Spalten

Vorlage:2Spalten

So sieht's aus

Die Hintergrundfarben dienen nur der Veranschaulichung.

Spalte 1
Spalte 2
Syntax
 {{2Spalten|
Spalte 1
|
Spalte 2
}}  

3-Spalten

Die Vorlage erlaubt es 3 Spalten zu erzeugen.

So sieht's aus: Die Hintergrundfarben dienen nur der Veranschaulichung.

Spalte 1
Spalte 2
Spalte 3
Syntax
 {{3Spalten|
  Spalte 1
  |
  Spalte 2
  |
  Spalte 3
  }}  

Für spezielle Anforderungen gibt es noch 2 weitere Features: Vorlage:3Spalten

HTML-Markup

Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.

Um die Inhalte in einer Spalte anzuordnen, schreibt man sie an die Stelle der drei Punkte (…) in den folgenden Beispielen. Dabei kann man auch Absätze, Listen, Tabellen etc. verwenden.

<div class="grid">
 <div class="width-1-3">...</div>
 <div class="width-1-3">...</div>
 <div class="width-1-3">...</div>
</div>
.width-1-3
.width-1-3
.width-1-3
<div class="grid">
 <div class="width-1-2">...</div>
 <div class="width-1-2">...</div>
</div>
.width-1-2
.width-1-2
<div class="grid">
 <div class="width-1-4">...</div>
 <div class="width-3-4">...</div>
</div>
.width-1-6
.width-5-6