====== Tabellenübung ====== Erstelle eine Tabelle, welche wie folgt aussehen soll: {{:inf:css:uebungen_zur_elementgestaltung:03_tabellenuebung.png?300|}} ===== Parameter ===== * Die Überschrift soll im -Tag mit einer Caption erstellt werden. \\ * Die Schriftfarbe und das permanente Großschreiben (CSS-Tag: text-transform) in der Überschrift soll in einem externen Stylesheet erledigt werden. \\ * Die Einträge "1. Einheiten" und "2. Einheiten" sollen mittels table-header (th) erledigt werden. Die Formatierung dafür soll im Stylesheet passieren. (Schriftfarbe, Buchstabenabstand, ...) * Backgrounds für die "Zeile x." und "Eintrag x." sollen im CSS-Stylesheet mittels Gruppen, die im HTML-Code einzufügen sind, definiert werden. (.bgblue und .bgred) \\ * Die Abstände der Einheiten vom Tabellenrand können mit dem CSS-Tag "padding: ??px" eingestellt werden. ===== Mögliche Realisierung der Übung ===== Der CSS-Code ist hier einzusehen: \\ body { font-family: Arial; } caption { color: #790045; margin-bottom: 10px; text-transform: uppercase; } th { color: #430298; letter-spacing: 1px; } .bgblue { background-color: #245567; color: #cccccc; } .bgred { background-color: #672455; color: #cccccc; } tr, td { padding: 7px; } ---- Der HTML-Code ist hier einzusehen: Übung - Tabellen
Übungstabelle
1. Einheiten Zeile 1 Eintrag 1
2. Einheiten Zeile 2 Eintrag 2
===== Nützliche Links ===== [[inf:css:Tabellen|Tabellenformatierung mittels CSS in der Wiki erklärt]]