Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- moodle4:szenarien:tabellen_in_moodle_formatieren [2023/05/11 11:36]
Juliana Haas angelegt
+++ moodle4:szenarien:tabellen_in_moodle_formatieren [2023/06/16 12:33] (aktuell)
Juliana Haas
@@ Zeile 1: / Zeile 1: @@
-Tabellen können ohne Weiteres nicht in Moodle genauer formatiert werden. Dazu ist ein Bearbeiten im HTML-Editor notwendig.
+====== Tabellen in Moodle anlegen und formatieren ======
-=====Grundlagen=====
+In manchen Fällen kann es sinnvoll sein, Texte mit Tabellen zu strukturieren. Tabellen können in Moodle einfach über [[:moodle4:inhalte:aktivitaeten_materialien:textfeld|Text- und Medienfelder]] erstellt werden.
-HTML Syntax verwendet sogenannte **tags**. Tags werden mit <tag> geöffnet und mit </tag> geschlossen.
-Eine Tabelle benutzt folgende grundlegenden Tags:
-   * <table></table> öffnet und schließt die Tabelle
-   * <tr></tr> öffnet und schließt eine Zeile
-   * <td></td> öffnet und schließt eine Zelle
- Weitere Tags:
-   * <thead>, <tbody> strukturiert eine Tabelle in Kopfbereich und Tabelleninhalt
-   * <th> formatiert Kopfzellen besonders
-Zellen befinden sich in Zeilen und Zeilen befinden sich in der Tabelle.
+===== Tabelle anlegen =====
-Mit ''Eigenschaft="Wert"'' innerhalb von Tags können Eigenschaften wie Breite, Rahmen oder Hintergrundfarbe festlegen. Eigenschaften für Zeilen werden in <tr> angegeben, für Spalten wird im ersten <td> der ersten Zeile die Eigenschaften definiert.
+  - Navigieren Sie zunächst in den gewünschten Kurs.
+  - Legen Sie ein [[:moodle4:inhalte:aktivitaeten_materialien:textfeld|Text- und Medienfeld]] an.
+  - Klicken Sie nun im Editor auf ''Einfügen > Tabelle''  und wählen Sie die benötigte Größe aus.
+===== Tabellen formatieren =====
+==== Über den Editor ====
+Über die Tabelleneigenschaften im Editor (erstes Symbol der Tabelleneinstellungen bei Klick auf eine Zelle) können Sie bereits eine Vielzahl an Einstellungen wie Hintergrund- und Linienfarbe, Linienstärke, Spaltenbreite einstellen.
+==== Über den Quellcode (HTML) ====
+Wenn Sie über die Möglichkeiten des Editors hinaus Einstellungen tätigen wollen oder Sie lieber im HTML-Format arbeiten, können Sie im Editor über '' Ansicht > Quellcode''  auf den Quellcode des [[moodle4:inhalte:aktivitaeten_materialien:textfeld|Text- und Medienfeldes]] zugreifen und die Tabelle bearbeiten.
+HTML Syntax verwendet sogenannte **tags**. Tags werden mit <tag> geöffnet und mit </tag> geschlossen. Eine Tabelle benutzt folgende grundlegenden Tags:
+  * <table></table> öffnet und schließt die Tabelle
+  * <tr></tr> öffnet und schließt eine Zeile
+  * <td></td> öffnet und schließt eine Zelle
+Weitere Tags:
+  * <thead>, <tbody> strukturiert eine Tabelle in Kopfbereich und Tabelleninhalt
+  * <th> formatiert Kopfzellen besonders
+Zellen befinden sich in Zeilen und Zeilen befinden sich in der Tabelle. Mit ''Eigenschaft="Wert"''  innerhalb von Tags können Eigenschaften wie Breite, Rahmen oder Hintergrundfarbe festlegen. Eigenschaften für Zeilen werden in <tr> angegeben, für Spalten wird im ersten <td> der ersten Zeile die Eigenschaften definiert.
 Weitere Grundlagen zu HTML finden Sie hier: [[https://wiki.selfhtml.org/wiki/HTML/Tabellen/Aufbau_einer_Tabelle|Selfhtml - Aufbau einer Tabelle]]
-Der Code kann mit einem Klick darauf in die Zwischenablage kopiert und direkt in Moodle im HTML-Editor eingefügt werden.
+{{:moodle:ghostpixel.gif?nolink20&1}}
+=== Tabelle mit 3 Spalten die jeweils 33,3% breit sind ===
-===== Beispiele =====
+<btn type="primary" size="xs" icon="fa fa-code" collapse="code1">Code für Tabelle mit 3 Spalten anzeigen</btn> <collapse id="code1" collapsed="true">
-====Tabelle mit 3 Spalten die jeweils 33,3% breit sind====
-<btn type="primary" size="xs" icon="fa fa-code" collapse="code1">Code für Tabelle mit 3 Spalten anzeigen</btn>
-<collapse id="code1" collapsed="true">
 <code>
 <table width="100%" border="1">
-	<tr>
+    <tr>
-		<td width="33.3%">Inhalt der ersten Zelle</td>
+        <td width="33.3%">Inhalt der ersten Zelle</td>
-		<td width="33.3%">Inhalt der zweiten Zelle</td>
+        <td width="33.3%">Inhalt der zweiten Zelle</td>
-		<td width="33.3%">Inhalt der dritten Zelle mit längerem Inhalt, der umgebrochen wird</td>
+        <td width="33.3%">Inhalt der dritten Zelle mit längerem Inhalt, der umgebrochen wird</td>
-	</tr>
+    </tr>
-	<tr>
+    <tr>
-		<td>hier beginnt die zweite Zeile</td>
+        <td>hier beginnt die zweite Zeile</td>
-		<td></td>
+        <td></td>
-		<td></td>
+        <td></td>
-	</tr>
+    </tr>
 </table>
 </code>
-</collapse>
-Ergebnis:
-{{:moodle:howto:tabellentest1.png?direct|}}
-In Prozent angegebene Tabellenspalten ziehen sich auf sehr großen Monitoren manchmal zu weit auseinander. Alternativ können dann auch feste Pixelangaben mit zB ''width="100"'' angegeben werden. Dabei muss aber die Angabe ''width="100%"'' bei <table> weggelassen werden.
-====Tabelle mit Kopfzeile und abwechselnd hellgrauer Zeile====
+</collapse> Ergebnis: {{:moodle4:szenarien:tabellentest1.png?direct&}}In Prozent angegebene Tabellenspalten ziehen sich auf sehr großen Monitoren manchmal zu weit auseinander. Alternativ können dann auch feste Pixelangaben mit zB ''width="100"''  angegeben werden. Dabei muss aber die Angabe ''width="100%"''  bei <table> weggelassen werden.
-Mit ''bgcolor="Farbwert"'' lassen sich Zeilen und Zellen einfärben.
+{{:moodle:ghostpixel.gif?nolink20&1}}
+=== Tabelle mit Kopfzeile und abwechselnd hellgrauer Zeile ===
+Mit ''bgcolor="Farbwert"''  lassen sich Zeilen und Zellen einfärben.
+<btn type="primary" size="xs" icon="fa fa-code" collapse="code2">Code für Tabelle mit Hintergrundfarben anzeigen</btn> <collapse id="code2" collapsed="true">
-<btn type="primary" size="xs" icon="fa fa-code" collapse="code2">Code für Tabelle mit Hintergrundfarben anzeigen</btn>
-<collapse id="code2" collapsed="true">
 <code>
 <table width="100%">
@@ Zeile 74: / Zeile 91: @@
     </tbody>
 </table>
 </code>
-</collapse>
-Ergebnis:
-{{:moodle:howto:tabellentest2.png?direct|}}
-====Tabelle mit verbundenen Zellen====
-Mit der Eigenschaft ''colspan="Wert"'' lassen sich Zellen verbinden. Dementsprechend müssten in der jeweiligen Zeile weniger <td> sein.
-<btn type="primary" size="xs" icon="fa fa-code" collapse="code3">Code für Tabelle mit verbundenen Zellen anzeigen</btn>
+</collapse> Ergebnis: {{:moodle4:szenarien:tabellentest2.png?direct&}}
-<collapse id="code3" collapsed="true">
+{{:moodle:ghostpixel.gif?nolink20&1}}
+=== Tabelle mit verbundenen Zellen ===
+Mit der Eigenschaft ''colspan="Wert"''  lassen sich Zellen verbinden. Dementsprechend müssten in der jeweiligen Zeile weniger <td> sein.
+<btn type="primary" size="xs" icon="fa fa-code" collapse="code3">Code für Tabelle mit verbundenen Zellen anzeigen</btn> <collapse id="code3" collapsed="true">
 <code>
 <table width="100%" border="1">
-	<tr>
+    <tr>
-		<td width="33.3%">Inhalt der ersten Zelle</td>
+        <td width="33.3%">Inhalt der ersten Zelle</td>
-		<td width="33.3%">Inhalt der zweiten Zelle</td>
+        <td width="33.3%">Inhalt der zweiten Zelle</td>
-		<td width="33.3%">Inhalt der dritten Zelle</td>
+        <td width="33.3%">Inhalt der dritten Zelle</td>
-	</tr>
+    </tr>
-	<tr>
+    <tr>
-		<td>hier beginnt die zweite Zeile</td>
+        <td>hier beginnt die zweite Zeile</td>
-		<td colspan="2">Diese Zelle verbindet zwei Zellen und ist daher doppelt so breit</td>
+        <td colspan="2">Diese Zelle verbindet zwei Zellen und ist daher doppelt so breit</td>
-	</tr>
+    </tr>
-	<tr>
+    <tr>
-		<td>diese Zeile hat wieder drei Spalten</td>
+        <td>diese Zeile hat wieder drei Spalten</td>
-		<td></td>
+        <td></td>
-		<td></td>
+        <td></td>
-	</tr>
+    </tr>
 </table>
 </code>
-</collapse>
-Ergebnis:
-{{:moodle:howto:tabellentest3.png?direct|}}
+</collapse> Ergebnis: {{:moodle4:szenarien:tabellentest3.png?direct&}}
 {{tag>moodle-editor}}