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 Text- und Medienfelder erstellt werden.

Tabelle anlegen

Navigieren Sie zunächst in den gewünschten Kurs.
Legen Sie ein 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 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: Selfhtml - Aufbau einer Tabelle

Tabelle mit 3 Spalten die jeweils 33,3% breit sind

Code für Tabelle mit 3 Spalten anzeigen

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

Ergebnis: 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

Mit bgcolor=„Farbwert“ lassen sich Zeilen und Zellen einfärben.

Code für Tabelle mit Hintergrundfarben anzeigen

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

Ergebnis:

Tabelle mit verbundenen Zellen

Mit der Eigenschaft colspan=„Wert“ lassen sich Zellen verbinden. Dementsprechend müssten in der jeweiligen Zeile weniger <td> sein.

Code für Tabelle mit verbundenen Zellen anzeigen

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

Ergebnis:

moodle-editor