Bookmark this page and share it with others! (Or press Ctrl/D on Firefox)
How To Create A Table On Your Web Page
A table in a web page helps you create a separate space to add specific content. It can be used to chart statistics, facts, or any traditional means for a form. It can also set up the structure of your web site to divide it into sections without having to rely on a frame structure.
If you are using a style sheet, you could do a lot more to your table from the sheet itself. It will be helpful, especially if you are using XHTML.
To create a table on your site you need to work within this shell:
<table border="" width="" cellpadding="" cellspacing="" align="">
<tr>
<td></td>
</tr>
</table>You first need to state that you are creating a table, so you need the table tags. The table tags are similar to the body tags, except it is within the body tags.
To open up a table, enter the command:
<table>
You can put all the attributes of the table in with the table command but close it out by simply putting in</table>
When you put in the attributes in with the table command, you direct the borders around the whole table, the spacing between the cells, the padding within the cells and if you want the table to be aligned to the right, left or center.
The border, width, cell padding and cell spacing is measured in pixel units and in percentage. You can make a border around your table as thick as you would like. You can make your table and cell features as wide as you would like.
The table command alone won't do much except provide the basic structure for this area. After the table command, you need to set up your rows going across your table. To create one row, you use the command
<tr></tr>
.For each set of rows you plan on using, create more like this:
<tr></tr>
<tr></tr>
<tr></tr>
Now that you have outlined how many rows will be in the table, you need to know how many cells across each row will have. They all must have at least one cell in it. A cell command goes in between the row command. The cell command is:
<td></td>
You must put the cell command nestled within the row like this:
<tr><td></td></tr>
And your cell must be within your row, just as your row must be within the table as such:
<table>
<tr>
<td>
</td>
</tr>
</table>
In between the
<td></td>
would be where you put in your text or images you want in your table.
If you just want text, it will look like this:
<table>
<tr>
<td>
YOUR TEXT HERE
</td>
</tr>
</table>
If you just want an image, it will look like this:
<table>
<tr>
<td>
<img src="IMAGE_LOCATION">
</td>
</tr>
</table>
If you just want a link, it will look like this:
<table>
<tr>
<td>
<a href="URL">TEXT OR IMAGE HERE</a>
</td>
</tr>
</table>
You can have as many cells as you want on each row. It could be the same number of cells on each row or it could be various amounts of cells per row.
Of course you could combine all these elements. These above references are specifically for HTML document types as XHTML has a few different set of rules. It is best to consult the proper document manual pertaining to the document type you are using.