Jump to content

Archived

This topic is now archived and is closed to further replies.

pneudralics

aligning tables

Recommended Posts

Is there to make a table that's simliar to css's float: left and float: right?

I want to make to columns on the page and have a left and right column that I can add bunch of tables on one side and vice versa.

Any tutorials?

Share this post


Link to post
Share on other sites
Well a simple table that would have a header and then a navigation column and a main content area, that would look like:

[code]
+----------------+
|                |
+----+-----------+
|    |           |
|    |           |
|    |           |
|    |           |
|    |           |
|    |           |
|    |           |
+----+-----------+[/code]

You would use the code:

[code]<table width="760" border="0" cellpadding="5" cellspacing="0">
    <tr>
        <td colspan="2">
            Header content here
        </td>
    </tr>
    <tr>
        <td width="25%">
            Navigation here
        </td>
        <td width="75%">
            Main content
        </td>
    </tr>
</table>[/code]

Share this post


Link to post
Share on other sites
you'll want to use

valign="top" align="right"

in both TD's for content and menu to align the text to the top of the table cell.. otherwise it will automatically center the text..

Share this post


Link to post
Share on other sites
If you want a column on the left and the right use something like this:
[code]<table width="100%" border="1">
  <tr><td colspan="3">This is the title bar</td></tr>
  <tr>
    <td valign="top">LEFT COLUMN</td>
    <td valign="top">MIDDLE COLUMN</td>
    <td valign="top">RIGHT COLUMN</td>
  </tr>
</table>[/code]
Change border to 0 when you are happy. Having [b]valign="top"[/b] makes sure that the contents of each column are aligned to the top.

Just replace the above text showing each column with more table declarations, hope its what you were asking for :)

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.