Pimp Your Tables! Tutorial + Template

in howto •  10 months ago

Want to have absolute control over your tables?
All your work organised and compact?



Image courtesy of @ewkaw


Here's an example of what you can do with your table, keeping it as compact as possible:

Alligned left
Center alligned
Alligned right
Regular text
Text hyperlinked
Not hyperlinked
Again hyperlinked
Not hyperlinked
Hyperlinked
Not hyperlinked
Hyperlinked
Not hyperlinked
Hyperlinked

Above empty space for example
Text hyperlinked
Not hyperlinked
Again hyperlinked
Not hyperlinked
Hyperlinked
Not hyperlinked
Hyperlinked
Not hyperlinked
Hyperlinked

Above empty space for example
Text hyperlinked
Not hyperlinked
Again hyperlinked
Not hyperlinked
Hyperlinked
Not hyperlinked
Hyperlinked
Not hyperlinked
Hyperlinked

Above empty space for example
Reg. hyperlinked
Not hyperlinked
Again hyperlinked
Not hyperlinked
Hyperlinked
Not hyperlinked
Hyperlinked
Bold not hyp.
Bold hyperlinked

Above empty space for example

Like what you're seeing? Here's how it's done:


Template code
(Fear not, for an explanation follows!)


|<h6>Alligned left</h6>|<h6><center>Center alligned</center></h6>|<h6>Alligned right</h6>|Regular text|
|-|-|-:|-|
|<sup>**[Text hyperlinked](URL)<br>Text not hyperlinked<br>[Again hyperlinked](URL)<br>Not hyperlinked**</sup>|<center><sup>**[Text hyperlinked](URL)<br>Text not hyperlinked<br>[Again hyperlinked](URL)<br>Not hyperlinked**</center>|<sup>**[Text hyperlinked](URL)<br>Text not hyperlinked<br>[Again hyperlinked]()<br>Not hyperlinked**</sup>|[Regular hyperlinked](URL)<br>Regulat not hyperlinked<br>[Again hyperlinked](URL)<br>Not hyperlinked|

Feel free to copy and paste this into your post, and replace the "texts" and "URLs" with whatever you wish.

*Disclaimer: The example only shows first 4 lines. Feel free to add as many as you want.

*Note: To have less columns, simply erase the last | and everything behind it in every line.
To have more columns, simply add text after the | and add another | at the end of the code in every line.


Tools used for text


Result:
Centers text
Smaller text that floats

smaller text that sinks
Makes you text italic
makes your text bold
Makes your text a hyperlink

Creates an empty line

Bold, smaller text+line break above & below

Code:
<center>"Your text here"</center>
<sup>"Your text here"</sup>
<sub>"Your text here"</sub>
<i>"Your text here"</i>
<b>"Your text here"</b>
["Your text here"](Your URL here)
<br>

<h6>"Your text here"</h6>


Tools used for table


Result:

Code:
|Header 1|Header 2|Header3|
|-|-|-:|
|L|<center>C</center>|R|

*Disclaimer: Because it otherwise breaks the line I only wrote down L for Left, C for Center and R for Right in the code.


Explanation of use


  • First line of code:

<h6></h6> in the "header section" of the table makes the titles of the columns look prettier. Feel free to omit or change to your liking.

  • Second line of code:

|-| command makes your text in cells allign from left to right.
|-:| command makes your text in cells allign from right to left.
|:-:| command supposedly makes your text in cells allign to center, but it doesn't work for me. Plus, I like the freedom of <center></center> because it allows me to make just one line alligned to the center, not all.

  • Third line of code:

First you type down whatever effect you want for your text.
I wanted it bold, smaller, and floating, so I began with <sup>**"Text here".
At this point you could also use <sub> if you wanted your text smaller and sinking.
Example: This is What the <sup> command does. and This is what the <sub>command does)

*Note how I don't type **</sup> just yet. That would break effect on any text behind the **</sup>. I type down **</sup> when I no longer want the bold, smaller and floating text. After that command all text is normal.

I then inserted some text - both hyperlinked and plain text - and forced them into a new line each, using the <br> command.
Without the <br> command the text wouldn't break into a new line and you would just have continuous text. Not very pretty.

*Note: For the empty line in the first table (top of page) I simply wrote down <br><br>. You can add as many of these in a row as you wish and anywhere you wish, and it will leave the same amount of empty lines. This is useful if you wish to make all items begin at the top, or at the bottom. Example:

ReferenceWithout breaksWith breaks
at end of code
With breaks
at start of code
Text hyperlinked
Text not hyperlinked
Hyperlinked
Not hyperlinked
Hyperlinked
Not hyperlinked
Hyperlinked
Text hyperlinked
Text not hyperlinked
Hyperlinked
Text hyperlinked
Text not hyperlinked
Hyperlinked








Text hyperlinked
Text not hyperlinked
hyperlinked

Here's the raw code behind this example:

|Reference|Without breaks|With breaks<br>at end of code|With breaks<br> at start of code|
|-|-|-|-|
<sup>**[Text hyperlinked]()<br>Text not hyperlinked<br>[Hyperlinked]()<br>Not hyperlinked<br>[Hyperlinked]()<br>Not hyperlinked<br>[Hyperlinked]()**</sup>|<sup>**[Text hyperlinked]()<br>Text not hyperlinked<br>[Hyperlinked]()<br>**</sup>|<sup>**[Text hyperlinked]()<br>Text not hyperlinked<br>[Hyperlinked]()<br><br><br><br><br>**</sup>|<sup>**<br><br><br><br>[Text hyperlinked]()<br>Text not hyperlinked<br>[hyperlinked]()**</sup>

*Note: If you would put too many <br> commands at the end of the code, it would only extend the table and leave a blank gap at the bottom. If you would put too many <br> at the beginning it would also just extend the table, but leave a bigger gap at the top.


Tips and tricks:


  • using the <center></center> command in the "middle" of the table's code, you can effectively allign to center exactly 1 line in the chosen column.

  • Using any of the Text tools, you can make every line of text (or even every letter) appear different. One can be bold, the other Italic, the next small and floating, ... Just make sure to end the codes, or you'll be left with a very funky mumbo jumbo (that corrupts the table).

Example:

Result:
This text is Madness.

Code:
<sup>This</sup> <b>text</b> <i>is</i> <sub>Madness</sub>.

  • The raw code doesn't look very organised and it's easy to get lost in the wall of text. Use Ctrl+f to navigate and search for what you're trying to find.

  • If you want to see the raw text behind this post (or any other), just replace "steemit" for "steemd" in the link.

Example:
https://steemit.com/howto/@svashta/pimp-your-tables-tutorial-template -----> Change steemit to steemd----->
https://steemd.com/howto/@svashta/pimp-your-tables-tutorial-template

That's it!
Easy, huh?


I found this to be the easiest and most effective way to present your work in a compact manner at the end of your posts. Hope it helps you also! :D

If I forgot to explain anything, or if you have suggestions to make it easier to understand, or if you have any questions, please let me know in the comments below.

Svashta_gif.gif
Gif by @rocking-dave

Should you find this post after the 7 day period and wish to throw me an upvote, please consider upvoting a newer post of mine. Thanks!

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:  

I've hunted online for help with formatting and coding. Never found what give us here. Thanks for this!

·

Happy to hear you've finally found what you're looking for! :D
If you need help with anything, do let me know! :D

Excellent Reference, this could be useful to anyone wanting to learn more about how to do these text this is not something we may know right away when new to steemit and yes i could use this too thanks for your Reference

·

Thanks! I'm glad you find it useful! :D
The "usual" tables can easily turn out huge, and I mean HUGE, the moment you have more than 10 lines..
I wanted to make the table smaller and ended up learning a whole lot of new stuff haha :D
Hopefully it's written in an understanding enough way for everyone to enjoy! :D

Oh, and, one quick thing I've come across recently:

You can make your text red!


How, you ask?
Here's the code:
<div class="phishy"><b>You can make your text red!</b></div>

Great Post man Glad You Made it. Thank you so much for sharing it with us all. You have been so generous deserve the UPVOTES and RESTEEMS. God Bless You. Peace.

·

Thanks! I hope it's written clear enough to understand and not just a bunch of messy scribbles!
If you have an idea on how to make it easier to understand, let me know! :D

·
·

Well I will tell you after I try to make a table myself very soon :) I am sure it will show in my post if I did right at all ::P Lolz ... Well i think it is well written to be understood with even little to none knowledge of programming and formatting so it is cool :P Good Work. Take Care.

·
·
·

Hope it works! :D
If it doesn't though.... Feel free to ask questions :D

·
·
·
·

Well I have finally found time to get your post full attention... :) I can say that the explanation is straight forward and now I am going into practice mode if something comes up :P Be sure I will be knocking on ya door. :)

·
·
·
·
·

Haha awesome! :D
I'm expecting to hear from you sooooon! ;D

This post has received a 3.23 % upvote from @upmyvote thanks to: @svashta. Send at least 1 SBD to @upmyvote with a post link in the memo field to promote a post! Sorry, we can't upvote comments.

This Post is resteemed by @resteemitnow

|| POST RESTEEMED + UPVOTED ||

Want to Boost your Posts?

Introduction Post Read here

Just send 0.060 SBD NOW

Wow, this is amazing....

I was planing of doing a markdown tutorial. I think i would learn and add tips here

·

Thanks! :D

Do it! For people just starting out with posting on the STEEM blockchain - especially those who came here via Facebook and other "easier" websites... using even the simplest "codes" in Markdown can be, and is a real challenge!
So explaining Markdown as easily as possible is very welcome... Everyone likes pretty posts, right? :D

That's a super useful post! Great job!

·

Thanks! :D

Excellent tutorial! :D

·

Thanks! :D Glad you found it useful! :D