Tables are something you will probably need to make use of on your web pages. You may use them to simply structure your data for easy viewing. Some people actually use tables to form the basic layout of their pages. I will address using tables for design later in this course. For now, let me simply introduce the HTML needed to create simple tables.

[hidepost=1]

A Basic Table

A basic table is made up of rows and columns. Here is a basic table:

Each space in the table is called a cell. Now, let’s look at the HTML which created this table:

All tables start out with the <table> tag. From there, you will create a new table row using the <tr> tag. Each cell on that new row will be created with a <td> tag.

In the example above, you can see that I create three table rows. So, in the HTML, you will see three sets of <tr> tags (opening and closing tags). In each, I have three cells. The cells are defined left to right and you can see by comparing the text in each cell to the HTML code how that works. I simply put short text into each table cell, but a table cell can contain anything including paragraphs, images, even entire sub-tables. Pretty much anything could go into a table cell.

Table Headings

You can give a table headings by simply using a table row and then making the text inside each cell bold. However, there is also a special HTML tag just for table headers. That tag is the <th> tag. Let’s demonstrate:

Now here is the HTML for this table:

You can see here that the <th> tag simply created new cells at the top of the table for the purposes of displaying column headers. The browser also automatically center aligned and “bolded” the text in those cells.

Table Cells With No Content

In the examples above, every table cell had something in it. Now, if nothing was entered, we have a different scenario. For example, if instead of <td>content</td> we had simply <td></td>, we still have a table cell. There is just no content in it. Most web browsers are not going to display a table cell if it does not have content. So, in the above example, if I left the word “two” out of it, that bottom right cell would be invisible. The way to get around this is to use what is called a “non breaking space”. This is basically an HTML special character which represents a space. The HTML for non breaking space is “ ”. Where your web browser encounters this, it will display a space. By entering this character into the table cell, you will ensure the cell is displayed despite not having any contents.

Table, Row and Cell Properties

Without any formatting, tables can look a little boring. By default, too, all tables show borders around each cell (see above). There are various properties that can be added to these basic HTML table tags to control the look and feel of your table.

• Width. The width property will control the width of the table. The number can be either in pixels or a percentage. A width of 100% will mean that the table will span the entire width of your page or any table which contains it. If the number is not a percentage, then it is in pixels. The width property, when applied to the <table> tag (such as in the examples above) will control the width of the whole table. If applied to the <td> tag, it will control the width of only that table cell.
• Border. Just like images, the border attribute will give each cell of your table a border of the specified width. If you do not want a border, the border should be defined to 0.
• Cellpadding. This is the width (in pixels) of any spacing between the edge of the table cell and it’s contents.
• Cellspacing. This is the width (in pixels) of any spacing between individual cells of your table.
• Align. Just like images, you can align tables to the left, right, centered, etc.
• Bordercolor. This controls the color of the lines which make up the borders around the cells (if you specify to show a border).
• bgcolor. This is the color of the background of your table or table cell.
• Background. This would be an image filename for giving your table or table cell an image background.

Let’s now create a table which demonstrates many of these formatting properties:

Now here is the code for this table:

You can see, in this table, that I made it 500 pixels wide and gave it a cell spacing of 10 and cell padding of 5. With the high cell padding, you can see the large spacing between cells. I used the bgcolor property to give a single cell a background color of yellow. You will also see that I changed the width of the first column to 200. What this does is set that column to 200, then has the remaining 3 columns evenly fill out the remaining 300 pixels.

You will also note that changing the width of the first row also changed the width of every cell in the same column. This is because tables are in a grid pattern and the cells must line up.

[/hidepost]

Like what you read?

If so, please join over 28,000 people who receive our exclusive weekly newsletter and computer tips, and get FREE COPIES of 5 eBooks we created, as our gift to you for subscribing. Just enter your name and email below: