Welcome visitor
* Login
* Register
It is currently July 21st, 2019, 6:27 am
All times are UTC [ DST ]
* Search
View unanswered posts - View active topics

FORUMS » Client Side » HTML



Post new topic Reply to topic  [ 2 posts ] 
Author Message
  layout with 3 tables
PostPosted: December 19th, 2009, 1:08 pm 

Posts: 22
How is it done when you have a table inside a table to get a layout like the one of this page?
(3 cols but the col on the middle has rows that the other 2 doesn't.)
(I'm not saying that this site is using tables, because it is not, but the appearance of it)


Top
 Profile  
 
  Re: layout with 3 tables
PostPosted: December 21st, 2009, 7:16 pm 

Posts: 117
You need to understand that to nest a table inside another (put a table inside another table) its as easy as this:
<table id="table1">
  <tr><td>  <table id="table2">
              <tr><td>this a cell from table2 which is nested on table1</td></tr>
            </table></td></tr>
</table>


Now, to get a layout like you mantioned and starting from what I've already said,
Main table
<table> <!--one table-->
  <tr> <!--one row-->
    <td></td><td></td><td></td> <!--three columns-->
  </tr>
</table>
Nested table
<table>
  <tr><td>this</td><td colspan="3">is</td></tr>
  <tr><td>an</td><td colspan="2">example</td><td>of</td></tr>
  <tr><td>a</td><td>"big"</td><td>nested</td><td>table</td></tr>
</table>


Then, to nest the table just copy-paste the code from the Nested table on the cell of the Main Table wher it should go
<table> <!--one table-->
  <tr> <!--one row-->
    <td>col1</td><td><table>
  <tr><td>this</td><td colspan="3">is</td></tr>
  <tr><td>an</td><td colspan="2">example</td><td>of</td></tr>
  <tr><td>a</td><td>"big"</td><td>nested</td><td>table</td></tr>
</table></td><td>col3</td> <!--three columns-->
  </tr>
</table>

Cheers!


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

FORUMS » Client Side » HTML


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron