Help with HTML tables

Tables allow the user to create sections of web sites neatly divided, such as the page you are viewing now, we have one section (the blue section) to the right which allows you to navigate by using the side of the screen while still viewing the page. This also allows you to divide up into columns almost like a spreadsheet, allowing you to have columns and rows to organize your data better or to display a chart online (such as below examples).

HITS	MONTH	TOTAL INCREASE
324,497	January 1998	-
436,699	February 1998	112,172

<table border="1">
<tr>
<td><strong>HITS </strong></td>
<td><strong>MONTH</strong></td>
<td><strong>TOTAL INCREASE</strong></td>
</tr>
<tr>
<td>324,497</td>
<td>January 1998 </td>
<td align="center">-</td>
</tr>
<tr>
<td>436,699</td>
<td>February 1998 </td>
<td align="center">112,172</td>
</tr>
</table>

<table border ="1"> This statement is telling how wide you wish the border to be. "0" would be no border.
<tr> This is the statement to start the first row.
<td><strong>HITS</strong></td> The <td> statement is to start the first column and </td> is to end the first column; the strong statement is making the text bold. The same applies for the next two lines.
</tr> This statement is telling to end the first row.
The next three lines are similar to what was explained above.
<td align="center">-</td> This is similar to the 2nd line; however, the align="center" is the statement to tell it to center the text in the middle of the cell.
The next six lines are similar to what was explained above.
</table> This statement is to end the table without transforming the remainder of the document into the table.

<table border="0" cellpadding="6" cellspacing="0"> In this statement it is first telling the browser that it does not want a border by declaring border="0", also it is declaring that it wants the cells to have a little space by declaring cellpadding="6" this would make the cells bigger than they normally would be. Cellspacing="0" is telling the browser to display space between the cells. If this was 1 you would see white in between the cells; the bigger the number the more space there would be.
<td bgcolor="#FFFF00">1 </td> Td is declaring a new cell, as explained in basics. The bgcolor="#FFFF00" is telling the browser what color to display the cell as; in this case, #FFFF00 would be yellow; you also could just write in yellow. For more on colors, view our color page.

The above image is actually three different images put in a table that is at 100% of the section of the screen. Below is the source code used for the above example.

<table border="0" width="100%"> The most important part of the above is the first line with the statement width=100%. This is telling the browser that the table needs to be 100% of the open screen (please take into consideration on the above example it is 100% of the table currently in) this is good for the fact that even if someone displays your page in a bigger/smaller resolution or screen, it will automatically adjust to the full amount of the viewer's screen.

This question is asked frequently where someone wants to post images and text right next to each other, to have the appearance of a news paper; the below source code shows how we did the above. We condensed our statement to make it look less intimidating.

<table border="0">
<tr>
<td><img src="chguy.gif"></td>
<td valign="top">STATEMENT SHOWN ABOVE </td>
</tr>
</table>

<td valign="top">STATEMENT SHOWN ABOVE </td> The most important line of the source code, valign="top", tells the browser to align the starting of the text at the top of the image, this can also be middle, bottom, right, left, or center.

<table border="10">
<tr>
<td><a href="http://www.computerhope.com">Computer Hope</a></td>
</tr>
</table>

<table border="10"> This button effect is very simple by just making border="10" this makes the border 10 width, giving it the appearance of a button, which you could link to another page just as we did above.

WEB PAGE	DESCRIPTION	HITS	MONTH
Computer Hope	Main page linking to all pages	3912	Feb 98
Cool Tricks	HTML cool tricks	2514	Feb 98

<table border="0">
<tr>
<td bgcolor="#0000FF"><font color="#FFFFFF"><strong>WEB PAGE</strong></font></td>
<td bgcolor="#0000FF"><font color="#FFFFFF"><strong>DESCRIPTION</strong></font></td>
<td bgcolor="#0000FF"><font color="#FFFFFF"><strong>HITS</strong></font></td>
<td bgcolor="#0000FF"><font color="#FFFFFF"><strong>MONTH</strong></font></td>
</tr>
<tr>
<td bgcolor="#00FFFF"><a href="http://www.computerhope.com">ComputerHope</a></td>
<td bgcolor="#00FFFF">Main page linking to all pages</td>
<td bgcolor="#00FFFF"><strong>3912</strong></td>
<td bgcolor="#00FFFF">Feb 98</td>
</tr>
<tr>
<td bgcolor="#00FFFF"><a href="http://www.computerhope.com/cooltrik.htm">Cool
Tricks</a></td>
<td bgcolor="#00FFFF">HTML cool tricks</td>
<td bgcolor="#00FFFF"><strong>2514</strong></td>
<td bgcolor="#00FFFF">Feb 98</td>
</tr>
</table>