Making Website Tables
How To Make A Website
> HTML Basic Code > Making Website
Tables
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 ForumI 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. |
