HTML Tables
(Page 1 of 7 )
In our last tutorial we discussed how to create different types of frames and position them on the page. We also covered the various types of lists we can create. And I even let you in on a little recipe in my plot to make you fatter than me. In this tutorial we will go over tables (you will need a place to put that dinner I told you how to make after all) and how to insert them into your web pages.
Tables serve a wide variety of uses. First and foremost, they store data, and just about any type. You can store numbers, text, formulas, images, horizontal rules, forms, other tables, lists, and so forth. You can also use tables to help position your images on the page.
We create tables with the <table> tag and then use the <tr> tag to define our rows. To store the data in our table, we use the <td> tag, which stands for table data. Here is some code to create some basic tables:
<html>
<body>
<p>
This is how to create tables:
</p>
<h2>This is a one columned table:</h2>
<table border="1">
<tr>
<td>Look a table with data in it!</td>
</tr>
</table>
<h2>A one rowed table with many columns :</h2>
<table border="1">
<tr>
<td>Patrick Swayze</td>
<td>versus</td>
<td>Chuck Norris</td>
</tr>
</table>
<h2>This is a multiple rowed table with a bunch of columns:</h2>
<table border="1">
<tr>
<td><b>Hero</b></td>
<td><b>Super Power</b></td>
<td><b>Favorite Food</b></td>
</tr>
<tr>
<td>Chuck Norris</td>
<td>Hidden Beard Fist</td>
<td>Knuckle Sammiches</td>
</tr>
<tr>
<td>Bruce Lee</td>
<td>Nutcracker</td>
<td>Hurtz Donut</td>
</tr>
<tr>
<td>Patrick Swayze</td>
<td>Pelvic Thrust of Doom</td>
<td>Quiche</td>
</tr>
</table>
</body>
</html>
This will result in the following being displayed in the user's browser:
This is how to create tables:
This is a one columned table:
Look a table with data in it! |
A one rowed table with many columns :
Patrick Swayze | versus | Chuck Norris |
This is a multiple rowed table with a bunch of columns:
Hero | Super Power | Favorite Food |
Chuck Norris | Hidden Beard Fist | Knuckle Sammiches |
Bruce Lee | Nutcracker | Hurtz Donut |
Patrick Swayze | Pelvic Thrust of Doom | Quiche |
You may note that the tables above all come with borders. We define the way the border looks by using the <border> attribute. In the above example we specified that the border be equal to 1. This means that the border is 1 pixel in width (<table border="1">). If we were to goof around with that number, you can see that it could get pretty ridiculous.
<html>
<body>
<h2>How to create a table with a crazy border:</h2>
<table border="100">
<tr>
<td>Chuck</td>
<td>Norris</td>
</tr>
<tr>
<td>Bruce</td>
<td>Lee</td>
</tr>
</table>
</table>
</body>
</html>
This results in the following:
How to create a table with a crazy border:
Depending upon your browser, this may or may not appear as a crazy table. It basically creates a table with a 100 pixel-width border.
Note that if you forget to set the border, or leave it out on purpose, you will create a borderless table. Here is how that appears:
<html>
<body>
<h2>How to create a table with no border:</h2>
<table>
<tr>
<td>Chuck</td>
<td>Norris</td>
</tr>
<tr>
<td>Bruce</td>
<td>Lee</td>
</tr>
</table>
</table>
</body>
</html>
And the result:
How to create a table with no border:
Next: Headings in Tables >>
More HTML Articles
More By James Payne
