Showing structured information in your blog
Bullet pointed lists are great if you only want to show one piece of data for each point.
But if you want to show more data for each item, they're not so helpful.
Consider this example:
- Monday: start time 5pm, Shona
- Tuesday: 6pm, Jason
- Wednesday: rest day
- Thursday: 5pm, Jason
- Saturday & Sunday 3pm, Shona
Similar information isn't aligned - and if you want to tell readers that the time shown is the start time and the name is the leader that day, you have to either put it in the text (which some readers will skim over and miss), or repeat it on every line.
To display data like this, a table is a far better option.
So why do some people not recommend tables? In the early days of web-browsers and HTML, tables were often used to control the layout of pages, and this lead to various problems. This is why you'll find people preaching vigorously against using tables, eg Sitepoint have an entire book (The Principles of Beautiful Web Design
) on the topic. Nonetheless, tables do have a place - they are the best way to display truly tabular data.
Using Tables in Blogger
When I started using Blogger in 2009, there were issues with how the post-editor displayed tables - and people wrote articles like this about how to manipulate the HTML code so the tables displayed properly, without any extra line-break. Thankfully, those problems have been fixed, and as far as I know Blogger's post-editor copes with HTML for tables.However it doesn't have tools for creating tables in Compose mode, so you need an alternative tool to make them. Some options include:
1 Show the table as a picture:
Make the table in a tool (eg Word, Excel) that does support table. Turn this into an image file, eg by taking a screen shot, and show this picture in your blog.
This gives you a lot of control over how the table looks - but the contents in your table cannot be indexed by Google, so the won't show up in search-results. It also won't work so well for longer tables.
2 Make the table in another tool and display the output
If you make a table in Word, then you may be able to display it in a blog-post by converting it via Google Docs. (I know that this method works in general, but I haven't tested whether converted tables keep their formatting or not, so cannot confirm if it works).
Similarly, you could make it in a spreadsheet file (eg Excel), upload it to Google Docs, and then use a web-element to display it in your blog. (I didn't much like these the last time I looked, because they put some "extra stuff" around the edge - not sure if they're still doing that or not.)
3 Edit the HTML-code behind your post
If you put the HTML code for a table into the post-editor's Edit HTML view, then blogger will draw the table correctly, even though the WYSIWYG Compose mode doesn't have functions to let you draw tables, or add/delete rows and columns.
This method is more challenging than the others - but it gives you the most control over how the table looks. .
To do it, you need to:
- Go into Edit HTML mode,
- Find the place where you want the table to go
- Enter the code.
Finding the place that you need t put the code can be challenging if you're not used to working with HTML - the article about Stopping pictures on your blog from being "clickable" has a hint about using marker-text to help with this.
Getting the HTML code to draw a table in your blog:
If you want to display tabular data on your blog or web-page, then you can either type the HTML instructions in manually, or use a tool that generates the code for you.
There are plenty of HTML table-generators around (google to find them): you tell them how many rows and columns you want, and they generate the skeleton HTML code that you need for a table of those dimensions. Then you simply have to copy-and-paste the code into the Edit HTML view of the post/page editor, and fill in the details you want to show inside the table.
This last step, filling in the details, is the hardest part. The nicer table-generators help by putting some marker-text into each cell, so you can at least see where they are, for example, they provide code like
<table>
<tr>
<td> row 1, cell 1 </td>
<td> row 1, cell 2 </td>
<td> row 1, cell 3 </td>
</tr>
<tr>
<td> row 2, cell 1 </td>
<td> row 2, cell 2 </td>
<td> row 3, cell 3 </td>
</tr>
</table>
which looks like this in the post-editor screen:
| Column 1 | Column 2 | Column3 |
|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 |
| row 2, cell 1 | row 2, cell 2 | row 3, cell 3 |
And because the post-editor screen displays the table correctly, it is easy enough to edit the contents there.
(The code quoted doesn't actually show a table like that, which is centered with borders and a background colour. I wanted to show the basic code here so you get the point - see the Appendix at the very end of the article for the actual code to produce a table like the one shown).
This works well for smallish tables. But for larger tables (ones with lots of rows and/or columns), you may want to use a tool to create the HTML for you. There are various options for this:
1 Output from Save-as a web page:
Products that work with tables (eg Word, Excel, PowerPoint) and can save files as HTML pages. However the code that they produce will have a lot of extra things in it, including the formatting from the stylesheet in the original program. Some of this code may not work well with Blogger - so I DO NOT recommend this approach.2 Use a "proper" HTML editor:
If you have it, a tool like Dreamweaver (or similar web-site editors) is likely to create the HTML while giving you an easier front-end. I've been told that Notepad++ is also useful for this, though I haven't figured it out yet.3 Use Excel functions to "write" the HTML:
Many of the tables I make are genuine sets of data that I want to do other things with (eg sort, filter, cross-tabulate), as well as make Blogger posts about. So it seemed sensible to find a way to use Excel's text-functions to create the "body" section of the HTML tables for Blogger - since HTML is really just text.).This method has worked well for me, and has halved the time it takes to create posts on one of my blogs that shows a lot of Google custom maps.
Formatting tables
The CSS-Tricks website has written a comprehensive guide to table formatting commands. It's fairly techy, but extremely informative about the best way to use tables. You can find it here.A Final Thought:
This article is about putting tables into your blog-posts. But the information applies equally well to putting them into gadgets - see putting HTML from outside sources into your blog for more details.Related Articles:
Showing a picture in a blog-post
Using Excel text-functions to write the HTML for a table
Displaying the contents of a Microsoft Word document in your blog
Writing posts for Blogger in MS Word
Putting HTML from outside sources into your blog
Stopping pictures from being "clickable"
Blogs, Blogger and blogger, Google and google - basic definitions for bloggers
Appendix: Code to make the example table:
This is the actual code used to make the table shown above. It uses a mix of in-line CSS, and pure HTML formatting for the table features that CSS doesn't support:<table border="1" cellpadding="5px" style="background-color: orange; border-collapse: collapse; margin: auto;">
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column3</th>
</tr>
<tr>
<td>row 1, cell 1 </td>
<td>row 1, cell 2 </td>
<td>row 1, cell 3 </td>
</tr>
<tr>
<td>row 2, cell 1 </td>
<td>row 2, cell 2 </td>
<td>row 3, cell 3 </td>
</tr>
</tbody></table>
No comments:
Post a Comment