A table requires three surrounding tags. <table>, <tr> and <td>. <table> defines the table, <tr> defines the row of a table and <td> defines a cell in the table. So lets start with the most basic table HTML.Preview:

Table

Lets give this table a width.

Preview

Table

Now, when a border is added to the table, the border is not exactly on the table. It is on the table itself and its cells.

If a border is added, it will give a better illustration.

Preview

Table

Now, when a border is added to the table, the border is not exactly on the table. It is on the table itself and its cells. There are also other border related attributes - bordercolor, bordercolordark, bordercolorlight. Bordercolor is meant to be used alone while bordercolordark and bordercolorlight should be used together.
Fig. 5. For firefox, bordercolor is the colour of bordercolordark, the browser will display a lighter colour for the lighter border. While for IE, it is the colour of both bordercolordark and bordercolorlight. Weird huh?
Fig. 6. Here is the bordercolorlight and bordercolordark. For your information, it does not work on firefox and I do not know why.

Preview

Secondly, the browser will automatically put spacing between that border and padding (spacing) in the cell. If you zoom up closer, you can see it.

Fig. 2.
So if you do not want the spaces, simply make them equal to zero.

Preview

Table

However, if you do want it, simply adjust it so that it will look good. Just by adjusting the cellspacing and cellpadding, it can make a table look very nice, and it is easy especially for beginners.

Preview

Table

As I've mentioned earlier, <td> is a surrounding tag that wraps the contents in a cell of a table. So by typing <td></td> in between the table tags, you are giving the table a new cell. Try it out!

Preview

Cell 1

Cell 2

Cell 3

Cell 4

Also, <tr> is a surrounding tags that wraps <td> tags to form a row in a table. It is very similar with the line and line break <br> concept, however, <tr> requires an ending tag.

Preview

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 3	Row 2, Cell 4

Preview Example

Row 1, Cell 1
Row 2, Cell 3	Row 2, Cell 4

Tbl. 1

Row 1, Cell 1
Row 2, Cell 2	Row 2, Cell 3

Tbl. 2

If you compare the above table and the one above it, you will notice that Row 1, Cell 2 has no border in Tbl. 2. This is because the web developer mis coded the table. Although there is no harm, but it does not look good. When you intend to leave a table cell blank, it is very advisable not to remove the <td></td> tags. Instead, put &nbsp; in between the <td> tags, so that there will be a spacing.

I hope you are getting the hang of tables because it is very easy to do. These portion can be considered complicated for beginners. Take the below example.

Preview Example

TITLE
Menu	Content

As you can see, the above example is pretty much like a website. However, this tutorial is about tables so I won't tap into it. Okay, as you can see, row 1 has only 1 cell while row 2 has 2. The way to achieve this is by adding or removing cell(s) (<td></td>) as shown in the miscoded segment F, however there is more to that! It is by rowspan and colspan. I'll explain them in segments H amd I below.

Okay, now for example I'll take down the HTML table from segment E. Just to start off, I'll show you an example to give you a rough idea.
Fig. 3.As you can see, the colspan attribute tells the cell to span over the number of columns which is the value. So the value is 2, Row 1 spans over 2 columns. This is the code. Oh and, if you are going to add many things onto the table or adding attributes, you might want your HTML to look nicer so that you can edit it easier.
Using this concept, you can actually put multiple cells to span even more cells! Making table look crazy! By the way, I have added some cellpadding for a better view of the table.

Preview

Row 1, Cell 1 Spans Over 2 Columns		Row 1, Cell 2 Spans Over 5 Columns					Row 1, Cell 3 Spans Over 3 Columns
Row 2, Cell 4	Row 2, Cell 5	Row 2, Cell 6	Row 2, Cell 7	Row 2, Cell 8	Row 2, Cell 9	Row 2, Cell 10	Row 2, Cell 11	Row 2, Cell 12	Row 2, Cell 13
Row 3, Cell 14 Spans Over 4 Columns				Row 3, Cell 15 Spans Over 6 Columns
Row 4, Cell 16	Row 4, Cell 17 Spans Over 2 Columns		Row 4, Cell 18 Spans Over 5 Columns					Row 4, Cell 19 Spans Over 2 Columns

You should read the previous segment on colspan before you start on rowspan to get a better idea. For rowspan, you can get this.

Preview

Row 1, Cell 1	Rows 1 & 2, Cell 2 Spans Over 2 Rows
Row 2, Cell 3

Again, as you can see, the rowspan attribute tells Cell 2 to span over 2 rows which is the value. Now I'm not going to make another crazy example, you can try it out yourself.

Please take note that you cannot make such tables.
Fig. 4. This is because, every cell in the same column of every row must have the same width and every cell in the same row of every column must have the same height. In other words, all cells (1,5,9,13) in Column 1 must have the same width and every cell (1,2,3,4) in Row 1 must have the same height.

Row 1, Col 1, Cell 1	Row 1, Col 2, Cell 2	Row 1, Col 3, Cell 3	Row 1, Col 4, Cell 4
Row 2, Col 1, Cell 5	Row 2, Col 2, Cell 6	Row 2, Col 3, Cell 7	Row 2, Col 4, Cell 8
Row 3, Col 1, Cell 9	Row 3, Col 2, Cell 10	Row 3, Col 3, Cell 11	Row 3, Col 4, Cell 12
Row 4, Col 1, Cell 13	Row 4, Col 2, Cell 14	Row 4, Col 3, Cell 15	Row 4, Col 4, Cell 16

However you can make tables like this.

Preview

Make some no border adjustments with CSS and there you go.

Preview

I hope you have picked up quite a number of tips from this tutorial. Now I'll show you how to style up a page just using tables and some basic HTML tags.

Preview

Welcome!
Home Profile Link 1 Link 2 Others Link 3 Link 4 Link 5 Links Link 6 Link 7 Link 8	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet vulputate justo. Etiam viverra, justo quis scelerisque consectetuer, tortor metus ultricies turpis, sit amet vulputate lorem arcu ac lectus. Nulla justo elit, tristique ut, egestas nec, commodo sit amet, velit. Proin venenatis dignissim lorem. Donec accumsan lorem vel neque. Suspendisse ultricies orci non lectus. Vivamus condimentum adipiscing ipsum. Proin purus nulla, euismod ac, lacinia in, rhoncus nec, est. Mauris ultrices, justo at scelerisque accumsan, libero risus lobortis tortor, ac semper purus risus nec massa. Ut nonummy, risus vitae egestas interdum, nibh magna volutpat odio, non accumsan purus nulla vitae tortor. Vivamus euismod, eros sit amet nonummy tincidunt, magna odio rutrum elit, quis auctor nisi urna et metus. Sed magna velit, lobortis ut, imperdiet vitae, pretium eget, mauris. Aenean eu sem at sapien pulvinar aliquam. Praesent est mauris, scelerisque quis, suscipit nec, facilisis eu, enim. Curabitur accumsan, tellus non tempus ullamcorper, libero libero malesuada mi, et lacinia ligula urna quis nisl. Ut tincidunt, velit vitae hendrerit ultricies, odio odio dapibus mi, in varius justo eros vitae nisi. Pellentesque augue.
Copyright © MySite 2007

Yes! Go ahead and modify it or even use it for your own site. I have finally come to the end of my HTML table tutorial.