Tables operate as spreadsheets or charts similar Microsoft's Excel. Instead of simply putting data in rows and columns you can create complex layout designs by adding images and color to different cells.
There are three basic units that make up a table -- table tag, table row, and cell tag. Table tag: <table> begins the table and </table> ends it. The table tag tells the browser you're creating a table. Row tag: <tr> indicates the start or a row and </tr> indicates the end of a row. Cell tag: <td> designates an individual cell and </td> ends the cell. Set Your HTML Table Look at this graphic. You can see it has two rows with two cells on each row. In the top two cells I've put the words knife and fork. Inside the bottom two cells are the words spoon and cup. In HTML the table looks like this: <TABLE BORDER> <TR> <TD>Knife</TD> <TD>Fork</TD> </TR> <TR> <TD>Spoon</TD> <TD>Cup</TD> </TR> </TABLE> CREATE THIS TABLE <table> begins the table. Next add <tr> to signal the beginning of a row. Then add two cells using the <td> tags. Within each <td> tag is the information I want in the cell. In this case the first cell has knife, and the second a fork. The row is finished with </tr>. Repeat the same tags to create the second row. To finish, close off the table with </table>. Change the Shape of Your HTML Table A cell can span and stretch across a number of columns. If you want to add a dinner plate to the table arrangement and you want it to span two columns, you'd do that by using the colspan tag. To write this in HTML, simply add another row or <tr> to your table and tell the cell to span two columns by adding colspan=2 to your td or cell tag. <td colspan=2> The finished table will look like this graphic. Finish setting the table by adding a wine glass on the left and have it span two rows using the rowspan tag. To do this I add another cell and tell it to span two rows by writing rowspan=2. <tr rowspan=2> Look at this graphic to see an example of rowpspan. Just remember if you want a cell to stretch horizontally use colspan. To stretch it vertically, use rowspan. There are lots of other features in tables that you can have fun with. If you use the cellspacing tag you can make the border around your cells thicker. If you'd like to push your text or graphic away from the edge of your cell you can use the cell padding attribute to your table tag. To make your padding or spacing fatter simply specify the number of pixels wide you want it to be. It looks like this. cellpadding=# of pixels cellspacing=# of pixels This graphic is an example of cell padding. There are many unusual ways you can customize your page using tables, so don't think that you just need to use them for spreadsheet data. It's time to give your own creative touch to setting the tables on your website.
Table tag: <table> begins the table and </table> ends it. The table tag tells the browser you're creating a table.
Row tag: <tr> indicates the start or a row and </tr> indicates the end of a row.
Cell tag: <td> designates an individual cell and </td> ends the cell.
Set Your HTML Table
Look at this graphic.
You can see it has two rows with two cells on each row. In the top two cells I've put the words knife and fork. Inside the bottom two cells are the words spoon and cup.
In HTML the table looks like this:
<TABLE BORDER> <TR> <TD>Knife</TD> <TD>Fork</TD> </TR> <TR> <TD>Spoon</TD> <TD>Cup</TD> </TR> </TABLE>
<TR>
<TD>Knife</TD>
<TD>Fork</TD>
</TR>
<TD>Spoon</TD>
<TD>Cup</TD>
</TABLE>
CREATE THIS TABLE
<table> begins the table. Next add <tr> to signal the beginning of a row. Then add two cells using the <td> tags. Within each <td> tag is the information I want in the cell. In this case the first cell has knife, and the second a fork. The row is finished with </tr>. Repeat the same tags to create the second row. To finish, close off the table with </table>.
Change the Shape of Your HTML Table
A cell can span and stretch across a number of columns. If you want to add a dinner plate to the table arrangement and you want it to span two columns, you'd do that by using the colspan tag.
To write this in HTML, simply add another row or <tr> to your table and tell the cell to span two columns by adding colspan=2 to your td or cell tag.
<td colspan=2>
The finished table will look like this graphic.
Finish setting the table by adding a wine glass on the left and have it span two rows using the rowspan tag. To do this I add another cell and tell it to span two rows by writing rowspan=2.
<tr rowspan=2>
Look at this graphic to see an example of rowpspan.
Just remember if you want a cell to stretch horizontally use colspan. To stretch it vertically, use rowspan.
There are lots of other features in tables that you can have fun with. If you use the cellspacing tag you can make the border around your cells thicker. If you'd like to push your text or graphic away from the edge of your cell you can use the cell padding attribute to your table tag.
To make your padding or spacing fatter simply specify the number of pixels wide you want it to be. It looks like this.
cellpadding=# of pixels cellspacing=# of pixels
cellspacing=# of pixels
This graphic is an example of cell padding.
There are many unusual ways you can customize your page using tables, so don't think that you just need to use them for spreadsheet data.
It's time to give your own creative touch to setting the tables on your website.
For ultimate control over the webpage layout you need to learn how to make tables using HTML. Tables allow flexibility to line up graphics and text. This helps organize content on your webpages.