[an error occurred while processing this directive]

Site Menu

HTML
Learn all about HTML, how to format text, add images, create tables, meta taga, and more!
.
JavaScript
Get the low down on JavaScript. See how to create popular JavaScript applications like drop down menus, clocks, dynamic messages, popup boxes, and more.
.
CGI
Concise, easy to follow introdction to CGI and how to install CGI scripts.
.
Web Design
A miscellanous section that includes various web design tutorials

 

123 Web Design!

Creating tables

Tables can get quite hairy to create, but they are a very important part of HTML, and must be learnt eventually. In this section, I'll  cover the general syntax for creating tables- complex tables are beyond the scope of this tutorial, though.

All tables involve using the below three tags:

<table></table> Defines a table. All tables begin and end with this tag.
<tr></tr> Defines a row. A table must have at least one row (think about it).
<td></td> Defines a cell within a row. All tables must also have a least one row.

The best way to illustrate how to create tables is to begin by showing the syntax involved in creating a basic table:

<table>
<tr>
<td>A basic table</td>
</tr>
</table>

A basic table

Take special note of the structure of the tags- All tables begin with the <table> tag, followed by at least one <tr> tag, and then by at least one <td>.

Lets take the above a little further and create a table with two cells (as opposed to just one):

<table border=1>
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
</table>

This is the first cell This is the second cell

Want to try for a table with two rows, and two cells in each of the row?

<table border=1>
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
<tr>
<td>This is the third cell</td>
<td>This is the fourth cell</td>
</tr>
</table>

This is the first cell This is the second cell
This is the third cell This is the fourth cell

Since we wanted two rows, we defined two <tr> tags. Since we wanted two cells in each of the row, we defined two <td> tags inside each of the <tr>. Not that bad, right?

-Table attributes

Before we get too carried away with creating tables, its appropriate to first introduce the attributes available in manipulating a table's appearance, such as border size, background color, row/cell width etc. Below lists these important attributes:

width Available to all of the table tags. Used to determine the tag's width, either in px or %
border Available to the <table> tag. Defines its border size
cellpadding Available to the <table> tag. Defines the padding width between each of it's cells.
cellspacing Available to the <table> tag. Defines the spacing width between each of it's cells.
bgcolor Available to the <table> tag. Defines the background color of he table
background Available to the <table> tag. Specifies the background image of the table.

I encourage you to individually try out all of these attributes; here's an example that uses several of the attributes at once:

<table border="2" width="136" background="backgr15.jpg" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">Sample table<br>Sample table></td>
</tr>
</table>

Sample table
Sample table