Feine Linien

Fortsetzung von WordPress-Tabellen mit KompoZer. Es geht darum, dass Code mit KompoZer 0.8b3 erstellt und dann in das WordPress-HTML-Fenster übertragen wird. Speziell geht es um die feinen Linien für Tabellen. (Andere Fortsetzungen sind denkbar, wenn im Kommentar danach gefragt wird.)

1. Der Tabellen Code sieht im WordPress-HTML-Fenster von <table …. bis zum </table> so aus:
<table style=“text-align:left;width:100%;“>
<tbody>
<tr style=“background-color:gold;“>
<td>Deutsch</td>
<td>Englisch</td>
<td>Bahasa Indonesia</td>
</tr>
<tr>
<td>Bitte</td>
<td>Please</td>
<td>Silahkan</td>
</tr>
<tr>
<td>Danke</td>
<td>Thank you</td>
<td>Terima kasih</td>
</tr>
<tr>
<td>Schön</td>
<td>Beautiful</td>
<td>Indah</td>
</tr>
</tbody>
</table>

Und ergibt im WordPress-Visuell-Fenster dies:

Deutsch Englisch Bahasa Indonesia
Bitte Please Silahkan
Danke Thank you Terima kasih
Schön Beautiful Indah

Die geplanten Linien mit 1px Breite in der Farbe #63f sollen bei der gesamten Tabelle nur oben und links auftreten und bei allen Zellen nur rechts und unten, so dass keine Linie doppelt erscheint.

2. Mit KompoZer 0.83b eine neue Seite öffnen und den blauen Tabellen-Code von hier in den Quelltext statt des <br> zwischen <body> und </body> einfügen. In der geteilten Ansicht kann die Trennlinie weit nach oben geschoben werden.

Die Tabelle hier drunter entsteht mit den folgenden Punkten 3. und 4. wenn der Code vom Kompozer nach WordPress in das HTML-Fenster kopiert wird.

Deutsch Englisch Bahasa Indonesia
Bitte Please Silahkan
Danke Thank you Terima kasih
Schön Beautiful Indah

3. Im Code die Breite von 100% auf 80% ändern. Einfach bei KompoZer im Dialog die 100 durch eine 80 ersetzen.

4. <table> in der Statuszeile rechtsklicken und Inline-Styles wählen. Beim Register ‚Begrenzungen‘ das Häkchen von „Alle vier Seiten verwenden…“ entfernen, denn die Begrenzung soll nur oben und links auftreten. Deshalb nur unter ‚Oben‘ und ‚Links‘ den Stil auf “ solid “ setzen, die Breite dort auf “ 1px “ und die Farbe auf “ #63f „. OK.

5. Beim KompoZer die Einfügemarke in das Wort „Deutsch“ setzen. In der Statuszeile das <td> rechtsklicken und Inline-Styles wählen. Diese Zelle erhält wie bei 4. die gleichen Inline-Styles aber für die Linien rechts und unten.
Das <td style=“border-right: 1px solid rgb(102, 51, 255); border-bottom: 1px solid rgb(102, 51, 255);“> auf alle <td> mit Suchen und Ersetzen übertragen. Danach den kompletten table-Code in das HTML-Fenster von WordPress kopieren, so wie hier.

Deutsch Englisch Bahasa Indonesia
Bitte Please Silahkan
Danke Thank you Terima kasih
Schön Beautiful Indah

6. Die unterschiedliche Begrenzung von links und oben fügt sich mit den Begrenzungen von rechts und unten erst zusammen, wenn der Inlinestyle “ border-collapse: collapse; “ verwendet wird. Diesen beherrscht KompoZer 0.8b3 (noch?) nicht. Deshalb einfach das von Hand als Erstes hinter <table style=“ einfügen. Dann sieht es so aus:

Deutsch Englisch Bahasa Indonesia
Bitte Please Silahkan
Danke Thank you Terima kasih
Schön Beautiful Indah

7. Bis zum Ändern des Themes hier war auch die unterste Linie fein blau. Hier nun fehlt sie. Einfach mal varieren: Im table-style die beiden border-top und -left zu einem einzigen border: 1px ändern. Das klappt hier, wird aber nicht mehr abgebildet.
Die ganze Seite hier als pdf. Außerdem: Weiter per Kommentar oder Kurs1a

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s