Tables are supposed to be used to display data in an organised way.
You're not supposed to use Tables to define the structure/layout of your webpage, but I've yet to encounter a web designer who doesn't, so feel free to do this.
All tables are created with the <><table> TAG and it's closing TAG (</table>).
Lets start by creating a blank HTML page, as described in the HTML Basics chapter, and adding the <table> & </table> TAGS inbetween the <body> & </body> TAGS:
<html>
<head>
<title></title>
</head>
<body>
<table>
</table>
</body>
</html>
Now you need to decide what you want your table to look like. You can use any or all of the following inside the <table> TAG to define it's look:
width=""
This specifies how wide you want the table to be. You can use pixels as width (500), or a percentage of the browser window (50%). It's height is automatically calculated by what content you place inside the table so you don't need to worry about that. If you don't specify a width, the width will be automatically calculated by the content (the same as the height is)
bgcolor=""
This specifies the color of the background for the whole table. You can override this setting for individual cells by using the bgcolor="" attribute on each cell. Insert a name (red), or a hex code (#FF0000) between the quote marks ("").
background=""
The specifies the image to use as a background for the whole table. You can override this setting for individual cells by using the background="" attribute on each cell. Insert the URL of the image between the quote marks ("").
border=""
This specifies the type of border for the whole table. You can override this setting for individual cells by using the border="" attribute on each cell. 0 = no border, 1 or above = a border (higher the number, thicker the border).
bordercolor=""
This specifies the colour of the border for the whole table. You can override this setting for individual cells by using the bordercolor="" attribute on each cell. Insert a name (red), or a hex code (#FF0000) between the quote marks ("").
align=""
This specifies how you want the table aligned in the browser, and relative to surrounding text. Options are left, right & center. If you don't specify an alignment, the default is left.
cellspacing=""
This specifies how much space to leave between CELLS.
cellpadding=""
This specifies how much space to leave inside each CELL, between the CELL border and the content.
The following code would display a table that is 500 pixels wide, has a background colour, a thin white border, aligned to the left, with CELLS that are 2 pixels apart, and each CELL has 5 pixels of space between it's edges and the content:
<html>
<head>
<title></title>
</head>
<body>
<table width="500" bgcolor="#666" border="1" bordercolor="#FFFFFF" cellspacing="2" cellpadding="5">
</table>
</body>
</html>
Now that we have the basic Table structure, we need to look at how to add CELLS to it.
A Table is made up of ROWS, and those ROWS are then divided into CELLS (COLUMNS):
<table width="500" bgcolor="#666" border="1" bordercolor="#FFFFFF" cellspacing="2" cellpadding="5">
<tr>
<td><font color="#FFFFFF">Hello</font>
</td>
<td><font color="#FFFFFF">There!</font>
</td>
</tr>
</table>
To explain the above code:
<tr>
This signifies the start of a ROW.
<td>
This signifies the start of a CELL. What appears after this TAG, is what will be displayed in that CELL - in this case, the words "Hello" & "There!".
</td>
This signifies the end of a CELL.
</tr>
This signifies the end of the ROW.
This is what the Table would look like:
| Hello | There! |
As you can see, there are 2 CELLS inside the ROW. The ROW has simply been divided between the 2 CELLS, with more space allocated to the CELL with most content. If you want to make one CELL bigger or smaller than the other, or both the same size, you can add the width="" ATTRIBUTE to the <td> TAG.
Example: <td width="100"><font color="#FFFFFF">Hello</font></td>
Your table would now look like this:
| Hello | There! |
Here are some other ATTRIBUTES you can use inside the <td> TAG:
width=""
This specifies how wide you want the CELL to be. You can use pixels as width (500), or a percentage of the table width (50%). If you don't specify a width, the width will be automatically calculated by the content.
height=""
This specifies how high you want the CELL to be. You can only use pixels to specify height (500). If you don't specify a height, the height will be automatically calculated by the content.
bgcolor=""
This specifies the color of the background of the CELL. This can be different from that of the TABLE. Insert a name (red) or a hex code (#FF0000).
background=""
The specifies the image to use as a background for the CELL. This can be different from that used for the TABLE. Insert the URL of the image between the quote marks ("").
border=""
This specifies the type of border for the CELL. This can be different to that specified for the whole table. 0 = no border, 1 or above = a border (higher the number, thicker the border).
bordercolor=""
This specifies the colour of the border for CELL. This can be different to that specified for the whole table. Insert a name (red), or a hex code (#FF0000) between the quote marks ("")..
align=""
This specifies how you want the CELL contents horizontally aligned within the CELL.
Options are left, right, center & justify.
valign=""
This specifies how you want the CELL contents vertically aligned within the CELL.
Options are top, middle & bottom.
rowspan=""
This specifies the number of ROWS this CELL should span.
colspan=""
This specifies the number of COLUMNS this CELL should span.
For more on how to use the rowspan="" & colspan="" ATTRIBUTES, go to HTML Tables 2