Tables 3 HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Intermediate Section
TABLES 3 - TEXT, COLOUR, IMAGES & LINKS

TEXT IN TABLES

A few words now about using text inside table cells. Text will always appear as the browser's default typeface, colour and size unless you specify it for EACH CELL. I have not specified a font face in the previous lessons so I have no idea what the text inside the tables will look like to you. It will depend on the DEFAULT that your browser is set to, usually Times. Let's look again at the small address book from the previous page which contains default fonts. This time I will specify the fonts to be used. Note that they are different for each entry:

MY ADDRESS BOOK
Name	Address	Phone No	Email
Leonard Cappa	14 Cinerama Dr, Waverley Hills	5555 4321	lecap@etastic.com
Julio Ribbets	2 Hopping Lane, Frog Hollow	4444 4132	tadpole@wildpond.com

The heading is in the default face and the Name/Address row is Comic Sans MS. I have also specified a font face for the first entry:

<TR>
<TD>Leonard Cappa</TD>
<TD>14 Cinerama Dr, Waverley Hills</TD>
<TD>5555 4321</TD>
<TD>lecap@etastic.com</TD>
</TR>

The second entry has a different font face specified:

<TR>
<TD>Julio Ribbets</TD>
<TD>2 Hopping Lane, Frog Hollow</TD>
<TD>4444 4132</TD>
<TD>tadpole@wildpond.com</TD>
</TR>

It can be time consuming doing this but using cut and paste makes it relatively quick. Just don't forget to close each piece of text with .

IMAGES IN TABLES

To place an image inside a cell, you just put the IMAGE TAG after the cell's <TH> or <TD> tag. In the example below, the gif image is centre aligned using the <TH> tag, has cellpadding of 4, and it has a border of 1. Here is the code:

And here is the result:

What are some of the ways you would use it? This is how the heading to these tutorials looks. I have given it a border of "1" to show more clearly how it works. The graphic is an image inside a table cell and the text is in another cell, the border is usually "0". We use the ALIGN and VALIGN tags to place the text exactly where we want it.

Intermediate Section

And to save you going back to the top, here is how it looks without the border.

Intermediate Section

LINKS IN TABLES

You can also use a link inside a cell. You can even combine it with an image, say, for email. The LINK TAG works in the same way as the image tag above. Here is the code:

Here is the result:

Doghouse Studio

COLOURED CELLS

The background colour of the entire table, each cell, and each row can be changed. Here we use the <BGCOLOR=" " > command, and use either the numeric (hexadecimal) code for the desired colour or the name of the colour (if it is one of the 16 "web safe" colours like red, blue, green, yellow, etc). For now we'll stick to the numeric code, not forgetting the # symbol before it. Here is the code for a single cell, coloured yellow:

Here is how it looks in the browser:

Yellow is mellow

Now to make this all more obvious, we will give the table a couple more rows and columns and change the colour of each cell, this time using the <TR> (table row) to start and a BGCOLOR command in each <TD> tag. Here is how it looks centred in the browser:

Green	Yellow	Lime
Gray	Purple	Blue

Notice how hard it is to see the words "Green" and "Purple" in their cells. This is where you will have to change the FONT COLOUR. That is pretty simple but we will look at that shortly.

Here is the code for the first row:

The next thing we will look at is changing the colour of a table ROW. Here we add the BGCOLOR command to the <TR> tag. Here is a three row, two column table:

Coral	Coral
Olive	Olive
Orange	Orange

And here is the code:

All this colouring of cells and changing fonts can be very time consuming. But there are ways to make it less so. Set up your first rows and columns, then just copy and paste to create as many as you want for your table. You can then go to the individual cells, rows or columns and change the colour codes, fonts, etc without typing the whole lot a million times. Remember, copy and paste are a HTML-ers best friend.

CHANGING FONT COLOURS

Remember the problem of dark fonts on a dark background? To make the text stand out it is simply a matter of adding the FONT COLOR code to the text in the cell. As with text, you need to specify each cell. We'll use a bit of the colour table from a previous lesson for an example.

COLOUR CODES
SILVER=#C0C0C0	NAVY=#000080	GREEN=#008800
RED=#FF0000	PURPLE=#800080	OLIVE=#808000

Here's how it's done:

What a lot of code! But don't forget, copy and paste. As you can see the text now shows up more clearly.

To see the large colour chart again, CLICK HERE. Just click your Back button or the Tables 3 link at the bottom of the page to return here. If you have a good colour printer and lots of ink, you might like to print it out and keep it for reference.

SPACING CELLS

If you had an uneven number of things you wanted to put in a table you can balance the appearance with a SPACING or EMPTY cell. As you can see, there is an empty cell coloured green between the centre two items. This is very simple to do - just put an opening <TD> followed immediately by   (a non-breaking space) then a closing </TD> (or <TH> followed by </TH>). If you want a fill in colour, add the Hex colour code to the TD tag before the  . Following the same principle, you can use a graphic, and surround it with the cell contents. See an example of this further down the page.

Introduction	Main Index	Links
Getting Started		Images
Colour Chart	Special Characters	Lists

You can click on any of the links to revisit them. Just hit your BACK button to return here.

This is the code for the row with a spacing cell, with the relevant part in red:

<TH>
<A HREF="getstart.html">Getting Started</A>
</TH>
<TD BGCOLOR=#006200> </TD>
<TH>
<A HREF="images.html">Images</A>
</TH>

Following the same principle, another way to do it is to "fill in" this space with a graphic, and surround it with the cell contents to give the effect as in the following example. Here we make <BORDER=0> and use <COLSPAN=3> to place the top line and <ROWSPAN=2> for the graphic. As an exercise I'll let you figure out the rest of code for this!

Tip: When setting up something like this or any complex table, make your BORDER 1 or 2 until you are finished. That way you can see exactly where all the cells are placed and it is easier to pick up mistakes.

Cap'ns Oarsome		Baity Mermaids
Summer Sailing Weekends
at the Seahorse Marina All Shops Open
Fishy Stuff Skipper's Seafoods		On Deck Tackle This Lot
Sunday Regattas	Big Prizes	Free Barbecue

Next: Tables 4 - Coloured Lines & Outlines

Intermediate Index