News!! Showing Information Inwards Your Blog

This article is virtually how tables tin hold upward used to display information inward Blogger, why yous sometimes should utilisation them, in addition to how to brand them.

Showing structured information inward your blog

There are lots ways to brand your weblog reader-friendly: bullet-pointed lists, pictures, grouping information into sections, headings, etc

Bullet pointed lists are non bad if yous exclusively desire to present 1 slice of information for each point.

But if yous desire to present to a greater extent than information for each item, they're non thence helpful.

Consider this example:

Monday: get-go fourth dimension 5pm, Shona
Tuesday: 6pm, Jason
Wednesday: residual day
Thursday: 5pm, Jason
Saturday & Dominicus 3pm, Shona

Similar information isn't aligned - in addition to if yous desire to nation readers that the fourth dimension shown is the get-go fourth dimension in addition to the advert is the leader that day, yous withdraw maintain to either pose it inward the text (which some readers volition skim over in addition to miss), or repeat it on every line.

To display information similar this, a tabular array is a far improve option.

So why practise some people non recommend tables? In the early on days of web-browsers in addition to HTML, tables were oft used to command the layout of pages, in addition to this Pb to diverse problems. This is why you'll abide by people preaching vigorously against using tables, eg Sitepoint withdraw maintain an entire mass (The Principles of Beautiful Web Design) on the topic.

Nonetheless, tables practise withdraw maintain a house - they are the best means to display genuinely tabular data.

Using Tables inward Blogger

When I started using Blogger inward 2009, at that topographic point were issues amongst how the post-editor displayed tables - in addition to people wrote articles like this about how to manipulate the HTML code thence the tables displayed properly, without whatever extra line-break. Thankfully, those problems withdraw maintain been fixed, in addition to as far as I know Blogger's post-editor copes amongst HTML for tables.

However it doesn't withdraw maintain tools for creating tables in Compose mode, so you require an alternative tool to brand them. Some options include:

1 Show the tabular array as a picture:

show this film inward your blog.

This gives yous a lot of command over how the tabular array looks - but the contents inward your tabular array cannot hold upward indexed yesteryear Google, thence the won't present upward inward search-results. It also won't piece of employment thence good for longer tables.

ii Make the tabular array inward some other tool in addition to display the output

If yous brand a tabular array inward Word, thence yous may hold upward able to display it inward a blog-post yesteryear converting it via Google Docs. (I know that this method plant inward general, but I haven't tested whether converted tables perish along their formatting or not, thence cannot confirm if it works).

Similarly, yous could larn inward in a spreadsheet file (eg Excel), upload it to Google Docs, in addition to thence utilisation a web-element to display it inward your blog. (I didn't much similar these the terminal fourth dimension I looked, because they pose some "extra stuff" around the border - non certain if they're however doing that or not.)

iii Edit the HTML-code behind your post

If yous pose the HTML code for a tabular array into the post-editor's Edit HTML view, thence blogger volition depict the tabular array correctly, fifty-fifty though the WYSIWYG Compose means doesn't withdraw maintain functions to permit yous depict tables, or add/delete rows in addition to columns.

This method is to a greater extent than challenging than the others - but it gives yous the most command over how the tabular array looks. .

To practise it, yous require to:

Go into Edit HTML mode,
Find the house where yous desire the tabular array to go
Enter the code.

Finding the house that yous require t pose the code tin hold upward challenging if you're non used to working amongst HTML - the article about Stopping pictures on your weblog from beingness "clickable" has a hint virtually using marker-text to assistance amongst this.

Getting the HTML code to depict a tabular array inward your blog:

If yous desire to display tabular information on your weblog or web-page, thence yous tin either type the HTML instructions inward manually, or utilisation a tool that generates the code for you.

There are plenty of HTML table-generators around (google to abide by them): you nation them how many rows in addition to columns yous want, in addition to they generate the skeleton HTML code that yous require for a tabular array of those dimensions. Then yous exactly withdraw maintain to copy-and-paste the code into the Edit HTML sentiment of the post/page editor, in addition to fill upward inward the details yous desire to present within the table.

This terminal step, filling inward the details, is the hardest part. The nicer table-generators assistance yesteryear putting some marker-text into each cell, thence yous tin at to the lowest degree run into where they are, for example, they render code like

<table>
<tr>
<td> row 1, prison theater cellphone 1 </td>
<td> row 1, prison theater cellphone ii </td>
<td> row 1, prison theater cellphone iii </td>
</tr>
<tr>
<td> row 2, prison theater cellphone 1 </td>
<td> row 2, prison theater cellphone ii </td>
<td> row 3, prison theater cellphone iii </td>
</tr>
</table>

which looks similar this inward the post-editor screen:

Column 1	Column 2	Column3
row 1, prison theater cellphone 1	row 1, prison theater cellphone ii	row 1, prison theater cellphone iii
row 2, prison theater cellphone 1	row 2, prison theater cellphone ii	row 3, prison theater cellphone iii

And because the post-editor concealment displays the tabular array correctly, it is tardily plenty to edit the contents there.

(The code quoted doesn't really present a tabular array similar that, which is centered amongst borders in addition to a background colour. I wanted to present the basic code hither thence yous larn the scream for - run into the Appendix at the really cease of the article for the actual code to make a tabular array similar the 1 shown).

This plant good for smallish tables. But for larger tables (ones amongst lots of rows and/or columns), yous may desire to utilisation a tool to practise the HTML for you. There are diverse options for this:

1 Output from Save-as a spider web page:

Products that piece of employment amongst tables (eg Word, Excel, PowerPoint) in addition to tin relieve files as HTML pages. However the code that they make volition withdraw maintain a lot of extra things inward it, including the formatting from the stylesheet inward the master copy program. Some of this code may non piece of employment good amongst Blogger - thence I DO NOT recommend this approach.

ii Use a "proper" HTML editor:

If yous withdraw maintain it, a tool similar Dreamweaver (or similar web-site editors) is probable to practise the HTML spell giving yous an easier front-end. I've been told that Notepad++ is also useful for this, though I haven't figured it out yet.

iii Use Excel functions to "write" the HTML:

Many of the tables I brand are genuine sets of information that I desire to practise other things amongst (eg sort, filter, cross-tabulate), as good as brand Blogger posts about. So it seemed sensible to abide by a means to use Excel's text-functions to practise the "body" department of the HTML tables for Blogger - since HTML is really exactly text.).

This method has worked good for me, in addition to has halved the fourth dimension it takes to practise posts on 1 of my blogs that shows a lot of Google custom maps.

Formatting tables

The CSS-Tricks website has written a comprehensive guide to tabular array formatting commands. It's fairly techy, but extremely informative virtually the best means to utilisation tables. You tin abide by it here.

Influenza A virus subtype H5N1 Final Thought:

This article is virtually putting tables into your blog-posts. But the information applies as good to putting them into gadgets - run into putting HTML from exterior sources into your blog for to a greater extent than details.

Showing a film inward a blog-post

Using Excel text-functions to write the HTML for a table

Displaying the contents of a Microsoft Word document inward your blog

Writing posts for Blogger inward MS Word

Putting HTML from exterior sources into your blog

Stopping pictures from beingness "clickable"

Blogs, Blogger in addition to blogger, Google in addition to google - basic definitions for bloggers

Appendix: Code to brand the instance table:

This is the actual code used to brand the tabular array shown above. It uses a mix of in-line CSS, in addition to pure HTML formatting for the tabular array 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, prison theater cellphone 1 </td>
<td>row 1, prison theater cellphone ii </td>
<td>row 1, prison theater cellphone iii </td>
</tr>
<tr>
<td>row 2, prison theater cellphone 1 </td>
<td>row 2, prison theater cellphone ii </td>
<td>row 3, prison theater cellphone iii </td>
</tr>
</tbody></table>