Making posts which contain two columns. / Vefassen zweispaltiger Artikel.steemCreated with Sketch.

in html •  7 years ago  (edited)

English

Again and again I have been asked how to write articles which consist of two or more columns. Thus I am explaining it again and again (and I am happy to contribute a little bit to the success of the community by doing so).
The last person who asked me was @liliana.duarte who suggested to write a little article about it - and here it finally is. :)

Two or more columns can be inserted by utilizing HTML-tables, which look like this:

  • A table begins with <table> and ends with </table>.
  • Every row begins with <tr> and ends with </tr>.
  • Every column begins with <td> and ends with </td>.

That's it. :)

In case you are interested, here are a few other HTML tags which I also use rather often:

  • A paragraph begins with <p> and ends with </p>.
  • You can force to begin with a new line by adding <br>.
  • A horizontal line is inserted by the tag <hr>.
  • To center text just use <center> ... </center>.
  • To create titles in bigger letters use <h1> ... </h1>. (By using h2, h3, h4, ... instead, you can create titles in somewhat smaller letters.)
  • You can write text bold by using <strong> ... </strong> (or also <b> ... </b>).
  • You can write text italic by using <em> ... </em>.

Of course these are just very few examples for possible html tags. You can find more formatting options here.

I prefer to use the "Raw HTML" editor when writing Steemit articles, but also the 'markdown' editor recognizes HTML.

Have fun practicing the above! :)

Deutsch

Wieder und wieder werde ich gefragt, wie man zwei- oder mehrspaltige Artikel verfasst - wieder und wieder erkläre ich es (wobei es mir durchaus Freude macht, damit ein kleines bisschen zum Erfolg der Community beitragen zu können).
Zuletzt wurde ich von @liliana.duarte danach gefragt, die mir vorschlug, doch einen kleinen Artikel darüber zu schreiben - der nun endlich hier erscheint. :)

Zwei oder mehr Spalten können mit Hilfe von HTML-Tabellen eingefügt werden, die folgendermaßen strukturiert sind:

  • Eine Tabelle beginnt mit <table> und endet mit </table>.
  • Jede Zeile beginnt mit <tr> und endet mit </tr>.
  • Jede Spalte beginnt mit <td> und endet mit </td>.

Das ist alles! :)

Falls ihr euch für andere HTML-Tags interessiert, die ich des Öfteren nutze, hier eine kleine Auswahl:

  • Ein Absatz beginnt mit <p> und endet mit </p>.
  • Man kann einen Zeilenumbruch durch den HTML-Tag <br> erzwingen.
  • Eine horizontale Linie wird durch den HTML-Tag <hr> eingefügt.
  • Um Text zu zentrieren wird <center> ... </center> benutzt.
  • Um Überschriften in größerer Schrift darzustellen, wird <h1> ... </h1> verwendet. (h2, h3, h4, ... erzeugen etwas kleinere Schriftgrößen.)
  • Die Tags <strong> ... </strong> (or also <b> ... </b>) erzeugen Fettschrift.
  • Die Tags <em> ... </em> erzeugen Kursivschrift.

Das sind natürlich nur einige wenige Formatierungsoptionen. Weitere Möglichkeiten finden sich here.

Ich selbst bevorzuge für meine Steemit-Artikel den "Raw HTML"-Editor, aber auch der 'markdown'-Editor erkennt HTML-Befehle.

Viel Spaß beim Ausprobieren! :)

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

@jaki01 got you a $1.57 @minnowbooster upgoat, nice!
@jaki01 got you a $1.57 @minnowbooster upgoat, nice! (Image: pixabay.com)


Want a boost? Click here to read more!

Wenn du deinen Artikel über den Link öffnest oder F5 drückst, während das Popup angezeigt wird, wird es ganz anders dargestellt. Bei der Prüfung deines Codes habe ich gesehen, dass du einige <p> Elemente schließt, aber nicht öffnest, daher könnte das Problem kommen ;)

Ansonsten eine gute Hilfe für die HTML-Einsteiger :)


Zum Schnellen finden solcher Sachen würde ich dir https://validator.w3.org empfehlen!

Danke - hab jetzt mal manuell durchgeschaut, müsste eigentlich jetzt alles in Ordnung sein.

Das ist halt ein ziemliches Gefriemel, da der Artikel HTML-Tags (Quelltext) anzeigen soll, ohne dass sie eine formatierende Wirkung haben (andere Tags sollen aber tatsächlich formatieren). Dazu kommt, dass ich vom Urlaubsaufenthaltsort mit sehr langsamer Internetverbindung eingeloggt bin, so dass auch Aktualisierungen nur langsam geladen und angezeigt werden ...

Jo, sieht jetzt in Ordnung aus :) Ich kann das verstehen, habe in meinem letzten Artikel auch ziemlich zu kämpfen gehabt, um das so perfekt hinzukriegen, wie es jetzt aussieht. Hatte am Ende des kürzeren Textes ein paar <br> eingefügt, damit der Text nach oben rutscht und in gleicher Höhe wie die linke Spalte angezeigt wird. Echt ein Kampf mit diesem Editor.

Der 'Validator' meckert übrigens immer noch, aber ich habe jetzt nicht genug Zeit (und bin einfach mal stur der Meinung, jedes p auch geschlossen zu haben, obwohl Software ja bekanntlich immer Recht hat und 'Biobrains' wie ich sich immer irren, haha). Danke noch mal für deinen Hinweis! :)

Ja zu Ernst sollte man den Validator auch nicht nehmen. Der ist ziemlich streng und meckert wegen jeder Kleinigkeit. Die meisten Fehler dort sind von der Steemit-Seite selbst :)

These are the formattings I have been looking for, where have you been all my Steemit life @jaki01, btw appreciate it, this is a BIG help. Cheers!

Great and helpful post, particularly with the example of a very good reason to use two columns.

I'm outta VP atm, but will resteem as a token of my esteem =)

Edit: one of the complications of posting in two languages is links. I don't speak German, so the link to the HTML primer was less useful to me than an English language link. Clearly, there is more involved to posting multiple languages than just translating text, and that is a pretty good example of the kinds of additional considerations that apply.

Thanks again!

Thanks, I will just add another link (actually my wrong memory told me that SELFHTML was written in English language). :)

Wow..another nice post with very good aricle from @jaki01
Your post includes very useful to me...

  1. Your presentation and written skill is execellent my dearvfriend
  2. I think you have more creative ideas..
  3. Your html tips and tricks very useful to all steemians..
  4. Thank you so much sharing your valuble knowledge with us..
  5. I always aporecuate your every posts..wel done my dear friend @jaki01

Upvoted abd resteemed with my followers
Hapoy steeming..keep it up post..
Cheers!..

Thanks! :)

Great! Now I can share your post to whom asked me!!
I will resteem it tomorrow or after for more visibility :)

Can you tell me how to upload images side to a paragraph or adjacent to each other. I really wonder how to doit.

Just upload the image in one column of a table row and write the text within the other column of the same row.

ok, thanx for you reply.

Great html information..
upvote and resteem

Dankeschön für die tips! Muss auch endlich mal umsteigen... kenn mich leider nur nicht sooo gut aus! :/ Habs mal abgespeichert :)

Oh wow, danke für den hilfreichen Post und die super Erklärung! Werde das sicher mal in meinen Posts anwenden. Thank you!

Wow, this is needed by steemit users. Because of the technique of writing one that requires a certain technique. Thereby can produce good writing, useful, and easy to read.

Great post @jake01. I resteem your post thanks for sharing your tips this is very helpful👍. Especially to the newest steemit user also like me.

I am trying to make table now. Wow it works!
I am trying to make table now. Wow it works!
Thank you ! Thank You !

I appreciate this and I have followed you. Nice! :)

thank you so much for the tips. I am more of esteem user. but would love to use it next time when i post using my pc. thank

Like reading a newspaper. A very useful tips! I will copy this article and formatting. Thanks.

Information is very useful for all steemians, especially for those newcomers.

Thank you for share this post Sir @jaki01, this is what I was waiting for this, because every time I read your postings is definitely in the shape of 2 column, looks very neat if divided into 2 columns like this. I will try as soon as possible. Thanks for sharing Sir @jaki01, is very useful. ;)

Thanks jaki01!
Usefull post as I'm still learning how to make better posts with html.

I wrote an article closely related to the asian handicap quiz contest the other day. You might recognise yourself in this one Gambing Psycholgy | What makes an Expert Gambler ?

Useful! I wondered how that was being done. Is it possible to control the size of the columns in any way? I'm thinking with regards to putting a third column between the other two and having a divider that runs down the middle to separate?

There are some options. Check here for example. (I didn't test if they work within the Steemit text editors though.)

Thanks! I'll see what I can get to work. I suspect it'll have to be a workaround on Steemit if it's style orientated.

Very useful information, I will practice it.

you have surfaced some valuable tips and tags of html in your blog, perfect post for a new user like me, worth reading your post...will apply in my next post these techniques..thank u.

You can also do this with markdown

header1 | header2
  --- | ---
cell1 | cell2

Also, the above was done with just two great big huge cells.
If you wanted things aligned better, you can add more table rows.

Yes, matter of taste (I just like the good old HTML). :-)

Fantastic post! Thank you so much for the valuable information. I like the comment above which states its like writing a newspaper. What a great idea! Resteeming to save for future reference.

i made post too but didn't used it because i always wonder how these type of post's are made thanks for telling in details :) it will help a lot

Sehr schön, danke für die Infos.

Sehr toller Artikel! Am Anfang hatte ich auch geglaubt, dass diese Spalten nur mit Tabellen gehen. Das große Problem ist jedoch, dass man die Tabellenreihenweite nicht einstellen kann, und deswegen kann es passieren das die Tabellen sehr ungleich verteilt sind, und das dann nicht so schön aussehen kann!

Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Hallo, ich heiße infinitelearning und habe einen Steem Account

Um dies zu lösen, geht es schneller und schöner, wenn man seine Spalten in sogenannte DIV Boxen haut, und ihnen die Klasse "pull-left" oder "pull-right" verpasst.

Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Hallo, ich heiße infinitelearning und habe einen Steem Account





Außerdem kann man mit den Div Boxen viel schöner arbeiten. Werde demnächst auch noch einen ausführlichen Artikel darüber schreiben :-)

Thanks!
I knew there are other possibilities, but I guess that for most people who did ask me, a simple HTML-table is the most easy to utilize option ...

Great! This is much useful information! Thanks a lot for sharing. ;)

Thank you for sharing! It's probably just a matter of practising but right now HTML codes continue to look chinese to me! :/ I'll try to improve with your tips.

This I have to looking avery day. How to write articel two colums. Thanks very much sir. This article very helpful for me. If you are free lets walk to my blog. Your upvote very motivating me. Nice to meet you sir. Have nice day.

Thank you for the great information.
I dunno where to ask about post like this since I surf in this platform.
Thank you @jaki01.

Using html easier than using markdown,

Danke @jaki01 für die Anleitung, ich habe danach gesucht und was auch auf deutsch ist. Denn ich überlege damit meine Post in englisch und deutsch zu machen und dazu genau diese 2 Spalten zu benutzen. Danke, Upvoted :-)

waw thanks alot I didnt know how to do that.

A very valuable lesson. I am still blind about this lesson. Thank you friend. I will follow the lesson from you.

Ah didnt knew you could use html. Tnx for sharing

thank you for sharing this its a great information @jaki01

Thanks for sharing the tips with us. It would be really helpful sometimes while creating post :D

Great tips saved it for later ;) keep the good work up ;) enjoy the weekend!

Well explained and thank you again for sharing it, it's been along time that I look on the internet the tags HTML to be able to use them on my posts. Upvoted and followed forever

Great informative post , very helpful , i will use this in my next post:)
Resteemed & Followed & Upvoted

wow thanks fot this informatio i never knew that i always wonder how these type of post's are made thanks for telling,,

HTML tags that you send my @jake01 is very useful for new users of social media Blog steemit, maybe also for other steemit PAL, sorry my English kinda messy. I am a native of Aceh Indonesia.
Greetings

@safwaninisam

Can you put pictures inside a table?

Sure! :)

Okay thanks. I must be doing something wrong because the link text shows around the photo.

Loading...

nice post.. upvoted and followed
Have a look into my blog, you may like any of my posts :-) keep voting @piyushkansal
gif.gif

Guter Tipp, danke. Ich hatte mich schon gefragt wie das geht.
Dann muss man wohl Mark Down und HTMLmischen. Ist ein bisschen komisch 2 Sprachen/Syntaxe zu mischen, aber das Ergebnis zählt.

Geht auch im reinen HTML-Editor ...

@jaki01,
That's very useful information. Actually thank you very much for such high detailed post! Really appreciate your effort!

Cheers~

As you appreciate my effort I will not forbid you to upvote my article. :-)

Daran habe ich eben erst gestern gedacht und Du lieferst freundlicherweise gleich die Lösung. Perfekt. Vielen Dank.

Vielen Dank für diesen Post, das probiere ich gleich aus :-)