====== 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.

===== Tabelle anlegen =====

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

{{:moodle:ghostpixel.gif?nolink20&1}}
=== 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>
        <td width="33.3%">Inhalt der ersten 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>
    </tr>
    <tr>
        <td>hier beginnt die zweite Zeile</td>
        <td></td>
        <td></td>
    </tr>
</table>

</code>

</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 ===

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

<code>
<table width="100%">
    <caption>Tabellentitel</caption>
    <thead>
        <tr>
            <th scope="col" width="33.3%">Tabellenüberschrift in Spalte 1</th>
            <th scope="col" width="33.3%">Spalte 2</th>
            <th scope="col" width="33.3%">Spalte 3</th>
        </tr>
    </thead>
    <tbody>
        <tr bgcolor="#eee">
            <td>Zeile mit hellgrauer Hintergrundfarbe</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>weiße Zeile</td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="#eee">
            <td>graue Zeile</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

</code>

</collapse> Ergebnis: {{:moodle4:szenarien:tabellentest2.png?direct&}}

{{: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>
        <td width="33.3%">Inhalt der ersten Zelle</td>
        <td width="33.3%">Inhalt der zweiten Zelle</td>
        <td width="33.3%">Inhalt der dritten Zelle</td>
    </tr>
    <tr>
        <td>hier beginnt die zweite Zeile</td>
        <td colspan="2">Diese Zelle verbindet zwei Zellen und ist daher doppelt so breit</td>
    </tr>
    <tr>
        <td>diese Zeile hat wieder drei Spalten</td>
        <td></td>
        <td></td>
    </tr>
</table>

</code>

</collapse> Ergebnis: {{:moodle4:szenarien:tabellentest3.png?direct&}}

{{tag>moodle-editor}}