HTML Layout
Everywhere on the Web you will find pages that are formatted
like newspaper pages using HTML columns.
HTML Layout - Using Tables
| One very common practice with HTML, is to use
HTML tables to format the layout of an HTML page.
A part of this page is formatted with two columns, like a newspaper
page.
As you can see on this page, there is a left column and a right column.
This text is displayed in the left column. |
An HTML <table> is used to divide a part
of this Web page into two columns.
The trick is to use a table without borders, and maybe a little extra
cell-padding.
No matter how much text you add to this page, it will stay inside its
column borders. |
Same Layout - Color Added
| One very common practice with HTML, is to use
HTML tables to format the layout of an HTML page.
A part of this page is formatted with two columns, like a newspaper
page.
As you can see at this page, there is a left column and a right column. |
An HTML <table> is used to divide a part
of this Web page into two columns.
This text is displayed in the right column.
The trick is to use a table without borders, and maybe a little extra
cell-padding.
No matter how much text you add to this page, it will stay inside its
column borders. |
Examples
HTML Code
<html>
<body>
<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
Welcome TO Shine Institute. TWelcome TO Shine Institute. Welcome TO Shine Institute. Welcome TO Shine Institute. Welcome TO Shine Institute.
</td>
<td width="50%" valign="top">
Please Visit Our Website. Please Visit Our Website. Please Visit Our Website. Please Visit Our Website. Please Visit Our Website
</td>
</tr>
</table>
</body>
</html>
Your Result:
|
Welcome TO Shine Institute. TWelcome TO Shine Institute. Welcome TO Shine Institute. Welcome TO Shine Institute. Welcome TO Shine Institute.
|
Please Visit Our Website. Please Visit Our Website. Please Visit Our Website. Please Visit Our Website. Please Visit Our Website
|
Dividing a part of an HTML page into table columns is very easy to do. To let
you experiment with it, we have put together this
simple example.
|
