Jump to content
xisto Community
snlildude87

Code For This Table Layout? html help needed

Recommended Posts

Hey, can anyone help me generate the code needed for a table that would look something like this?

  ----------------------------------------------------- |                                   |---------------- | |                                   |---------------- | |                                   |---------------- | |                                   |---------------- | |                                   |---------------- | |                                   |---------------- |  ------------------------------------------------------

Thanks in advance!!

Share this post


Link to post
Share on other sites

yeah its simple

<table> <tr>  <td></td>  <td>   <table>    <tr>      <td></td>    </tr>    <tr>      <td></td>    </tr>    <tr>      <td></td>    </tr>    <tr>      <td></td>    </tr>    <tr>      <td></td>    </tr>    <tr>      <td></td>    </tr>    <tr>      <td></td>    </tr>   </table>  </td> </tr></table>  

so just use this code and insert the text or what not in the empty td's. By the way what i did was i created one table at first that would handle the two columns. Then i created a single row. In it you can fill whatever you want just by adding it between the <td> and <\td> tags. Then i created a second table inside the right column that its self has 7 rows of nothing at this point. Just add the content between the <td> and </td> tags of the second table. Therefore, for instance you wanted to add another single row below what you have drawn, all you would do is create another row in the main table with <tr> and </tr> and inside of it you would create one column and make it span the table's two columns with <td colspan="2"> content </td>

Hope this helps

Share this post


Link to post
Share on other sites

Here you go:

<table style="width: 99%;" border="5"> <tr>  <td rowspan="7" colspan="2" style="width: 66%;">text</td>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr></table>

Share this post


Link to post
Share on other sites

Very sorry to double post, but I was fixing my code so I didn't see someone had posted.The w3c doesn't really like putting tables inside tables, and it works better in most browsers to use rowspan and colspan instead.

Share this post


Link to post
Share on other sites

The w3c doesn't really like putting tables inside tables, and it works better in most browsers to use rowspan and colspan instead.

The W3C doesn't like the use of tables for presentation at all.
You'd be better off doing:

<div id="main"><div id="right">ContentContentContentContentContentContent</div></div>#right {float: right;}
Or if you have to use a table, do the same as above but apply the id to the internal table so it's still floating right. Then you can use other CSS to play around with the padding/margins etc to get it exactly where you want.

Share this post


Link to post
Share on other sites
<table><tr><td width="500">Left contect goes here</td><td width="150"><table><tr><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr></table></td></tr></table>
Try this one, I think it will help you :P

Share this post


Link to post
Share on other sites

Here you go:

<table style="width: 99%;" border="5"> <tr>  <td rowspan="7" colspan="2" style="width: 66%;">text</td>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr> <tr>  <td style="width: 33%;">text</td> </tr></table>

147147[/snapback]

Yep. I tried this one first because beeseven has a good reputation for posting the correct code for other people, and it worked for me. Thanks!! :D

 

 

The W3C doesn't like the use of tables for presentation at all.

You'd be better off doing:

 

<div id="main"><div id="right">ContentContentContentContentContentContent</div></div>#right {float: right;}
Or if you have to use a table, do the same as above but apply the id to the internal table so it's still floating right. Then you can use other CSS to play around with the padding/margins etc to get it exactly where you want.

147157[/snapback]

I decided to quit the table layout altogether because I believe tables should only be used to display tabular data, and I will stick to my guns. and plus, there were some other issues with my code that conflicted with the table code

 

 

<table><tr><td width="500">Left contect goes here</td><td width="150"><table><tr><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr></table></td></tr></table>
Try this one, I think it will help you :D

149088[/snapback]

I tried this one, but the tables did not display side-by-side. In other words, the second table in your post appeared below the other table.

 

Anyways, I decided to code my navigation with the help of CSS. I set the top value in CSS to 0px, and position to absolute, so that the navigation will stay at the top no matter where my visitors scroll. This only works in Firefox, but the navigation is still visible in Internet Explorer.

 

I'm closing this thread now because my question has been answered a long time ago. Thanks to everyone who contributed!

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | 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.