How To Create A Simple Table
Print This PageNow tables are made up of rows and columns that can hold almost anything from headings, numbers, text, images, forms, and even other tables and tags and so on.
Now tables where designed to hold tabular data, but many hacks that made complex layouts possible could not be passed up. Many web designers say that there is no need for tables to create complex and stunning layouts because of the introduction of CSS and that tables should be used for there intended purpose. But for the users who use old browsers that do not support CSS, tables are a must, which is about 10% of the Internet population, which is about 50 million users, which to me would say that tables are still a must for them and should be considered when designing a web page, but as always it's your choice.
Now in this tutorial I will show you the minimum tags also known as elements for designing a simple table. The tags that will be included in our table are the <table>, <tr> and the <td> tags.
I know it sounds complicated but let me show you how to use these tags for you to get a better understanding of what it all means. I will create a calendar that contains months organized by three months across and four months down, to show you how to create a simple table. Keep in mind though that you can create more then just calendars with tables like web pages, which most web pages are created with.
Now in order to create a table we will need to use the <table> tag, which is a container tag, which requires an end tag for XHTML, but in HTML the end tag is not required but keep in mind that Netscape will not display tables with out the end tag.
Now let me show you how to code in the <table> tag.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<table>
</table>
</body>
</html>
Now with the <table> tags in place you will now have to add some rows to your table by including the <tr> tags, which means table row, which also requires an end tag. Each <tr> tag will create one new row in a table.
Now I am going to indent my tags because it makes it easier to read but you don't have to, the code will still work either way.
Now let me show you how to code in the <tr> tags.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Within each <tr> tag, you will need to place the <td> tags to identify each cell within the row. The <td> tag stands for table data, which also requires an end tag in XHTML, but in HTML the end tag is not required but take note that without the end tag it may cause unpredictable table rendering. Now each table cell can contain any type of content, which also includes other tables.
If a <tr> tag has less <td> tags than another row the browser will then automatically add empty cells at the end of the row to make each row even. You can also leave <td> tags empty if you'd like.
Now let me show you how to add in the <td> tags.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Now let's just add in the months to finish are simple table calendar.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<table>
<tr>
<td>January</td>
<td>February</td>
<td>March</td>
</tr>
<tr>
<td>April</td>
<td>May</td>
<td>June</td>
</tr>
<tr>
<td>July</td>
<td>August</td>
<td>September</td>
</tr>
<tr>
<td>October</td>
<td>November</td>
<td>December</td>
</tr>
</table>
</body>
</html>
Here is how the code should look like.
| January | February | March |
| April | May | June |
| July | August | September |
| October | November | December |
VALIDATE
›Validate HTML›Validate XHTML
›Validate CSS
›Link Checker
›Validate FEED
›Validate RDF
›Validate P3P
›Validate XML
›Semantic Extract
HOME ABOUT US PRIVACY POLICY HELP CONTACT US PARTNERS LINKS
Copyright © 2008 - Until The End of Time