HTML » Double expanding table layout
The double expandable table is perhaps one of the most popular layouts on hl at the time. The boring fact about these is that you have to know how to make tables in HTML and you have to know how to make the single expandable table, as the double consists of two single. First of all, if you don't know how to make tables, and if you are not fairly good at this, go to the tutorials called "tables". Make sure you know tables by heart before you start making double expandables ;)
Okies. I'm not going to give you exact code for this layout. Those will only lead to many and often strange questions. You can not expect to copy code without understanding what it does, then get help adjusting it :P So I'll tell you pretty specific how to make it.
There are 2 (more, I'm sure) ways of creating it, depending on how you want it to look. If you take a look at the single expandable tutorial, you can see there is 3 ways of making a single expandable. We will use method 1 and 3, depending on the layout.
Method 1
This method is simpler, and you can use it when the expanding area doesn't require "fancy edges" like fading, a colored line around it or when the expanding area is attached to the layout picture.
Create a table that has three columns and two rows:
| adjust width so it fits layout picture | insert exp area 1 | insert exp area 2 |
Now merge the columns in the first row, by setting colspan="3". Insert the layout picture as background in that cell. Set height="the height of your layout picture", and the width="the width of your layout picture". It's a good idea to set the border to 1 until you have adjusted the cells so they all fit to your layout picture. When you are all done, set it to 0 so it doesn't show. You might have to do some minor adjustments after setting it to 0..
Make the first row second column so wide that the first expanding area fits the layout picture.
In the second row, second column, you insert a new table, consisting of one column and one row. Insert the same type of table in the third column. Set the width of the tables to what you want, so it fits the layout picture. Remember to set valign to top in both rows, so the expanding area stays at the top if you write more in one exp. are than the other.
It is always a good idea to set cellpadding to 0, cellspacing to 0 and collapse the borders, so the layout picture and the expanding areas are close together, you don't want some white lines in between picture and expanding areas.
| adjust width so it fits layout pic |
|
|
||
Method 2
This method is similar but the expanding areas differ. They look like the method 3 in the single expanding table tutorial.
Make the same type of table as in method 1. Insert the 2 tables inside each cell, like in method 1. But instead of inserting a one row, one column table, you have to make it a 2 rows, 3 column one, where you merge the bottom row by setting the colspan to 3. Insert the pictures as explained in the single expanding tutorial.
The only difference between the double expandable and the single expandable, is that you put to single together in a table with border=0 (so it don't show) to place them next to each other instead of under each other.
| adjust width so it fits layout pic |
|
|
||||||||||||
Why am I so mean that I don't give you the code? Because I think you should be so good at crating html before you start making this type, that you can create it by reading my explanation.