Today, tables are used to list data like a spreadsheet, allowing you to have columns and rows to organize your data better or to display a chart online, like the below examples.
<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> What does it all mean? <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.
<tr> <td bgcolor="#FFFF00">1 </td> <td bgcolor="#00FF00">2 </td> <td bgcolor="#00FFFF">3 </td> </tr> <tr> <td bgcolor="#FF00FF">4 </td> <td bgcolor="#FF0000">5 </td> <td bgcolor="#0000FF">6 </td> </tr> <tr> <td bgcolor="#008080">7 </td> <td bgcolor="#FFFF00">8 </td> <td bgcolor="#00FFFF">9 </td> </tr> </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. <table border="0" width="100%"> <tr> <td><img src="http://www.computerhope.com/ccguy.gif"></td> <td><p align="center"><img src="http://www.computerhope.com/title.gif"></p> </td> <td align="right"><img src="http://www.computerhope.com/ccguy.gif"></td> </tr> </table> <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 or area it is 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.
<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.
<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> |
Title for slide 1 here
Replace these every slider 1 sentences with your featured post descriptions.