Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
moodle4:szenarien:tabellen_in_moodle_formatieren [2023/05/11 11:58] Juliana Haas |
moodle4:szenarien:tabellen_in_moodle_formatieren [2023/06/16 12:33] (aktuell) Juliana Haas |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== Tabellen in Moodle anlegen und formatieren ====== | ====== Tabellen in Moodle anlegen und formatieren ====== | ||
- | 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. | + | 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. |
===== Tabelle anlegen ===== | ===== Tabelle anlegen ===== | ||
+ | |||
- Navigieren Sie zunächst in den gewünschten Kurs. | - Navigieren Sie zunächst in den gewünschten Kurs. | ||
- | - Legen Sie ein [[moodle4:inhalte:aktivitaeten_materialien:textfeld|Text- und Medienfeld]] an. | + | - 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. | - Klicken Sie nun im Editor auf ''Einfügen > Tabelle'' und wählen Sie die benötigte Größe aus. | ||
Zeile 11: | Zeile 12: | ||
==== Über den Editor ==== | ==== Ü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 HTML ==== | + | Ü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. |
- | 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 Text- und Medienfeldes zugreifen und | + | |
- | die Tabelle bearbeiten. | + | |
+ | ==== Über den Quellcode (HTML) ==== | ||
- | HTML Syntax verwendet sogenannte **tags**. Tags werden mit <tag> geöffnet und mit </tag> geschlossen. | + | 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. |
- | 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. | + | HTML Syntax verwendet sogenannte **tags**. Tags werden mit <tag> geöffnet und mit </tag> geschlossen. Eine Tabelle benutzt folgende grundlegenden Tags: |
- | 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. | + | |
+ | * <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]] | 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 === | ||
- | === **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"> |
- | <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> | <code> | ||
+ | |||
<table width="100%" border="1"> | <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> | </table> | ||
+ | |||
</code> | </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> | <code> | ||
<table width="100%"> | <table width="100%"> | ||
Zeile 89: | Zeile 91: | ||
</tbody> | </tbody> | ||
</table> | </table> | ||
+ | |||
</code> | </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> | <code> | ||
<table width="100%" border="1"> | <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> | </table> | ||
+ | |||
</code> | </code> | ||
- | </collapse> | ||
- | Ergebnis: | ||
- | {{:moodle:howto:tabellentest3.png?direct|}} | ||
+ | </collapse> Ergebnis: {{:moodle4:szenarien:tabellentest3.png?direct&}} | ||
{{tag>moodle-editor}} | {{tag>moodle-editor}} | ||
+ | |||
+ |