How to Create Tables Tutorial

Links / List of Commands

Tables open up a whole new world in HTML. With Tables, you can control how things appear on a web page and can format data cleaner on a page.

Tables may appear to be a more advanced topic, and in future tutorials, tables will be used extensively to see the amazing things you can do. As someone learning beginning HTML, tables will be a concept you should learn.

Netscape originated tables, and as such, made the commands for them. To open a table, the <TABLE> command should be used. The other tags you need to know are Table Row <tr> and Table Cell <td>. One key thing to remember is that a <td> is always enclosed in a <tr> which is always enclosed in a <table> tag.

First, let's create a basic table with 4 cells:

The code for this table is:

<table border>
<tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr>
<tr>
<td>Third Cell</td>
<td>Fourth Cell</td>
</tr>
</table>

In this code, you can see that there are two <tr> tags, or two rows. Within the first row is the First Cell and Second Cell, each inside a set of <td> tags. In the second row, the Third Cell and Fourth Cell is enclosed in their <td> set of tags. As you see with the <table border> tag, the border was added so we could see it. To see a border of a different size, set the border equal to a number, such as <table border=3>.

Now, let's learn some important attributes of Tables. These are the main attributes of a table: border, width, cellpadding, cellspacing, bgcolor, and background. Border sets the size of the border around the table. Width can be expressed in pixels or %, it specifies the width of the tag it is in, it is available to all of the table tags. Cellpadding determines the padding width between each of the table's cells. Cellspacing specifies the spacing width between each of the table's cells. Bgcolor specifies a background color of the table and background specifies a background image in the table.

An example of using several of these commands is:

<table border="3" width="75%" bgcolor="#CC0000">

Now that we have learned some basic HTML and tables, let's look at a summary of a lot of the useful HTML commands you can use.

Prev Page / List of Tags