I have to confess that it's not easy to master HTML tables, especially
complex ones.  When I first tried to learn how to code HTML table, almost
all the tutorials start with a simple example such as this one:

<table border="2">
    <tr>
        <td>cell1</td>
        <td>cell2</td>
    </tr>
    <tr>
        <td>cell3</td>
        <td>cell4</td>
    </tr>
</table>

The code above will output a table like this one:

cell1	cell2
cell3	cell4

Now, how helpful that is to understand how HTML table coding works is up to
you.  I'm going to delve into a little more to help the rest of you
understand how these tags work.

First, to start any HTML table, you will need the table tag:
<table></table>.  Within the opening <table> tag you may
specify different properties such as the width of the table border, as the
example above have shown, background color, background image, width, height,
vertical and horizontal alignment, and CSS styles.  These are the usual
properties that people use when they design their table.

Before we get all fancy, we need to understand how a table structure is
formed, namely, how do you control how many rows and columns in your table.

Besides the <table></table> tags you will need to know <tr></tr>
and <td></td> tags.

<tr></tr> tags creates a row in your table (just remember, the r
in <tr> is for row), and each <td></td> creates a column in
that row.

Let's look at a different example,

name	sex	age	hobby
steven	male	20	basketball
cathy	female	22	knitting

The code for the above table is:

<table border="2" width="80%">
    <tr bgcolor="gray">
        <td width="25%">name</td>
        <td width="25%">sex</td>
        <td width="25%">age</td>
        <td width="25%">hobby</td>
    </tr>
    <tr>
        <td width="25%">steven</td>
        <td width="25%">male</td>
        <td width="25%">20</td>
        <td width="25%">basketball</td>
    </tr>
    <tr>
        <td width="25%">cathy</td>
        <td width="25%">female</td>
        <td width="25%">22</td>
        <td width="25%">knitting</td>
    </tr>
</table>

As you can see, there are 3 rows, and 4 columns of data.  Therefore, you
can expect to see three <tr></tr> tags contained in your
<table></table> tags, with each <tr></tr> tags
containing 4 columns of data (thereby 4 <td></td> tags in each row).

In the example above, you will also notice that we have set the background
color of the first row to gray, by specifying the bgcolor property (stands for
background color) to gray <tr bgcolor="gray">

Also notice the width of the first table in the example, and the width of the
2nd table example.  If you do not specify the width of the table, the width
of the entire table will be just long enough to display the column data.

If you want to remove the ugly table border, you may simply set the
border="0" and it will be gone!

Bonus material:
If you do like to have a border, but not the ugly one, here is how you can
replace the ugly table border with a nice, slick looking CSS style border.

In your <table> tag, specify this property: style="border-collapse:collapse;border:
1px solid" so the code for the HTML table in our 2nd example becomes:

<table border="2" width="80%"
style="border-collapse:collapse;border:1px solid">
    <tr bgcolor="gray">
        <td width="25%">name</td>
        <td width="25%">sex</td>
        <td width="25%">age</td>
        <td width="25%">hobby</td>
    </tr>
    <tr>
        <td width="25%">steven</td>
        <td width="25%">male</td>
        <td width="25%">20</td>
        <td width="25%">basketball</td>
    </tr>
    <tr>
        <td width="25%">cathy</td>
        <td width="25%">female</td>
        <td width="25%">22</td>
        <td width="25%">knitting</td>
    </tr>
</table>

Here is what it will look like:

name	sex	age	hobby
steven	male	20	basketball
cathy	female	22	knitting

That's it for now!  More advanced HTML table tutorial will come later.

[Reply] [Back to Top]