Codification

A lot of the time when using columns, you may need to add a cell at the top of a set of columns to insert a title for the table.

The command colspan="n" controls this, where n is the number of columns that you need to span. So:

‹table border="1" align="center" width="500"›‹tr›‹td align="center" colspan="2"›Favourite Albums‹/td›‹/tr›
‹tr›‹td align="center"›AC/DC‹/td›‹td align="center"›Dirty Deeds Done Dirt Cheap‹/td›‹/tr›
‹tr›‹td align="center"›Rush‹/td›‹td align="center"›Exit...Stage Left‹/td›‹/tr›
‹/table›

gives us this:

Note that in the first row you only need to define the first column as the code treats the first cell as two columns wide.

Should I want to add further entries along the same row, treating the first column as a sub-title column, then I'll need to span rows in order to save me retyping the same thing for cell after cell. This is done with the rowspan="n" command, where n is the number of rows to span.

So:

‹table border="1" align="center" width="500"›‹tr›‹td align="center" colspan="2"›Favourite Albums‹/td›‹/tr›
‹tr›‹td rowspan="3" align="center"›AC/DC‹/td›‹td align="center"›Dirty Deeds Done Dirt Cheap‹/td›‹/tr›
‹tr›‹td align="center"›Let There Be Rock‹/td›‹/tr›
‹tr›‹td align="center"›Back In Black‹/td›‹/tr›
‹tr›‹td rowspan="2" align="center"›Rush‹/td›‹td align="center"›Exit...Stage Left‹/td›‹/tr›
‹tr›‹td align="center"›Subdivisions‹/td›‹/tr›
‹/table›

gives us this:

And again, as you can see, there is no need to define the first column for each entry as the code for the first cell of the first row with a rowspan= command will define that cell for the given number of rows.

It's getting good, this, innit?

You will have noticed that when text - or indeed images - are put into a table cell with the align="left" or align="right" command it gets pushed right up to the edge of the cell. There is a way around this, however, in HTML it is impossible to do this for individual cells. The relevant command deals with the entire table rather than just the cells.

The command cellpadding="n" controls the padding of cells, where n is the number of pixels should appear between the cell wall and the content. So:

‹table cellpadding="15" border="1" align="center" width="500"›‹tr›‹td align="left"›Tables‹/td›‹td align="center"›Can Be‹/td›‹td align="right"›Fun!‹/td›‹/tr›‹/table›

gives us this:

Cell spacing affects the space between the cells and, in common with the cell padding command, it affects the entire table rather than individual cells. Therefore,

‹table cellspacing="5" cellpadding="15" border="1" align="center" width="500"›‹tr›‹td align="left"›Tables‹/td›‹td align="center"›Can Be‹/td›‹td align="right"›Fun!‹/td›‹/tr›‹/table›

gives us this:

Keeping up alright?

Usksider sent me a comment in my last post here which contained some formatting code that, unfortunately, is not accepted in comments.

It also ran ahead of these lessons, as it contained alignment coding for tables.

It looked like this:

‹table width="500"›‹tr›‹td align="left"›Tables‹/td›‹td align="center"›Can Be‹/td›‹td align="right"›Fun!‹/td›‹/tr›‹/table›

Which, had it been in a post rather than a comment, would have come out like this:

So, let's take Usky's code and examine it.

The table may have looked better fully centered in the column, though the addition of the 'width' tag was helpful. Most people's blogs that use two columns have a width tolerance of around 500 pixels (this is where the "Preview" button comes in handy,) though it does vary according to the selected blog design. To fully centre the table he should have added align="center" (note the American spelling) in the 'table' command thus:

‹table align="center" width="500"›‹tr›‹td align="left"›Tables‹/td›‹td align="center"›Can Be‹/td›‹td align="right"›Fun!‹/td›‹/tr›‹/table›

which gives us this:

But in order to fully demonstrate the 'align' command, we'll see what it would look like with a border around the cells to show what the command does:

‹table border="1" align="center" width="500"›‹tr›‹td align="left"›Tables‹/td›‹td align="center"›Can Be‹/td›‹td align="right"›Fun!‹/td›‹/tr›‹/table›

Keeping up?

This can get quite confusing if you're not entirely certain of what you are doing, but that's purely down to the length of the code for large tables.

To put a table into your blog you need to use three or four code elements.

First you'll need to use the ‹table› command, possibly expanding it with a border tag, which I'll come to shortly.
Then you'll need to start a row with ‹tr›, and then start a column with ‹td›.

So the coding for a basic 2X2 table would look something like this:

‹table›‹tr›‹td›top left‹/td›‹td›top right‹/td›‹/tr›
‹tr›‹td›bottom left‹/td›‹td›bottom right‹/td›‹/tr›‹/table›

Which will give you this:

Now to add a border, in order to distinguish between the individual cells, you'll need to add the 'border=' tag in the ‹table› command like this (I'll use a 1 pixel border here):

‹table border="1"›‹tr›‹td›top left‹/td›‹td›top right‹/td›‹/tr›
‹tr›‹td›bottom left‹/td›‹td›bottom right‹/td›‹/tr›‹/table›

Which gives you this:

The most important thing to remember, though, is that you have to open the table command, then open the row command, then the column command, add the content, close the column command with ‹/td›, open, fill and close as many columns as required, then close the row with ‹/tr› and repeat for however many rows you need then close the table off with ‹/table›

The next lesson will be about centering of tables and content.

Good so far?

This was posted by Usky in a comment on one of my previous posts.
The code for it is ‹img src="http://data5.blog.de/media/038/3724038_eb01240e59_l.jpeg" width="900" height="500" alt="mountain_dog" /›‹/a›

Just by tweaking a couple of elements of that code, we can resize the piccie, thus:

‹img src="http://data5.blog.de/media/038/3724038_eb01240e59_l.jpeg" width="450" height="250" alt="mountain_dog" /›‹/a›

One of the other things that I have learned today is how to put "triangle brackets" into a post without them being picked up as HTML code and having my posts kicked straight back at me because of coding errors.

How do I do it? Well, it took me a little while to work this one out with the aid of a couple of reference manuals, but here goes.

The code for triangular parentheses is this:

> = >
&lt; = <

or

&lsaquo; = ‹
&rsaquo; = ›

So far, I have learned about posting images and hyperlinking text.
How about hyperlinking an image?

Easy. Instead of using a word or phrase as the link trigger, just set the trigger as an image.

Say I want to link an image of a sunflower to an article about sunflowers, the code would be the link to the desired web page attached to the image. Something like this:

‹a href="http://en.wikipedia.org/wiki/Sunflower"›‹img src="http://www.nps.gov/wica/naturescience/images/Annual-Sunflower.jpg"/›‹/a›

Where "http://en.wikipedia.org/wiki/Sunflower" is the target page and "http://www.nps.gov/wica/naturescience/images/Annual-Sunflower.jpg" is the trigger for the link.

It should look like this:

Click the pic, cos it's now a link!

Another of the basics that many fall down on is linking pages. Say you want, as I did in the Picture Placement post, to link a piece of text to a web page. I did it again just there.

How's it done? Well, when you're writing an original post, you can highlight a word or phrase that you wish to have as a link to another page and click on the "hyperlink" button (the right hand one of the two shown on the right) or you could just use the code ‹a href="URL"›link title‹/a› where URL is the target of the link, and link title is the word or phrase that you wish to link to the target.

An example of this would be ‹a href="http://codification.blog.co.uk/2009/07/26/picture-placement-6591423/"›Picture Placement‹/a› which gave me the hyperlinked text used in this very post.

You may have noticed that the text in the last post was butted right up against the image. This does not look too good so we'll have to add a bit of a blank border.

So let's give it, say, a 5 pixel margin like this:

‹img src="http://data5.blog.de/media/605/3662605_ce1382a3d9_s.jpeg" align="left" style="margin:5px;" /›

See? That should make your blog post look so much smarter.