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:59] Juliana Haas alte Version wiederhergestellt (2023/05/11 11:58) |
moodle4:szenarien:tabellen_in_moodle_formatieren [2023/06/16 12:33] (aktuell) Juliana Haas |
||
---|---|---|---|
Zeile 15: | Zeile 15: | ||
Ü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 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 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 Text- und Medienfeldes zugreifen und die Tabelle bearbeiten. | + | 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: | HTML Syntax verwendet sogenannte **tags**. Tags werden mit <tag> geöffnet und mit </tag> geschlossen. Eine Tabelle benutzt folgende grundlegenden Tags: | ||
Zeile 31: | Zeile 31: | ||
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. | 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 === | ||
Zeile 56: | Zeile 54: | ||
</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. | + | </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. |
+ | {{:moodle:ghostpixel.gif?nolink20&1}} | ||
=== Tabelle mit Kopfzeile und abwechselnd hellgrauer Zeile === | === Tabelle mit Kopfzeile und abwechselnd hellgrauer Zeile === | ||
Zeile 95: | Zeile 94: | ||
</code> | </code> | ||
- | </collapse> Ergebnis: {{:moodle:howto:tabellentest2.png?direct&}} | + | </collapse> Ergebnis: {{:moodle4:szenarien:tabellentest2.png?direct&}} |
+ | {{:moodle:ghostpixel.gif?nolink20&1}} | ||
=== Tabelle mit verbundenen Zellen === | === Tabelle mit verbundenen Zellen === | ||
Zeile 123: | Zeile 123: | ||
</code> | </code> | ||
- | </collapse> Ergebnis: {{:moodle:howto:tabellentest3.png?direct&}} | + | </collapse> Ergebnis: {{:moodle4:szenarien:tabellentest3.png?direct&}} |
{{tag>moodle-editor}} | {{tag>moodle-editor}} | ||