How To Make Tables (and Proper Code Nesting) on Steemit

reveurgam (60)in #steemit • 6 years ago (edited)

This article demonstrates the use of HTML or MDL to make tables, as well as how to nest coding. This may be easier than using the method I showed in a previous article for creating two columns.

If you're trying to add some "style" to your articles on Steemit, there are some choices from hypertext markup language (HTML) and markdown language (MDL) that you can use. Each of these items is called a "tag"; the one before the text is an opening tag, and the one after the text you're styling is a closing tag. Certain tags do not need both as they are self-closing. Tags within <> are from HTML. Unfortunately, those of you who have studied HTML and MDL may be frustrated because only certain tags from each work. Here are a few that I figured out for you, although I STILL don't know how to underline. In each article, I'll share some tips for you!

A table (aka matrix) is a useful way to display information for your readers, whether it be numbers, letters, words, emoticons or images (as long as you reduce their size). Columns will automatically fill up the space available and will, excepting orphan cells, be of equal width. Width and spacing will be determined by screen size, not by your efforts, and the table will take up the full width available (defined by your device's screen width minus the website's unusable margins). You can actually have only one column in your table, which will display across the available width, including the alternating background row color, although I'm not sure what you'd use it for. :)

Let's start with the easy way to create tables: MDL.

MDL Tables

Markdown Language is about as simple as it can possible get. Put a blank line above the table if there is HTML immediately above, as it may neutralize the MDL. Here are the characters to use.

Spaces around MDL characters are not required. As is usual, Steemit removes extra spaces.
Compact: "cell 1|cell 2|cell 3"
Easier to read during editing: " cell 1 | cell 2 | cell 3 " but the extra spaces will be ignored.
To set up the header (title row), you use a set of a hyphen and an upright post "-|" for each cell. This is required! Place this under the first line (the one that has the titles of the columns) - it can't be placed anywhere else. The number of sets must equal the number of columns, or it won't work. The text on the header line will be bolded automatically.
E.G. If you have four columns, this line should have exactly 4 sets "-|-|-|-|".
You use the upright post "|" to delineate (mark) between cells in a row. A post may be used before the first cell and after the last cell, but is not required.
E.G. "column 1|column 2|column 3|column 4|column 5|"
Empty cells are indicated by using a space " " between posts "| |". The spaces are not required.
E.G. "| | | |" and "||||" will both produce a row with 3 empty cells.
Simple example:

a|b|c|d
-|-|-|-|
e|f|g|h
| | | | |
|||||
|||||
i|j|k|l

a	b	c	d
e	f	g	h



i	j	k	l

Don't use blank lines between lines of the table as the rest of the table will not be formatted.

HTML coding (mostly) works in an MDL table. You can use HTML to add a variety of visual effects, but note that some HTML may negate your MDL.
You can only place one line of the table per line in the editor.
Omitting the last cell of a row will create an empty space at the end of the row.
Adding 1 or more extra (orphan) cells at the end of a row will cause them to be displayed, but they will only be apportioned enough space to show what's in them, and will not be the same width as the other row's cells. A blank orphan cell will be very narrow. See example table below.

Here is a basic table with blank rows, HTML and extra columns on 2 rows.

Header Col.1|Header Col.2|<h3>Header Col.3</h3>
-|-|-|
|row1, cell1|row1, cell2|row1, cell3|
| | | |
| | | |
| row4, cell1|<b>row4, cell2</b>
row5, cell1|row5, cell2|`row5, cell3`|
|row6, cell1|row6, cell2|row6, cell3|||
|row7, cell1|row7, cell2|row7, cell3
row8, cell1|row8, cell2|row8, cell3|row8, cell4
||||
||||
| | | |

row12, cell1|Oops!darned|blank line
This part|of the table|is broken! :(

Header Col.1	Header Col.2	Header Col.3
row1, cell1	row1, cell2	row1, cell3


row4, cell1	row4, cell2
row5, cell1	row5, cell2	`row5, cell3`
row6, cell1	row6, cell2	row6, cell3
row7, cell1	row7, cell2	row7, cell3
row8, cell1	row8, cell2	row8, cell3	row8, cell4

row12, cell1|Oops!darned|blank line
This part|of the table|is broken! :(

There are actually 12 rows in the above table but, due to flaws in how it treats empty cells, empty rows and blank lines, not all are displayed correctly, and some not at all!

Don't forget - some HTML tags will screw up MDL!

HTML Tables

HTML tables are capable of more than MDL, except for the limitations imposed by Steemit. 😭 For example, when you make a website, you can use classes - such as 'colspan=#', where # is a number, to make that cell span # number of cells instead of just one cell - but this doesn't work here. I also tried 'rowspan' and 'style="width:100%"', but those also didn't work, so I guess classes are not available. Given that "style" is a basic function of HTML, not a true class, and is used for inline styling of elements instead of using CSS, it may not be possible to use styling on Steemit, although that's beyond the scope of this article.

MDL generally cannot be used in an HTML table, which presents a challenge only if you want to show coding within a table, since HTML has more functions available on Steemit than MDL. This includes the use of ampersands to display special characters.

Of course, it takes more time to code a table with HTML because you have to use opening and closing tags but you could download a coding editor to use on your computer - many of them offer selections as you type and autofill - such as Microsoft Visual Studio Code, Notepad++, Atom and Sublime (just search for "coding editor list").

Titles & Captions

To produce a title, subtitle or caption, you could use the header tags <h#></h#>, where #=1 to 6 to determine the font size. The <h#> tags can be used above the opening table tag (i.e. before the table), or anywhere between the opening and closing table tags - the title thus styled will always appear at the top of the table. The between-line padding (called line spacing in MS Word) will be different depending on whether it is inside or before the table tags. You'd also be able to create a title with MDL before the first table tag. Note that an h# tag changes the font to a sans serif font.

If you prefer to have the caption below the table, you can use either the h# after the closing table tag. Note how the h# tag changes line spacing, font size, font style and font type.

<h1>h1 Title </h1><h2>h2 Title</h2><h3>h3 Title</h3><h4>h4 Title</h4><h5>h5 Title</h5><h6>h6 Title</h6>

h1 Title

h2 Title

h3 Title

h4 Title

h5 Title

h6 Title

You can also use the "<caption>Caption Text</caption>" tags to add a title/subtitle/caption for the table. It doesn't matter where in the table coding you put it - the actual text you use will be displayed above the table itself. You'll need to use normal HTML coding to style it.

If you use both header(s) and caption inside or above the table, the title will appear before the caption, no matter where they are placed in the table. However, if you place any more headers and captions after a caption, they will be displayed in order of placement. (see example table below)

~~If you have a grouping of titles and subtitles, you can use the container tag <header></header>, which primarily helps the browser. Here's an example:~~

Although it'll preview the use of caption and header tags, Steemit will not allow the use of the header and caption tags when you press submit. GRRRRR!! 😠

To demonstrate the basic form, including titles (inside and outside of table), here is a 5-column table.

<h1>Title Outside of Table Tags</h1>
<table>
    <thead>
       <tr><th>Col1</th><th>Col2</th><th>Col1</th></tr>
       <h1>Title Inside of Table Head</h1>
   </thead>
   <tbody>
       <tr><td>r1c1</td><td>r1c2</td><td>r1c3</td></tr>
       <tr><td>r2c1</td><td>r2c2</td><td>r2c3</td></tr>
   </tbody>
   <h1>Title After Table Body</h1>
</table>

Title Outside of Table Tags

Title Inside of Table Head

Title After Table Body

Col1	Col2	Col1
r1c1	r1c2	r1c3
r2c1	r2c2	r2c3

Nesting & Indenting

As is usual for almost all HTML tags, you must have opening and closing tags, and every tag must be properly nested (in the correct order). You cannot have tags like a twisted pair of wires, e.g. <h1><i>text</h1></i> will cause an error; h1><i>text</i></h1> will work correctly. It is suggested that indenting (using spaces since tab doesn't function) be used in the coding (it won't show in the displayed result) to help you see the nesting. You can use to make it easy to see the nested nature of the coding by using what I'll call "line" nesting (one table line defined in one line of coding), "elemental" nesting (one table element defined in one line of coding), or some variant...You could even not use indenting and lines, but that's hard to edit!

Line Nesting:

<table>
   <thead><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr></thead>
   <tbody>
      <tr>...(the rest of the table here)
   </tbody>
</table>

Elemental Nesting:

<table>
   <thead>
     <tr>
       <th>Firstname</th>
       <th>Lastname</th> 
       <th>Age</th>
     </tr>
   </thead>
   <tbody>
      <tr>
...(the rest of the table here)
   </tbody>
</table>

Unlike with MDL, you can have as many lines of the table on one line in the editor as you want because of closing tags.

Example of a table coded on one line:

<table><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table>

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

As you can see, it makes a table but it's difficult to read the code while editing. It is best, therefore, to put each table line on a separate line and indent to show nesting.

Please support me!

It takes me hours of effort, experimentation and editing to produce an article like this. Please press "upvote" to support me - because so far I'm earning almost nothing on Steemit even though I only produce quality articles, some of which take days to make, and resteem if you think others will benefit from my work! Thank you!

Credits:

If you're looking for an all-in-one guide, you might find The Ultimate Guide To Formatting On Steemit (Markup and Markdown) by @sisygoboom useful. It contains a lot of info, briefly presented, and I even found a couple of new things!

A great deal of this involved experimenting, both with what I know about HTML and markdown, and because not everything in the articles I read worked.
As I was working on this, I found this article How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor by @steemitguide. It's not as comprehensive as I needed, but it did remind me about divs and how to make columns, and the first 2 links to other articles (at the bottom of it) may help you. The third I found to be useless, except I got the "center" tag from it. Some of the info in the 2 other articles works, some doesn't, including the stuff about the Raw HTML editor.

I found this article to be difficult to use, and not everything works, but I gleaned some of the above content from it: Steemit Beginner Tips : Basic Guide on how to Adjust and Edit Fonts in Post. If you don't see something from here in my article, that's because it didn't work or I couldn't figure it out.

The article Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols, by @steemitguide, has some outdated info, but it was where I got the emoticon codes from and, by looking at the source code, I was reminded about using tables.

If you appreciate this article, please upvote/like, resteem/share and share it to Facebook, Twitter, Reddit, LinkedIn and wherever else you can!