Tables come in very handy in HTML, not just for presenting data but for designing the layout of your page.
As you are new to HTML I am going to show you how to create your own basic table. Many beginners find tables very daunting and I was no different, dont worry if you dont get it first time, keep trying and it will eventually all fall into place!
As you are new to HTML I am going to show you how to create your own basic table. Many beginners find tables very daunting and I was no different, dont worry if you dont get it first time, keep trying and it will eventually all fall into place!
1. There are 3 main tags for the table we will be creating:
Table - <table>
Table Row - <tr>
Table Cell - <td>
Table Row - <tr>
Table Cell - <td>
I will now show you how to create the following table:
| Cell1 | Cell2 |
| Cell3 | Cell4 |
And here's the code:
<table border>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
As you can see, the first table row encloses cells 1 and 2; the second table row encloses cells 3 and 4. Table rows always run horizontally. The contents of each cell - in this case, the words "Cell 1" or "Cell 2" - are sandwiched between the <td> and </td> tags.
As you can see, the first table row encloses cells 1 and 2; the second table row encloses cells 3 and 4. Table rows always run horizontally. The contents of each cell - in this case, the words "Cell 1" or "Cell 2" - are sandwiched between the <td> and </td> tags.
In order to see the table, I added border to the table tag. This simply turns the border on. You can also specify its width by adding a number, as in <table border=5>.
"Colspan" and "rowspan"
You can also make a cell in one row stretch across two cells in another. Like this:
You can also make a cell in one row stretch across two cells in another. Like this:
Cell 1
Cell 3 Cell 4
Cell 3 Cell 4
To accomplish this, you have to use the colspan modifyer. Just add colspan=2 to the <td>, and voilà!
<table border>
<tr>
<td colspan=2>Cell 1</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
You can also do this:
You can also do this:
Cell 1 Cell 2
Cell 3
Cell 3
Just add rowspan=2 to the <td>, like so:
<table border>
<tr>
<td rowspan=2>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
</table>
Just remember: Rows run horizontally, columns run vertically. So if you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan.
Just remember: Rows run horizontally, columns run vertically. So if you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan.
Try inserting some of the HTML code into your own webpage, play around with the parameters and try adding new rows or columns.
If you would like a more detailed look at tables I can reccommend Webmonkey
If you would like a more detailed look at tables I can reccommend Webmonkey
You now know all the basics to start creating your own website, but dont leave just yet. The final two chapters are probably the most important.
Chapter 9 contains a full list of all HTML Tags
Chapter 10 contains vital information on how to publish your site onto the WWW.
Chapter 9 contains a full list of all HTML Tags
Chapter 10 contains vital information on how to publish your site onto the WWW.
0 comments: