| A table is composed of cells, columns, and rows. A column is a section that is vertical (up and down). A row is a section that is horizontal (left and right). And a cell is the little rectangle that is created when a column and row intersect (cross each other). Creating a Table: Every table begins with <table> as the opening tag. Inside this tag, you can edit all the table properties like this: <table background="URL" border=1 bordercolor=blue cellpadding=1 cellspacing=1 rules=none> Border strength can be from 1-9, the higher the # the larger the border Cellpadding and cellspacing has no limit but regularly remains within the numbers 1-8, they control the amount of space between each cell in your table, again, the higher the # the more space between cells The tag that says background can also be bgcolor=color with whatever color you like as the background instead of an image Rules are the lines within a table, if you don't want them use the command none, if you want only vertical lines use the command cols and if you want only horizontal lines use the command rows. Adding Rows and Columns: Directly after the opening table tag you need to add your first row use the code <tr> for this. The code for a column is <td> and it comes directly after the <tr> code. Put it together and it looks like this: <table background="URL" border=1 bordercolor=blue cellpadding=1 cellspacing=1><tr><td>Text in your table</td></tr> ~~~Note: You must open AND close each row and column tag. You may add as many columns (<td>) as you need in each row (<tr>) you have. However, if you have more than one row in a table, it's assumed that each row will have the same number of columns, otherwise it will look funny. If you want more than one row and more than one column, it will look like this: <table bgcolor=lightblue border=2 bordercolor=navy cellpadding=2 cellspacing=3> <tr><td>Text in the first column, first row</td><td>Text in the second column, first row</td><td>Text in the third column, first row</td></tr> <tr><td>Text in the first column, second row</td><td>Text in the second column, second row</td><td>Text in the third column, second row</td></tr> <tr><td>Text in the first column, third row</td><td>Text in the second column, third row</td><td>Text in the third column, third row</td></tr></table> Alignment: It's the same as on the main page except you put it before you start the table if you want the whole table to be centered on your page: <p><center><table>Text in the centered table</table></center</p> If you want the text in the table to be centered in the cells: <p><center><table border=1 bordercolor=navy cellpadding=2 cellspacing=2><tr> <td><center>Centered text in centered table</center></td></tr></table> </center></p> Like this: Graphics: You can have graphics in your table, just like on your pages. Each graphic can have their own cell, or they can share their cell with more images and/or text. Simply insert the image the section of the table you want it to be in: <table border=1 bordercolor=blue rules=none><tr><td>Text describing the image that appears on it's left</td><td><center><img src="URL of image"><center></td> </tr></table> Row and Column Spanning: Whenever you have a title on your table, you might want it to be in a longer row than the other rows which contain information so you use row and column spans. For example, if you have a title row that you want to stretch across the three columns beneath it you'd use: <table border=1 bordercolor=navy cellspacing=5 cellpadding=5><tr><td colspan=3><center>Title Text </center></td></tr><tr><td>First column text</td><td>Second column text</td> <td>Third column text</td></tr></table> For a column on the side that titles the rows that follow you use this html: <table border=1 bordercolor=navy rules=none> <tr><td rowspan=3><center>Title Text</center></td></tr> <tr>First row text</tr> <tr>Second row text</tr> <tr>Third row text</tr></table> Well, that's all you need to know about tables and the html to create them! They're fun to play with and look really nice in shops and on web pages so mess around with them, it will soon be easy for you to make your own! |
 |
|
|
|
|
|
|
|
|
|
 |
|
|
|
