Schritt für Schritt - Tutorial: Telefonnummern - Tabelle
3 - Tabelle stylen
Schriften formatieren
Unsere Telefon-Tabelle sollte nun so aussehen. Es sind alle Daten eingetragen und die Tabelle korrekt formatiert. Nun fehlen uns nur noch ein paar Farben und Linien - auf wichtigdeutsch: Das richtige styling!
Zuerst die einfachen Arbeitsschritte: Markieren Sie das Wort "Telefonnummern" und weisen Sie ihm das Format "Überschrift 4" zu (rechtes dropdown-Menü, untere Zeile in der Icon-Leiste). Dann markieren Sie nacheinander alle Namen und machen sie fett (das dicke B, untere Zeile).
So. Jetzt die Kür...
Tabellen- und Zellenrahmen
Für einen Rahmen um die Tabelle herum klicken Sie in die Tabelle und wählen in der Icon-Leiste den Punkt "Tabellen einfügen/ bearbeiten" (1).
Tragen Sie unter Rahmen (2) eine Rahmendicke in Pixeln ein - in diesem Fall sind es zwei Pixel; die Dicke kann allerdings jeden ganzzahligen Wert annehmen. Klicken Sie dann auf den Karteireiter "Erweitert" (3), um die Rahmenfarbe zu bestimmen.
Klicken Sie hierfür auf den Farbwähler für die Rahmenfarbe (1) und wählen Sie im Popup-Fenster für die farbe den Karteireiter "Palette" (das müssen Sie nicht, aber auf diese Weise fällt es am Anfang leichter, eine einmal gewählte Farbe wiederzufinden). Wählen Sie eine Farbe aus (3), übernehmen Sie die Farbe und klicken Sie auf "Aktualisieren".
Nun hat Ihre Tabelle einen zwei Pixel breiten, blauen Rahmen.
Um jetzt den einzelnen Zellen ebenfalls einen Rahmen zu geben wählen Sie die Funktion "Zellen bearbeiten" (1). Ähnlich wie im letzten Arbeitsschritt wählen Sie eine Rahmenfarbe (2 und 3). Dann wählen Sie im Dropdown-Menü unten im Fenster "Eigenschaften der Zelle" die Option "Alle Zellen der Tabelle verändern" und klicken auf "Aktualisieren" - voilà! Alle Zellen haben einen blassblauen Rahmen. Fast fertig...
Hintergrundfarbe
Eine alternierende Hintergrundfarbe - meist weiß-grau-weiß - erhöht die Übersichtlichkeit einer Tabelle. Wir wollen daher jeder zweiten Zeile noch einen grauen Hintergrund geben. Dafür klicken Sie in der Icon-Leiste auf das Symbol "Zeilen bearbeiten" (1) und wählen im entsprechenden Popup den Karteireiter "Erweitert".
Dann wählen Sie eine Hintergrundfarbe aus (2) und klicken im Dropdown-Menü ganz unten im Fenster (3) die Option "Ungerade Zeilen verändern" an. "Aktualisieren" anklicken und - fertig ist unsere Tabelle!
Telefonnummern |
|
| Horst | 0181 - 567 543 12 |
| Erika | 0131 - 987 654 23 |
| Thomas | 0140 - 987 234 22 |
| Sandra | 0191- 245 612 32 |
Wie gesagt: Spielen Sie ein wenig mit den einzelnen Funktionen. Legen Sie sich in Ihrer Website eine unveröffentlichte Übungsseite an, auf der Sie nach Herzenslust ausprobieren können, welche Möglichkeiten die Tabellenfunktionen von TinyMCE noch bieten. Klicken Sie beispielsweise einmal mit der rechten Maustatse auf Ihre Tabelle - na? So geht die Bearbeitung noch ein wenig schneller. Oder versuchen Sie mal, eine Bildgalerie zu erstellen, das macht man für gewöhnlich nämlich auch mit Tabellen.
Um die Qualität meiner Tutorials stetig verbessern zu können würde ich mich auch über ein kurzes Feedback per
E-Mail freuen.
<< Zurück