User:Go for it!/table test 1
Doubled (tripled?) border
In your request, you specifically said you needed to retain the double border but didn't say for what purpose. If it's just for looks, the easiest way is to change the border style.
| width=100% cellspacing=2 cellpadding=5 style="border: double #990066;"
| valign="top" colspan=2 style="background:#EEEEFF; border: solid thin #990066;" | Portal:Philosophy/Intro |
| width=58% valign="top" rowspan=2 style="background:#EEEEFF; border: solid thin #990066;" | Portal:Philosophy/Branches
| width=42% valign="top" style="background:#EEEEFF; border: solid thin #990066;" | Portal:Philosophy/Gentopics |
| valign="top" style="background:#EEEEFF; border: solid thin #990066;" | Portal:Philosophy/Gentopics |
| colspan=2 style="background:#99CCFF; border: solid thin #990066; color:#990066; text-align:center;" | Associated Wikimedia |
| valign="top" colspan=2 style="background:#EEEEFF; border: solid thin #990066;" | WikimediaForPortals |
By the way, you might want to check out [http://www.tizag.com/cssT/border.php this reference] for other border options.
fillable border
You said "The double border I was after was to be adjustable, and fillable with color." If you're just talking a little bit of adjustment, you could change the border style. Thick can be pretty darned thick, after all. But if you need to take it to extremes you probably want to Catherine did - nesting tables using padding and background. So, let's define everything above as the "guts" of the table and play with borders.
=fat but solid borders=
| width=100% cellspacing=2 cellpadding=5 style="border: solid thick #990066;" | This table has a single border with a "thick" width |
| width=100% cellspacing=2 cellpadding=5 style="border: solid 15px #990066;" | This table uses a single border of infinitely adjustable width (again, I picked 15 for no particular reason) and of a single color. |
| width=100% cellspacing=2 cellpadding=5 style="border: double 30px #990066;" | This table uses a double border of infinitely adjustable width (30 seemed nice this time) and of a single color. The "fill" between the lines has to stay white in this format, I think. (Someone better than me might know how to add a second color.) |
| width=100% cellspacing=2 cellpadding=5 border=15 | This table uses the default "outset" format. The width is set in pixels and can be set as large or small as you like. I chose 15 for no special reason. I'm not sure how to make the color work in this format. |
=nested tables=
| width=100% style="padding: 15px; background:blue;" | |
| |
{| width=100% cellspacing=2 cellpadding=5 | This table uses nested tables to mimic the border. The padding in the first line lets you set the thickness of the "border" and the background sets the color. |
|}
You also asked how to insert a table into another cell while retaining the border. That's essentially what I just did. The table above is a one-cell table nested inside another one-cell table. You could make that table as complicated as you need. I recommend against it, though. I prefer the control I get with a single table using colspans and rowspans.
= A variation, using the above samples=
| width=100% style="padding: 5px; background:#cccccc; border: solid 1px #990066;" |
| |
{| width=100% cellspacing=2 cellpadding=5 style="border: solid 1px #990066;" | valign="top" colspan=2 style="background:#EEEEFF; border: solid thin #990066;" | Portal:Philosophy/Intro |
| width=58% valign="top" rowspan=2 style="background:#EEEEFF; border: solid thin #990066;" | Portal:Philosophy/Branches
| width=42% valign="top" style="background:#EEEEFF; border: solid thin #990066;" | Portal:Philosophy/Gentopics |
| valign="top" style="background:#EEEEFF; border: solid thin #990066;" | Portal:Philosophy/Gentopics |
| colspan=2 style="background:#99CCFF; border: solid thin #990066; color:#990066; text-align:center;" | Associated Wikimedia |
| valign="top" colspan=2 style="background:#EEEEFF; border: solid thin #990066;" | WikimediaForPortals |
|}
= Another variation=
| width=100% style="padding: 5px; background:#cccccc; border: solid 1px #990066;" |
| |
{| width=100% cellspacing=2 cellpadding=5 style="border: solid 1px #990066;" | valign="top" colspan=2 style="background:#EEEEFF; border: 0;" | |
| width=58% valign="top" rowspan=2 style="background:#EEEEFF; border: 0;" | Portal:Philosophy/Branches
| width=42% valign="top" style="background:#EEEEFF; border: 0;" | |
| valign="top" style="background:#EEEEFF; border: 0:" | |
| colspan=2 style="background:#99CCFF; border: 0; color:#990066; text-align:center;" |
Associated Wikimedia |
| valign="top" colspan=2 style="background:#EEEEFF; border: 0" | |
|}
= Further modularize =
| width=100% style="padding: 5px; background:#cccccc; border: solid 1px #990066;" |
| |
{| width=100% cellspacing=2 cellpadding=5 style="border: solid 1px #990066;" | valign="top" colspan=3 style="background:#EEEEFF; border: 0;" | |
| width=58% valign="top" rowspan=2 style="background:#EEEEFF; border: 0;" | Portal:Philosophy/Branches
| width=42% valign="top" colspan=2 style="background:#EEEEFF; border: 0;" | test test test test |
| valign="top" style="background:#EEEEFF; border: 0:" |
test text test text | valign="top" style="background:#EEEEFF; border: 0:" | test text test text |
| colspan=3 style="background:#99CCFF; border: 0; color:#990066; text-align:center;" |
Associated Wikimedia |
| valign="top" colspan=3 style="background:#EEEEFF; border: 0" | |
|}
= Another division =
| width=100% style="padding: 5px; background:#cccccc; border: solid 1px #990066;" |
| |
{| width=100% cellspacing=2 cellpadding=5 style="border: solid 1px #990066;" | valign="top" colspan=3 style="background:#EEEEFF; border: 0;" | |
| width=58% valign="top" rowspan=3 style="background:#EEEEFF; border: 0;" | Portal:Philosophy/Branches
| width=42% valign="top" colspan=2 style="background:#EEEEFF; border: 0;" | cats and dogs cats and dogs cats and dogs cats and dogs cats and dogs |
| valign="top" rowspan=2 style="background:#EEEEFF; border: 0:" |
mice and men mice and men mice and men mice and men mice and men mice and men mice and men | valign="top" style="background:#EEEEFF; border: 0:" | turtles and hares turtles and hares turtles and hares turtles and hares turtles and hares |
| valign="top" style="background:#EEEEFF; border: 0:" |
bird and bees bird and bees bird and bees bird and bees bird and bees bird and bees bird and bees |
| colspan=3 style="background:#99CCFF; border: 0; color:#990066; text-align:center;" |
Associated Wikimedia |
| valign="top" colspan=3 style="background:#EEEEFF; border: 0" | |
|}
= Another module =
| width=100% style="padding: 5px; background:#cccccc; border: solid 1px #990066;" |
| |
{| width=100% cellspacing=2 cellpadding=5 style="border: solid 1px #990066;" | valign="top" colspan=3 style="background:#EEEEFF; border: 0;" | |
| width=58% valign="top" rowspan=2 style="background:#EEEEFF; border: 0;" | Portal:Philosophy/Branches
| width=42% valign="top" colspan=2 style="background:#EEEEFF; border: 0;" | cats and dogs cats and dogs cats and dogs cats and dogs cats and dogs |
| valign="top" rowspan=2 style="background:#EEEEFF; border: 0:" |
mice and fleas mice and fleas mice and fleas mice and fleas mice and fleas | valign="top" style="background:#EEEEFF; border: 0:" | turtles and hares turtles and hares turtles and hares turtles and hares turtles and hares |
| valign="top" style="background:#EEEEFF; border: 0:" |
birds and bees birds and bees birds and bees birds and bees birds and bees birds and bees | valign="top" style="background:#EEEEFF; border: 0:" | doves and hawks doves and hawks doves and hawks doves and hawks doves and hawks |
| colspan=3 style="background:#99CCFF; border: 0; color:#990066; text-align:center;" |
Associated Wikimedia |
| valign="top" colspan=3 style="background:#EEEEFF; border: 0" | |
|}
= another one to mess with =
| width="100%" border="1" cellpadding="1" cellspacing="2" align="center"
|+An example table |
| width="30%" style="background:#efefef;" | Cell 1
! colspan="3" style="background:#ffdead;" | Cell 2 |
|---|
| Cell 3
| width="25%" colspan="2" | Cell 4 | rowspan=2 style="border-bottom:3px solid grey;" valign="top" | Cell 5 |
| style="border-bottom:3px solid grey;" | Cell 6
| style="border-bottom:3px solid grey;" | Cell 7 | style="border-bottom:3px solid grey;" | Cell 8 |
| style="border-bottom:3px solid grey;" | Cell 9
| style="border-bottom:3px solid grey;" | Cell 10 | style="border-bottom:3px solid grey;" | Cell 11 | style="border-bottom:3px solid grey;" | Cell 12 |
| colspan="4" align="center" | Cell 13
{| border="0" |+A table in a table |
| align="center" width="150px" style="border: solid thin #eeeeee;" | Image:wiki.png
| align="center" width="150px" style="border: solid thin #eeeeee;" | Image:wiki.png |
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;" |
Two Wikimedia logos |
|}
sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
further splitting
I think this is what you asked for. I usually design these by thinking of it as graph paper with the most discrete cell as my grid size. Then I build up, deciding which grid squares to merge into each table cell. In the case below, your most discrete cells are text 5 and 6. Everything else requires a merge of smaller cells. Rossami (talk) 08:40, 4 March 2006 (UTC)
| border=1
| colspan=3 | text1 |
| rowspan=3 | text2
| colspan=2 | text3 |
| rowspan=2 | text4
| | text 5 |
| | text 6 |
| colspan=3 | text 7 |