The Basic Structure Of HTML Tables
Create And Design A Website Using HTML Table Layouts
This topic will cover the basic structure of HTML tables. You can create and design a website using HTML table layouts. Even if you are a beginner, you can create and design an HTML table for a website using
HTML codes and tags...or just let your
HTML Editor create
an HTML table for you. See an example of the basic structure of an HTML table layout below:
"Basic Structure Of An HTML Table Layout"
- Tables are defined with the <table>.....</table> tag
- A table is divided into rows and defined with the <tr>.....</tr> tag
- Each row is divided into cells and defined with the <td>.....</td>
tag...(cells contain text, images, lists, etc.)
- Headings in a table are defined with the <th>.....</th> tag
- Table Headers are defined with the <h3>.....</h3> tag
- A border is defined with the border tag (border="n")
Note: I only added a border on these tables for a clearer example. See the simple
table structure below to achieve this table:
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Now, create "headers"...see table structure below to achieve this table:
| Full Name |
Address, City, State, Zip Code |
Tel. Number |
| Joe Smith |
123 Adam St., Anywhere, Anyplace, 12345 |
(000) 123-4567 |
<table border="1">
<tr>
<th>Full Name</th>
<th>Address, City, State, Zip Code</th>
<th>Tel. Number</th>
</tr>
<tr>
<td>Joe Smith</td>
<td>123 Adam St., Anywhere, Anyplace, 12345</td>
<td>(000) 123-4567</td>
</tr>
</table>
If you wanted to create a two-column layout for a web page...see table structure
below (remember, you do not need a border):
|
This is your first section for content.
|
This is your second section for content.
|
<html>
<body>
<table border="1" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
This is your first section for content.
</td>
<td width="50%" valign="top">
This is your second section for content.
</td>
</tr>
</table>
</body>
</html>
If you want to use tables to design your website, visit
Iron Spider to view different
column layouts, and to get the HTML source codes.
For more information on HTML tables and how to customize them with color, backgrounds,
alignment, spacing, etc., visit
"Customizing HTML Tables".
Now, you have some knowledge about HTML table layouts. You can also design
a website using pre-built templates, with the HTML codes and tags already provided.
Read the next topic titled "Using Pre-Built Templates".
Next Topic: Using Pre-Built Templates
Back To Top
Introducing Websites
![[Valid RSS]](http://www.webrss.com/logo/valid-rss.png "Validate my RSS feed"){kind=logo}
