HTML for the complete beginner

Ez HTML - Tables 1

Tables seem to be the scariest part of HTML, even the hardest part to get the hang of, especially colspan and rowspan but is the backbone of HTML. Without tables this page wouldn't be possible, not only for the set up (graphics etc) but also for the examples you will see below.

I'm going to spend a bit of time on tables and it may pay to read over this again when you finish. This is one part of HTML you should take time to learn properly as it pays rewards when you can use them right.

Most HTML sites teach you how to make a table, usually a simple table, that's good but doesn't really help when you want to set up a page like this or to add a side bordered background like we saw on the "backgrounds" page etc. There is no one way / right way to make a web page using tables as there are so many designs that use tables in different ways but hopefully after covering everything below you will be able to (with practice) create a page using tables to the way you want. Don't worry I'm not going to throw you in the deep end, we'll work up to it.

A simple table is just this:

Code

Result

<table><tr>
<td>contents here</td>
</tr></table>

contents here

The default border in most browsers is 0, I have made it 1 to show you what we have. If you don't want a border, it's best to state border="0" even though it is the default on most browsers.
Now to make two cells wide we do this:

Code

Result

<table><tr>
<td>contents here</td>
<td>and also here</td>
</tr></table>

contents here

and also here

Can you see the pattern? Lets try 2 x 2.

Code

Result

<table><tr>
<td>Top left here</td>
<td>Top right here</td>
</tr><tr>
<td>Bottom left here</td>
<td>Bottom right here</td>
</tr></table>

Top left here	Top right here
Bottom left here	Bottom right here

What it all means?

<table> means we are making a table
<tr> Is the start of a new table row. (Table row)
<td> Is the start of the 'data cell' where your contents goes (Table data)
</td> Is the end of the table data cell, end of your contents
</tr> Is the end of table row
</table> means end of table

Notice the <td> tags are indented, this is optional, but makes large tables easier to edit at a later date.
It's best to state cellpadding, cellspacing and border to 0 (zero) even though some browsers are default at 0, declaring them all to 0 enables a tight table which will in turn load faster.

Now we will add a few more of the table tags, like cellpadding (padding in the cells), cellspacing (spacing of the cell wall), width (width of the table) and align (alignment of the contents)
This is a 4x4 table, meaning 4 boxes (cells) wide and 4 deep.

<table border="1" cellspacing="0" cellpadding="5" width="80%"><tr align="center">
   <td>text or pic or both</td>
   <td>text or pic or both</td>
   <td>text or pic or both</td>
   <td>text or pic or both</td>
</tr><tr align="center">
   <td>text or pic or both</td>
   <td>text or pic or both</td>
   <td>text or pic or both</td>
   <td>text or pic or both</td>
</tr><tr align="center">
   <td>text or pic or both</td>
   <td>text or pic or both</td>
   <td>text or pic or both</td>
   <td>text or pic or both</td>
</tr><tr align="center">
   <td>text or pic or both</td>
   <td>text or pic or both</td>
   <td>text or pic or both</td>
   <td>text or pic or both</td>
</tr></table>

Here is what it looks like.

text or pic or both	text or pic or both	text or pic or both	text or pic or both
text or pic or both	text or pic or both	text or pic or both	text or pic or both
text or pic or both	text or pic or both	text or pic or both	text or pic or both
text or pic or both	text or pic or both	text or pic or both	text or pic or both

What it all means?

border="1" means the table has a border of one (1)
cellspacing="0" means the tables cell spacing is set to zero (0) cellpadding="5" means the tables cell padding is set to five (5)
width="80%" means the table will fit across 80% of any screen size
align="center" means it will align the contents of the row in the center (default is left)

To center all this on your page add all this (the table) and whatever between <center> </center>, <div> </div> tags or an easier way is to add align="center" in the main table cell, align="center" in the tr or td cells will align the contents, align="center" in the table tag will align the table only.

A small note on tables, tables are like their very own little body tags. I'll try not to confuse you, but what ever you declare outside of a table is not seen within the table, font styles, sizes, some background images on some browsers etc, so each item must be restated within the <td> </td> tags.

Example, the font size and style I use on these pages is verdana at -1, the default is this, which is Times New Roman size 3. So our table would now have to look something like this:

Lets play with the cellspacing and padding for a bit

Code

Result

<table border="1" cellspacing="0" cellpadding="0"><tr>
<td>contents here</td>
<td>and also here</td>
</tr></table>

contents here

and also here

Code

Result

<table border="1" cellspacing="5" cellpadding="10"><tr>
<td>contents here</td>
<td>and also here</td>
</tr></table>

contents here

and also here

Code

Result

<table border="1" cellspacing="10" cellpadding="5"><tr>
<td>contents here</td>
<td>and also here</td>
</tr></table>

contents here

and also here

Code

Result

<table border="5" cellspacing="5" cellpadding="5"><tr>
<td>contents here</td>
<td>and also here</td>
</tr></table>

contents here

and also here

I think they all explain themselves but here is a description incase it doesn't.
The border is the border of the table.
The cellspacing is the spacing of the cell walls.
The cellpadding is the padding of the cell, where the contents are.
The table tag order, like all the other HTML tags can be in any order;
<table cellspacing="0" border="0" cellpadding="0" width="100"> is the same as;
<table width="100" border="0" cellpadding="0" cellspacing="0"> etc.
BUT the tags themselves must stay in order and should never cross paths.
<table><tr>
<td> cell contents </td>
</tr></table>

Lets get a bit tricky, lets use rowspan and colspan tags.

Code
<table border="1" cellspacing="0" cellpadding="5" width="50%"><tr align="center">
  <td colspan="2">1 text or pic or both</td>
</tr><tr align="center">
  <td>2 text or pic or both</td>
  <td>3 text or pic or both</td>
</tr></table>

Result

1 text or pic or both
2 text or pic or both	3 text or pic or both

Code
<table border="1" cellspacing="0" cellpadding="5" width="50%"><tr align="center">
  <td>1 text or pic or both</td>
  <td>2 text or pic or both</td>
</tr><tr align="center">
  <td colspan="2">3 text or pic or both</td>
</tr></table>

Result

1 text or pic or both	2 text or pic or both
3 text or pic or both

Code
<table border="1" cellspacing="0" cellpadding="5" width="50%"><tr align="center">
  <td rowspan="2">1 text or pic or both</td>
  <td>2 text or pic or both</td>
</tr><tr align="center">
  <td>3 text or pic or both</td>
</tr></table>

Result

1 text or pic or both	2 text or pic or both
	3 text or pic or both

Code
<table border="1" cellspacing="0" cellpadding="5" width="50%"><tr align="center">
  <td>1 text or pic or both</td>
  <td rowspan="2">2 text or pic or both</td>
</tr><tr align="center">
  <td>3 text or pic or both</td>
</tr></table>

Result

1 text or pic or both	2 text or pic or both
3 text or pic or both

Code
<table border="1" cellspacing="0" cellpadding="5" width="50%"><tr align="center">
  <td colspan="2">1 text or pic or both</td>
</tr><tr align="center">
  <td rowspan="2">2 text or pic or both</td>
  <td>3 text or pic or both</td>
</tr><tr align="center">
  <td>4 text or pic or both</td>
</tr></table>

Result

1 text or pic or both
2 text or pic or both	3 text or pic or both
	4 text or pic or both

The best and easiest way to work these out is by the top line (first td cell), you only have as many cells in the first set of tr tags as you want across your table. I found when I was learning this was to make a table 4 by 4 and then remove cells after adding the rowspan or colspan to suit.

Tables can be a mans or woman's best friend, but can also be our nightmares. Tables are pretty easy with a bit of practice, there are only a few tags that are different for IE and Netscape, but nothing important, only thrilly stuff.
If your table doesn't show once uploaded, first thing you should always do is look at your tags, are there two of each?
Missing tags is the number one reason why tables won't show up. Remember tables are good, but sometimes it pays to break your tables down into two or three smaller ones if you have a really long page. The browser reads and then loads the entire table before showing it. A missing (") quote around values is another main cause of your tables not showing up.

Now could be a good time to go do the side and top bordered background part of the Backgrounds page, if you haven't already done it, you can jump there from here

Tables in tables, or nesting as it's called is just as easy, we just add the new table in-between the <td> and <td> tags of the first table like so:

This is the nested table, notice the border is bigger

This is part of the first table, not the second one.

<table border="1" cellspacing="0" cellpadding="5" width="100%"><tr>
<td><table border="2" cellspacing="0" cellpadding="5" width="100%"><tr>
<td>This is the nested table, notice the border is bigger</td>
</tr></table></td>
<td>This is part of the first table, not the second one.</td>
</tr></table>

The bold tags are the main table, the non-bold is the nested table.

Notice I have kept the contents between the <td> and </td> on the same line? There is a reason for this,
it is to keep the table tight, it's not so important in nested tables but is good practice to keep a clean style throughout.

<td> This is good layout </td>
<td>
this is bad
</td>

Comments are another way of keeping track of your tags etc.
(Remember they aren't seen by the browser).


<table border="1" cellspacing="0" cellpadding="5" width="100%"><tr>
  <td>

<table border="2" cellspacing="0" cellpadding="5" width="100%"><tr>
<td>This is the nested table, notice the border is bigger</td>
</tr></table>

  </td>
  <td>This is part of the first table, not the second one.</td>
</tr></table>

We can align the contents in our tables using the align="" tag,
align="left" or align="center" or align="right"
I think they explain themselves, one thing to remember, the <td> over powers the <tr> and the <tr> over powers the <table>, so if you want everything different use the align="" in the <td>, if you want all the same use the <tr>.
Another way of aligning contents in tables is using the
valign="top" or valign="middle" or valign="bottom"
Again I think they explain themselves, these can be used in the same tag as the align="" ones. Using the align="center" is like using the <center></center> in every <td>.

If you don't specify the align or valign attributes, then the cells will go to the default settings. Here is a quick list of alignments and defaults:

For the <td> and <th> they are:

align= "left","center","right"
The <th> default is to the center (and bold).
The <td> default is to the left.

valign= "top","middle","bottom"
The default valign for both <th> and <td> is to the middle.

Over a large table this can make it a big job so instead we can just specify the alignment and/or valignment in the <tr> tag and if needed change the individual <td> or <th> to suit. The <td> and <th> will override the <tr>, which in turns overrides the <table>.

Want to make a table header? Replace the <td></td> with <th></th> which makes them bold and centered. We can also make a caption around the table, like so:

My table
one	two	three

<table border="1">
<caption>My table</caption><tr>
<td valign="top">one</td>
<th>two</th>
<td align="bottom">three</td>
</tr></table>

My table
one	two	three

<table border="1">
<caption align="bottom">My table</caption><tr>
<th align="right">one</th>
<td>two</td>
<th align="left">three</th>
</tr></table>

The <caption>caption</caption> is inserted just after the opening <table> tag, these also can be aligned to the bottom, default is top and center.

Tables were original made for data, or rather displaying data like so:

Sales for March
Monday	56.2	88.4	45.8	45.8
Tuesday	56.2	88.4	45.8	45.8
Wednesday	56.2	68.4	45.8	35.8
Thursday	5.2	88.4	45.8	45.8
Friday	45.2	12.4	23.8	05.8

And to add a color in the cell use just use bgcolor="#??????" like in the body tag. The TD tags will always over ride the TR and the TR will over ride the TABLE, so becareful what you put where for what, If you keep each cell to it's own you shouldn't have any problems.
Graphics in tables ... We add these in the same way as we do in the body tag, by using background="imagename.jpg" in either the Table or TD cells, but be warned, not all browsers display background images and all browsers display things differently. Internet Explorer tiles (repeats) the background image behind the table whereas Netscape will give each cell it's own image, usually repeats the background image unless specified..

Since this page has become 29 + kb without any graphics I have had to split this into two sections. You have seen nearly all aspects of how tables are made, the next part of this is where the other HTML sites don't go, what I will show you on the next section is how to set up a complete page using tables and the little tricks of the trade.
I have kept the Summary, Exercises and quiz below as there will be more on the next page.

Common errors

Missing the end table tag is very common, make your basic layout (type out all tags) before adding content
Adding content between <table> and <tr> will cause problems, also between </tr> and <tr>, or </td> and <td>. Content goes between <td> and </td>

Summary

We have how tables can be confusing but are really quite simple after a while
We have seen how a table works and what the table, tr and td tags do
We have seen how to align things in tables
We have seen how to change the border, padding of the cell (cellpadding) and spacing of the cell (cellspacing)

Exercise

Make a table 2x2 (two cells high, two cells deep)
Make a table using the colspan anyway you want
Make a table using the rowspan anyway you want
This is an optional exercise. Make a chessboard with black/white/black/white table cells, 8 x 8 (eight wide and eight high) with an outer table with border set to 1. See an example here (  will be needed in the td cells).

These exercises are to get you going, the more you do the better you'll get so if you want to try something go for it, do it. Don't be afraid of trying new things, with HTML the worse you can do is lock up your computer (save your work as you go). HTML is an easy language but trying to filter it down into subjects is hard because every part of it is used within each other.

Optional Quiz