Vergleich einer Seitengestaltung mit und ohne Spaltenlayout

Spaltenlayout und Abstände sind wichtig für ein schönes Layout

Tabs

Hallo und herzlich Willkommen,

in diesem Kurs finden Sie eine erweiterte Tabelle und ein Spaltenlayout. Im Gegensatz zur erweiterten Tabellen verhält sich das Spaltenlayout responsiv, d.h. die Spalten brechen bei abnehmender Bildschirmgröße um und werden untereinander dargestellt. Wie Sie solche Spalten erstellen können erfahren Sie in unserem Lernmodul Seitengestaltung im "Kapitel: "Spaltenlayout einfügen" - Responsives Designelement" (Link öffnet Kapitel in einem neuen Tab).

Um einen Unterschied zu sehen, verkleinern Sie das Browserfenster, öffnen Sie den Bildschirmgrößentest des Browsers oder loggen sich mit einem Tablett/Smartphone ein.

Beispiel mit einer erweiterten Tabelle:

	E-Learning Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at magna et enim euismod malesuada eget eu quam. Aenean eget nulla id purus tristique aliquam. Pellentesque egestas lectus sed sem commodo aliquet. Quisque porta lectus sed augue tristique, a eleifend ligula fringilla.		E-Assessment Maecenas sit amet nisl euismod augue tempus pharetra. Etiam ut lectus id massa consequat porttitor ut eu arcu. Nam in tortor fermentum, tincidunt erat vitae, auctor justo.

Beispiel mit dem Spaltenlayout.

E-Learning

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at magna et enim euismod malesuada eget eu quam.
Aenean eget nulla id purus tristique aliquam.
Pellentesque egestas lectus sed sem commodo aliquet.
Quisque porta lectus sed augue tristique, a eleifend ligula fringilla.

E-Assessment

Maecenas sit amet nisl euismod augue tempus pharetra.
Etiam ut lectus id massa consequat porttitor ut eu arcu.
Nam in tortor fermentum, tincidunt erat vitae, auctor justo.

Wenn Sie sich mit einem Handy einloggen wird die erweiterte Tabelle unverändert dargestellt (links). Durch das Spaltenlayout (rechts) brechen die Spalten um und werden untereinander dargestellt. Dadurch geht nichts am linken oder rechten Rand verloren:

Für das Spaltenlayout wurden die folgenden Einstellungen gewählt:

Quellenangabe für das Kachelbild

Kachelbild designt mit: ChatGPT, OpenAI. Bild generiert am 01. Oktober 2024, basierend auf der Eingabe: 'A colorful, visually engaging image showcasing a column layout in ILIAS. The layout should illustrate how columns are used to organize content in a clean, modern design. Incorporate bright colors such as orange, blue, green, and purple to create a vibrant yet professional look.