Showing structured information inward your blog
Bullet pointed lists are non bad if yous alone wish to acquaint 1 spell of information for each point.
But if yous wish to acquaint to a greater extent than information for each item, they're non thence helpful.
Consider this example:
- Monday: kickoff 4th dimension 5pm, Shona
- Tuesday: 6pm, Jason
- Wednesday: residuum day
- Thursday: 5pm, Jason
- Saturday & sun 3pm, Shona
Similar information isn't aligned - inwards improver to if yous wish to acre readers that the 4th dimension shown is the kickoff 4th dimension inwards improver to the scream is the leader that day, yous withdraw keep to either pose it inward the text (which some readers testament skim over inwards improver to miss), or repeat it on every line.
To display information similar this, a tabular array is a far ameliorate option.
So why do some people non recommend tables? In the early days of web-browsers inwards improver to HTML, tables were oftentimes used to ascendence the layout of pages, inwards improver to this Pb to various problems. This is why you'll abide past times people preaching vigorously against using tables, eg Sitepoint withdraw keep an entire majority (The Principles of Beautiful Web Design
) on the topic. Nonetheless, tables do withdraw keep a menage - they are the best agency to display truly tabular data.
Using Tables inward Blogger
When I started using Blogger inward 2009, at that topographic quest were issues alongside how the post-editor displayed tables - inwards improver 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 keep been fixed, inwards improver to equally far equally I know Blogger's post-editor copes alongside HTML for tables.However it doesn't withdraw keep tools for creating tables in Compose mode, so you scream for an alternative tool to build them. Some options include:
1 Show the tabular array equally a picture:
This gives yous a lot of ascendence over how the tabular array looks - only the contents inward your tabular array cannot concord upward indexed yesteryear Google, thence the won't acquaint upward inward search-results. It also won't spell of occupation thence expert for longer tables.
ii Make the tabular array inward another tool inwards improver to display the output
If yous build a tabular array inward Word, thence yous may concord upward able to display it inward a blog-post yesteryear converting it via Google Docs. (I know that this method institute inward general, only I haven't tested whether converted tables snuff it along their formatting or not, thence cannot confirm if it works).
Similarly, yous could acquire inward inwards a spreadsheet file (eg Excel), upload it to Google Docs, inwards improver to thence utilisation a web-element to display it inward your blog. (I didn't much similar these the finally 4th dimension I looked, because they pose some "extra stuff" around the edge - non for certain if they're soundless 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 testament push clitoris the tabular array correctly, level though the WYSIWYG Compose agency doesn't withdraw keep functions to permit yous push clitoris tables, or add/delete rows inwards improver to columns.
This method is to a greater extent than challenging than the others - only it gives yous the most ascendence over how the tabular array looks. .
To do it, yous scream for to:
- Go into Edit HTML mode,
- Find the menage where yous wish the tabular array to go
- Enter the code.
Finding the menage that yous scream for t pose the code tin concord upward challenging if you're non used to working alongside HTML - the article about Stopping pictures on your weblog from beingness "clickable" has a hint virtually using marker-text to assistance alongside this.
Getting the HTML code to push clitoris a tabular array inward your blog:
If yous wish 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 enough of HTML table-generators around (google to abide past times them): you acre them how many rows inwards improver to columns yous want, inwards improver to they generate the skeleton HTML code that yous scream for for a tabular array of those dimensions. Then yous precisely withdraw keep to copy-and-paste the code into the Edit HTML stance of the post/page editor, inwards improver to fill upwards upward inward the details yous wish to acquaint inside the table.
This finally 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 grade consider where they are, for example, they homecoming code like
<table>
<tr>
<td> row 1, prison house house electrochemical cell 1 </td>
<td> row 1, prison house house electrochemical cell ii </td>
<td> row 1, prison house house electrochemical cell iii </td>
</tr>
<tr>
<td> row 2, prison house house electrochemical cell 1 </td>
<td> row 2, prison house house electrochemical cell ii </td>
<td> row 3, prison house house electrochemical cell iii </td>
</tr>
</table>
which looks similar this inward the post-editor screen:
| Column 1 | Column 2 | Column3 |
|---|---|---|
| row 1, prison house house electrochemical cell 1 | row 1, prison house house electrochemical cell ii | row 1, prison house house electrochemical cell iii |
| row 2, prison house house electrochemical cell 1 | row 2, prison house house electrochemical cell ii | row 3, prison house house electrochemical cell iii |
And because the post-editor concealment displays the tabular array correctly, it is piece of cake enough to edit the contents there.
(The code quoted doesn't actually acquaint a tabular array similar that, which is centered alongside borders inwards improver to a background colour. I wanted to acquaint the basic code hither thence yous acquire the scream for - consider the Appendix at the actually cease of the article for the actual code to build a tabular array similar the 1 shown).
This institute expert for smallish tables. But for larger tables (ones alongside lots of rows and/or columns), yous may wish to utilisation a tool to do the HTML for you. There are various options for this:
1 Output from Save-as a spider spider web page:
Products that spell of occupation alongside tables (eg Word, Excel, PowerPoint) inwards improver to tin salvage files equally HTML pages. However the code that they build testament withdraw keep a lot of extra things inward it, including the formatting from the stylesheet inward the original re-create program. Some of this code may non spell of occupation expert alongside Blogger - thence I DO NOT recommend this approach.ii Use a "proper" HTML editor:
If yous withdraw keep it, a tool similar Dreamweaver (or similar web-site editors) is belike to do 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 build are genuine sets of information that I wish to do other things alongside (eg sort, filter, cross-tabulate), equally expert equally build Blogger posts about. So it seemed sensible to abide past times a agency to use Excel's text-functions to do the "body" subdivision of the HTML tables for Blogger - since HTML is actually precisely text.).This method has worked expert for me, inwards improver to has halved the 4th dimension it takes to do 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, only extremely informative virtually the best agency to utilisation tables. You tin abide past times it here.Influenza A virus subtype Influenza A virus subtype H5N1 Final Thought:
This article is virtually putting tables into your blog-posts. But the information applies equally expert to putting them into gadgets - consider putting HTML from outside sources into your blog for to a greater extent than details.Related Articles:
Showing a celluloid 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 outside sources into your blog
Stopping pictures from beingness "clickable"
Blogs, Blogger inwards improver to blogger, Google inwards improver to google - basic definitions for bloggers
Appendix: Code to build the illustration table:
This is the actual code used to build the tabular array shown above. It uses a mix of in-line CSS, inwards improver 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 house house electrochemical cell 1 </td>
<td>row 1, prison house house electrochemical cell ii </td>
<td>row 1, prison house house electrochemical cell iii </td>
</tr>
<tr>
<td>row 2, prison house house electrochemical cell 1 </td>
<td>row 2, prison house house electrochemical cell ii </td>
<td>row 3, prison house house electrochemical cell iii </td>
</tr>
</tbody></table>