| Tables in Blogger, made easy You know the HTML structure of tables? Look at for example w3schools or remember this: ‹table› starts and ‹/table› ends a table. (In reality ‹ and › are full sized smaller and greater signs. I just can’t show them here in Blogger!) ‹tr›, table row, starts a new row, ‹/tr› ends the row. ‹td›, table data, stands at the lowest level and encloses the actual content, ended by ‹/td›. It gives you a new colum. Then there is ‹tbody› (You might like to know the parameter ‹pre› and ‹/pre› to enclose pre-formatted enties, so you can spare all those ‹br›s or rather ‹/br›s (line break) as carriage return at the end of lines.) So here how you get a two column layout: ‹table›‹tr›‹td› to start with, then ‹/td›‹td› to switch to column two, the right hand column, and at the table’s very end ‹/td›‹/tr›‹/table›. (Copy and paste this from ‹table … /table› into your blog’s HTML view, replace the half quote signs with ordinary HTML greater and smaller than signs.) In Blogger switch between Compose (? Verfassen) and HTML when composing, and you’ll see. Or have a look at the simple table I’ve at http://blogabissl.blogspot.com/2015/08/gelegenheit-und-reue.html#Chi. Just mark the table where you like and have your browser show you the HTML code. (If the number of lines is equal, it looks better.) | Tabellen mit Blogger, ganz einfach. Hier bissl HTML, siehe etwa Selfhtml: ‹table› und ‹/table› umklammern eine Tabelle. (Aber bitte, die ‹- und ›-Zeichen hier sind normal große Kleiner- und Größerzeichen, auf der Tastatur neben dem Y! Blogger nimmt sie mir nur nicht lesbar an.) ‹tr›, table row, beginnt eine neue Zeile, ‹/tr› beendet sie. ‹td›, table data, umfängt eigentlichen Inhalt, und macht eine neue Spalte. Ende mit ‹/td›. Dann gibt’s noch ‹tbody› and ‹/tbody› , warum auch immer. Geht auch ohne.. Schön ist der Parameter ‹pre› und ‹/pre›, um vorformatierten Text einzubinden. Man spart sich alle ‹br›s (line breaks) oder ‹/br›s (line break). Nun also zu den zwei gewünschten Spalten: ‹table›‹tr›‹td› und los geht die Tabelle. Dann beim Spaltenwechsel ‹td›‹td›. Jetzt folgt der Inhalt der rechten Spalte. Am Ende heißt’s in HTML wieder ‹/td›‹/tr›‹/table›. Im Blogger wechselt man beim Komponieren oben (Reiter) zwischen Verfassen und HTML, and dann sieht man’s schon. Hier ein einfaches Beispiel: http://blogabissl.blogspot.com/2015/08/gelegenheit-und-reue.html#Chi. Markieren Sie sich die für Sie interessanten Stellen und lassen Sie Ihren Browser den ausgewählten Quellcode (also HTML) zeigen. |
Let me continue in English only.
If you need a fancy table, like here, you might want to play with the widths.
Fist of all (or actually when you’ve added the colum sizes) tell the ‹table› entry the total width in pixels, like ‹table width="1180"›, then follow up with the “colgroup”. Each width stays for one column, like 430 pixels at left and 780 for the second, the right colum, in this example. German takes a lot more space …
So you must tell the browser this:
‹table style="width: 1180px;"›
‹colgroup›
‹col width="430"›
‹col width="780"›
‹/colgroup›
And here’s my latest suggestion, complete to copy-paste and then change the ‹ › signs.
Forget sizing the table, size the colums in relative terms (%)
‹table›
‹colgroup›
‹col width="60%"›
‹col width="40%"›
‹/colgroup›
‹tr›‹td› … content left column …
‹/td›‹td› … content right column …
‹/td›‹/tr›
‹/table›
Copy-paste, then correct the ‹ › signs. When switching from HTML to “compose” (»Verfassen«) you see the table and you can start to write into the colums. You may want to adjust the table contens and or the relative width to get a nice fit.
If you want a third, middle column to better separate the two columns, just add it with more or less dummy content (color white to hide text).
If you aren’t sure what you do and you don’t want to mess up a previous version, sand box in a fresh post, past it into your real post when you like it, and then delete the “fresh post”.
Permalink: http://blogabissl.blogspot.com/2015/08/tables-in-blogger.html
Tables, Columns, zweispaltig, Spalten, rows,
Keine Kommentare:
Kommentar veröffentlichen