HTML Code Examples Index
1. HTML Page Layout Basics	2. Creating HTML Hyperlinks	3. Creating HTML Tables
4. Font/Text Types & Colors	5. Working With HTML Images	6. Creating HTML Lists
7. Working With Backgrounds	8. Importing JavaScript Files	9. Importing CSS Files

Create An HTML Table

If you can master creating HTML Tables, you will have the ability to create great looking websites using these tables, the trick is understanding how exactly they work, and I'm going to show you that next.

Lets start with the basic structure of a table then will keep adding little things to demonstrate our point.

1. Basic HTML Table Structure

You must understand that a table is created using rows and and cells.

You can have as many rows as you want in a table and each row can have as many cells as you want, of course you have to keep in mind the height and width of your web page when your designing your table so you do not make it too big.

Take a look at this code:

<table border="1">     *** This is the starting tag, we included a border 
                           so you can see the cells otherwise your table 
                           will have no border.

<tr>                   *** This is the declaration of row 1 starting.
<td>row 1, cell 1</td> *** This is how you create a cell, this is cell 1.
<td>row 1, cell 2</td> *** This is cell 2.
</tr>                  *** This is how you end your row.


<tr>                   *** This is the declaration of row 2 starting.
<td>row 2, cell 1</td> *** This is how you create a cell, this is cell 1.
<td>row 2, cell 2</td> *** This is cell 2.
</tr>                  *** This is how you end your row.

</table>               *** This is your ending tag for your table.

The above code produces the following table:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

2. Creating A Border For An HTML Table

Just like the example above where we added the code (border="1"), this means add a border of width 1.

You can make the width of any table border as wide as you want, but be careful not to make it too wide or it will make your cells smaller, I usually use a border of size 1.

The way to add a border is very simple, you have to add it to your starting TABLE tag like below:

<table align="center" border="1"> *** A border of size 1.

This will produce the following border for a table:

row 1, cell 1

If you increase the size of the border to 5.

<table align="center" border="5"> *** A border of size 5.

This is what you will get:

row 1, cell 1

As you can see the border is wider and more thicker, change the border's size to anything you like just be careful not to make it too thick.

3. Creating HTML Table Headers

The simplest way to understand this, is by making the connection between the header and the amount of columns you have.

What this means is that you can add headers to your table, according to the amount of columns you have.

For example take a look at this:

<table border="1">

<tr>
<th>First Header</th>     *** First Header For Row 1.
<th>Second Header</th>    *** Second Header For Row 2.
</tr>

<tr>                      *** Row 1.
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>

<tr>                      *** Row 2.
<td>row 2, cell 1</td>
<td>row 2, cell 2<</td>
</tr>

</table>

We added 2 headings since we have 2 columns in this table, thus each row will have its own heading and this will produce the output below:

First Header	Second Header
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

4. Adding A Column Span "colspan" To Your HTML Table

If you have more than 1 column in your table, you can create an additional row where it consists entirely of 1 cell, and it will take the width of your whole table.

Take a look at the example below:

<table border="1">

<tr>                                   *** Row 1 Begins.        
<td colspan="2">A COLSPAN DEMO!</td>   *** Using colspan and merging 2 cells.
</tr>                                  *** Row 1 Ends. 

<tr>                     	 		     *** Row 2.
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>

<tr>                      			 *** Row 3.
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>

</table>

In the example above you can see that in row 2 and row 3 there are 2 columns (2 cells in each) which is why we used a (colspan="2") when we created the first row, that way it can merge those 2 cells together into 1.

This will produce the following table:

A COLSPAN DEMO!
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2