HTML Tabel

http://www.2createawebsite.com/build/table_tutorial.html Basic Table Tags The three most important tags for tables is the opening table tag, and the table row and table data tags - and tag represents a row for the table The tags indicate two rows and the three opening and so forth.... Adding Table Borders Adding a border simply involves inserting the border attribute to the opening table tag. So in the above table the code would be adjusted accordingly:

respectively. The

tag represents a cell (or column) inside the row. Now, with that in mind, let's create a simple table: A B C X Y Z And this is what the table would look like published: A B C X Y Z Notice that by looking at the code, you can tell how many rows and columns are included just by looking at the code. The two opening

tags on each line represents three data cells (or three columns). So if you wanted to add another row, you would just start with another

A	B	C
X	Y	Z

Notice the "2" represents the thickness of the border. If you had set it to "0" then there would have been no border at all. If you wanted it very thick then you could set it to 8, for example. So now your table will look like this: A B C X Y Z Changing a Table's Border Color You can change the color of a table border by simply adding the bordercolor attribute.

A	B	C
X	Y	Z

And here's what it would look like... A B C X Y Z Adjusting Table Cell Spacing and Cell Padding You can increase the space within the table cells and the space between the cells by using the cellpadding and cellspacing attributes. The cellspacing attribute adjusts the space between the cells and cellpadding adjusts the space within (around) the cell.

A	B	C
X	Y	Z

This is what the table would look like now... A B C X Y Z See how setting the cellspacing attribute to "10" drastically increased the spacing between the cells, and the cellpadding attribute set to "3" added a little of space within each individual cell. If you want a table to have a single border (with no border around the letters), simply set the cellspacing to "0" and your table will look like this.... A B C X Y Z Specifying a Table Width You can specify the width of a table by using either a percentage or a pixel width.

A	B	C
X	Y	Z

Since the width is set to 100% that means the table will take up 100% of the screen and the columns in the table will be adjusted evenly. Here's what it would look like. A B C X Y Z As we mentioned, you can also set the table width using pixels instead of percentages. So instead of setting it to 100%, you could set it to 300 pixels:

A	B	C
X	Y	Z

The table would look like this: A B C X Y Z Setting Column Widths Sometimes you may not always want your columns to be the same width. If this is the case, you need to set values on your table data cells. Again, you can set them by using percentages or pixel widths.

A	B	C
X	Y	Z

This is what this table would look like. A B C X Y Z See how the column width for the first column in both rows is set to 70%. Notice there is no value set for the other 2 columns. If you do not set a value for the remaining columns, their width will automatically be adjusted to take up the remaining space and they'll share it equally. Since the table width is set to 300 pixels, and the first column is instructed to take up 70% of those 300 pixels (roughly 210 pixels), the other 2 columns divide the remaining 30% of the table equally (roughly 45 pixels a piece). You could also have expressed the column widths of this table in pixels instead of percentages. The code would have looked like this:

A	B	C
A	B	C

A B C A B C See how the width of the columns in each row add up to 300 (210 + 45 + 45) -- which is the width of the table

Table

Text Alignment within Cells
By default browsers center heading cells (th), and left align data cells (td).
You can change alignment using the align attribute, which can be added to each cell or to the row (tr element).
It is used with the values "left", "center" or "right":

HTML Code :
<table border="1" cellpadding="10" width="80%">
<tr align="center"><td> Table</td></tr>
</table>

Table

HTML Code :
<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Year</th><th>Sales</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>

Year	Sales
2000	$18M
2001	$25M
2002	$36M

Coloring your tables
This page uses a style sheet to set the background colors for tables, with a different color for heading and data cells. The style rules I used are as follows
HTML Code :
<table border="0" cellspacing="0" cellpadding="10">
<tr>
<th bgcolor="#CCCC99">Year</th>
<th bgcolor="#CCCC99">Sales</th>
</tr>
<tr>
<td bgcolor="#FFFF66">2000</td>
<td bgcolor="#FFFF66">$18M</td>
</tr>
<tr>
<td bgcolor="#FFFF66">2001</td>
<td bgcolor="#FFFF66">$25M</td>
</tr>
<tr>
<td bgcolor="#FFFF66">2002</td>
<td bgcolor="#FFFF66">$36M</td>
</tr>
</table>

Year	Sales
2000	$18M
2001	$25M
2002	$36M