Making Website Tables
-
David
-
February 20th, 2012
Making website tables is a necessary evil in web design. Search engines aren't too fond of tables but you need them so that you can arrange your website so that it's easy to follow.
This web page is made up of a table that includes 4 cells. One cell is for the header, one for the navigation, once for the body, one for the footer and one for the sponsors section. Without having these cells it would be difficult to arrange the items to make this site appealing. With the creation of CSS you can do away with much of the code but tables will still be needed.
Common Table HTML Tags
The nice thing about HTML editors is that you won't need to manually create tables through coding but it's important to recognize what you're looking at.
The <table> tag opens up the tag to insert a table. The <tr> tag is represents a row and the <td> tag represents the cells of a table.
For demonstration purposes I'm going to show you a table below but I'm not going to hide the borders. Then just below that I'll hide the borders so that you can see how a website visitor would view the table.
<table>
<tr>
<td>Bill</td>
<td>Lisa</td>
<td>Margaret</td>
</tr>
<tr>
<td>Mary</td>
<td>Dave</td>
<td>Michael</td>
</tr>
<tr>
<td>Morgan</td>
<td>Sean</td>
<td>Sara</td>
</tr>
</table>
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
As you can see it's pretty straightforward, as I mentioned though, most HTML editors have the functionality to simply enter the number of rows that you want and the number of columns and the editor will insert the table automatically.
Additional Table HTML Tags
Below I'll include a snippet of code and then a working version of the code to show you how to customize tables for features such as the border, width, color, etc. You'll reuse all of the same code, the only tag that you'll change is the opening <table> tag.
Table Border
<table border="4">
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
Border Color
<table border="4" bordercolor="blue">
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
<table border="1" bordercolor="blue" style="border-collapse: collapse">
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
Table Width Percentage
<table width="100%" border="1">
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
Table Width Fixed
<table width="500" border="1">
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
Collapse Table Border
<table width="500" border="1" style="border-collapse: collapse">
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
Remove Table Border
<table width="500" border="0">
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
Table Height
<table height="150" width="500" border="1">
| Bill |
Lisa |
Margaret |
| Mary |
Dave |
Michael |
| Morgan |
Sean |
Sara |
Webmaster Forum
I invite you to visit my webmaster forum, it's a great place to discuss websites and ask questions to fellow webmasters regarding topics that you may still have questions on.