 Code For This Table Layout?, html help needed |
|
|
|
|
  |
 Jun 3 2005, 02:08 AM
Post
#1
|
|
|
Moderator  Group: Members Posts: 2,325 Joined: 8-March 05 From: Mawson, Antarctica Member No.: 4,254  |
Hey, can anyone help me generate the code needed for a table that would look something like this?
CODE ----------------------------------------------------- | |---------------- | | |---------------- | | |---------------- | | |---------------- | | |---------------- | | |---------------- | ------------------------------------------------------ Thanks in advance!! |
 |
 
|
|
Jun 3 2005, 02:44 AM
Post
#2
|
|
|
Privileged Member Group: [HOSTED] Posts: 937 Joined: 14-April 05 From: West Chester, PA Member No.: 5,636 |
yeah its simple
CODE <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 |
|
|
|
|
Jun 3 2005, 02:49 AM
Post
#3
|
|
|
Privileged Member Group: Members Posts: 629 Joined: 26-February 05 Member No.: 3,995 |
Here you go:
CODE <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> |
|
|
|
|
Jun 3 2005, 02:52 AM
Post
#4
|
|
|
Privileged Member Group: Members Posts: 629 Joined: 26-February 05 Member No.: 3,995 |
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. |
|
|
|
|
Jun 3 2005, 02:59 AM
Post
#5
|
|
|
Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
QUOTE(beeseven @ Jun 3 2005, 12:52 PM) 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: CODE <div id="main"> <div id="right"> Content Content Content Content Content Content </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. |
|
|
|
|
Jun 8 2005, 12:06 PM
Post
#6
|
|
|
Super Member Group: Members Posts: 217 Joined: 2-January 05 Member No.: 3,084 |
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 
|
|
|
|
|
Jun 9 2005, 07:42 PM
Post
#7
|
|
|
Moderator Group: Members Posts: 2,325 Joined: 8-March 05 From: Mawson, Antarctica Member No.: 4,254 |
QUOTE(beeseven @ Jun 2 2005, 11:49 PM) Here you go: 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!! CODE <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>  QUOTE(Tyssen @ Jun 2 2005, 11:59 PM) The W3C doesn't like the use of tables for presentation at all. 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 codeYou'd be better off doing: CODE <div id="main"> <div id="right"> Content Content Content Content Content Content </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. QUOTE(FaLgoR @ Jun 8 2005, 09:06 AM) 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 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! |
|
|
|
|
Similar Topics