AJ's Building Supplies

Inspired by Mr G here's a little look at making multicoloured tables.

If you're new it might be an idea to read the previous posts, when you hear THIS noise *BING* it's time to turn the page.

Here we look at how to make this...

You KNOW you want to... Now, heres the code we used for the previous table with []s replacing the triangle brackets:

[table width="200" border="1" align="center" cellpadding="3" cellspacing="3" bgcolor="#cccccc"]
[tr]
[td]top left[/td]
[td]top right[/td]
[/tr]
[tr]
[td]bottom left[/td]
[td]bottom right[/td]
[/tr]
[/table]

To colour a row or individual cells we only need to add one thing, the colour in one of two places.

To colour an entire row add it after the tr:

[tr bgcolor="#0000FF"]
[td]top left[/td]
[td]top right[/td]
[/tr]

To colour an individual cell, place the code in the td area:

[tr]
[td bgcolor="#0000FF"]top left[/td]
[td]top right[/td]
[/tr]

So the code for our multicoloured table is:

[table width="200" border="1" align="center" cellpadding="3" cellspacing="3" bgcolor="#cccccc"]
[tr]
[td bgcolor="#0000FF"]Top Left[/td]
[td bgcolor="#FF0000"]Top Right[/td]
[/tr]
[tr]
[td bgcolor="#FFFF00"]Bottom Left[/td]
[td bgcolor="#00FF00"]Bottom Right[/td]
[/tr]
[/table]

Gawd I hope that makes sense...

NOTE: Ths isn't for use in comments, just posts and header text.

Did you know it's possible to colour your text?

Yes it is!

Now, take a look at the post on text sizes because the coding is much the same.

[font size="3"][/font] gives a size three font.

[font size="3" color="#ff0000"][/font] gives a size three font in red.

See, here it is.

All colours need to be put in as hexidecimal, to help take a look at this excellent colour picking site.

A little personal note... Be a little careful with what you colour, red on green, yellow or purple on pink, all can clash and it's a proven fact that some colour combinations make it nigh on impossible for dyslexics or people with a visual impairment to read.

OK, I promise this is the final one for now to save ALL of us from going insane! (It's taxing my brain writing these, I'l tell ya!)

The text in each cell auto aligns to the eft hand side but you can align it to the centre or the right.

[tr]
[td]top left[/td]
[td]top right[/td]
[tr]

was the top half of the table from my prevoius posts, now lets fiddle the text by adding div code.

the way of writing this is to put [div align=left"/"center"/"right"] and [/div] codes before and after the text, with triangular brackets of course. (you're all gonna tell me where to stick my triangular brackets aren't you...)

So if we changed that chunk of the code to read...

[tr]
[td][div align="center"]top left[/div][/td]
[td][div align="right"]top right[/div][/td]
[tr]

We get:

I've lost it haven't I...

There's some extra code you can put in for tables in the very first line.

[table border="1"] was our first line but here's some changes we can make, they're all put inside the triangular brackets and with spaces between.

Adding width="(number)" can size our table. In a standard table the cells expand and contract to fit the text, this means we can have a table sized how we want. Therefore having

[table border=1 width="200"]

makes the table:

we can align the table by adding in align="left"/"right"/"center"

So [table width="200" border="1" align="center"] becomes:

Other codes change the look of the table by:

• cellpadding="1" - expands the size of the cell around the text.
• cellspacing="1" - expands the gap between cells.
• bgcolor="#cccccc" - changes the colour of the table.

Obviously the numbers and the colour can be changed for personal preference!

So, using:

[table width="200" border="1" align="center" cellpadding="3" cellspacing="3" bgcolor="#cccccc"]

gives us:

Now, hands up who's still awake and caring...

OK, bit complicated this one so stick with me and I'm hoping I'll make some sense...

It's possible to use standard table codes in your blog to make something like this:

Now, here's the coding for this but with [] brackets replacing the needed triangle brackets.

[table border="1"]
[tr]
[td]top left[/td]
[td]top right[/td]
[/tr]
[tr]
[td]bottom left[/td]
[td]bottom right[/td]
[/tr]
[/table]

As you can see, the table starts and ends with (unsurprisingly) the 'table' code then tr gives a table row and td makes a table column.

To add a row simply use:

[tr]
[/tr] - again replacing the [] with triangular brackets.

Then, between those two add in as many [td][/td]s as you want columns in that row.

Border width can obviously be changed to suit your own preferences, I merely added a 1 border to show where the table was.

Here's another quicky

hr - surrounded by the triangular brackets of course, gives you:

It's a single code like the break, it only needs that one piece of code.

A few handy codes for formatting text.

All codes need to be put in in the normal way, inside triangle brackets

em - /em = Gives you this

strong - /strong = Gives you this

sub - /sub = _{Gives you this}

sup - /sup = ^{Gives you this}

big - /big = Gives you this

small - /small = Gives you this

b - /b = Gives you this

i - /i = Gives you this

tt - /tt = Gives you this

center - /center =

ins - /ins = Gives you this

s - /s = Gives you this

A post for CJ, although I'm sure he won't mind the rest of you reading

You can edit font sizes in your header and in posts (but not comments) by using

font size="(number)"

and

/font

bookending the text you want to size.

Obviously usual code rules apply to wrap them in triangular brackets.

As a clue to sizing 2 is normal font size.

The numbers you can add are:

1
2
3
4
5
6
7

Did you know that you can put breaks in your header text simply by adding the br (line break) or p (paragraph break) command once?

It's a one off and doesnt need any second / part.

We know we can do a blockquote in a post but you can also do it in a comment.

Write 'blockquote' before and after the quote, inside triangular brackets (shift and , or . on a normal keyboard) and with a / preceding the one at the end.

To get a blockquote.