Website Design Basics
Website Table Layout
What Is A Website Table? |
When you view the source code of websites, you will see that a lot of these sites have tables. A table is basically a grid that have cells, that are arranged in rows and columns. Each cell can have text, headings or cell spacing.
Example of a table:
Product Code |
Product Name |
Product Price |
203A |
Motherboard |
$80 |
51Z |
CPU |
$120 |
8000Q |
Monitor |
$105 |
The Code:
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" bgcolor="#FFFFFF" bordercolor="#008080" id="table3">
<tr>
<td width="116" bgcolor="#FFCC99">
<p align="center"> <b>Product Code</b></td>
<td width="242" bgcolor="#FFCC99">
<p align="center"><b>Product Name</b></td>
<td bgcolor="#FFCC99">
<p align="center"><b>Product Price</b></td>
</tr>
<tr>
<td width="116">
<p align="center"> 203A</td>
<td width="242">Motherboard</td>
<td>$80</td>
</tr>
<tr>
<td width="116">
<p align="center">51Z</td>
<td width="242">CPU</td>
<td>$120</td>
</tr>
<tr>
<td width="116">
<p align="center">8000Q</td>
<td width="242">Monitor</td>
<td>$105</td>
</tr>
</table>
Table HTML Basic Syntax
-
<table ...>
-
<tr ...> Table row
-
<td ...> Table data
-
<th ...> Table header
-
<col ...> Column
-
<colgroup...> Column group
-
<caption ...>
-
<thead ...> Table header section
-
<tbody ...> Table body section
-
<tfoot ...> Table footer section
-
border
-
width
-
bgcolor
|
Make Website Layout With A Table |
You have seen the example of a table above. So it is possible to make a website layout with tables.
Nowadays you can use CSS - cascading stylesheets to create a website layout. I will discuss CSS indepth in other articles on this website.
|