Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Layout like a Table with Rowspans 2

Status
Not open for further replies.
Glowball

Glowball

Programmer
Oct 6, 2001
373
0
0
US
There are lots of CSS layouts floating around out there but I haven't seen one like the one I'm looking for. How would you lay this out?
Code: 
<table border="1" align="center" width="80%">
<tr>
	<td rowspan="3" width="50">left</td>
	<td>top</td>
	<td rowspan="3" width="50">right</td>
</tr>
<tr>
	<td>middle</td>
</tr>
<tr>
	<td>bottom</td>
</tr>
</table>
And I have another question: if it's so easy to do this layout with a table, why do it in CSS when it's going to be much more complicated and buggy. I know that this table will render as I want it to in all browsers. So what's the argument for a CSS layout in this case?

I normally use CSS for more simple layouts, but this one seems like it might get weird. Thoughts? Thanks!
 
Sort by date Sort by votes
if it's so easy to do this layout with a table, why do it in CSS when it's going to be much more complicated and buggy
Click to expand...

Who says it's going to be complicated? I knocked this up from scratch in less than 5 minutes:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] dir="ltr" lang="en-US">
<head profile="[URL unfurl="true"]http://gmpg.org/xfn/11">[/URL]
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />

	<style type="text/css">
		#tableOuter {
			width: 80%;
			margin: 0px auto;
			overflow: auto;
			border: 1px solid black;
		}

		#leftColumn {
			float: left;
			width: 50px;
			background-color: red;
		}

		#middleColumn {
			margin: 0px 50px;
		}
			#topRow {
				background-color: brown;
			}

			#middleRow {
				background-color: pink;
			}

			#bottomRow {
				background-color: orange;
			}

		#rightColumn {
			float: right;
			width: 50px;
			background-color: gold;
		}
	</style>
</head>

<body>

	<div id="tableOuter">
		<div id="leftColumn">left</div>

		<div id="rightColumn">right</div>

		<div id="middleColumn">
			<div id="topRow">top</div>

			<div id="middleRow">middle</div>

			<div id="bottomRow">bottom</div>
		</div>
	</div>

	<hr />

	<table border="1" align="center" width="80%">
		<tr>
		    <td rowspan="3" width="50">left</td>
		    <td>top</td>
		    <td rowspan="3" width="50">right</td>
		</tr>
		<tr>
		    <td>middle</td>
		</tr>
		<tr>
		    <td>bottom</td>
		</tr>
	</table>

</body>
</html>

I know that this table will render as I want it to in all browsers.
Click to expand...

My example looks the same in IE6, Fx3, Safari, Chrome, and Opera under Windows XP. I've not tested any other browser.

Perhaps my example won't do everything you want, but with the only requirements being 'the layout has to be the same', I hope I've shown that CSS layouts don't have to be that daunting, nor complicated.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Wow, that's pretty impressive! I've been working on it for an hour or so and didn't get anywhere close. But I guess I was going at it all wrong (didn't think of making a margin for the middle column).

Sorry if I sounded frustrated! Anyone who's ever done anything Web-related could put that table together in a matter of minutes, but not many people could put it together in CSS in minutes. I think the difference is that there is only one way to build the table and probably many ways to build the CSS layout (and even more ways to get very close but not quite there).

Thanks so much!
 
Upvote 0 Downvote
I've been working on adding the option of two columns in the middle section since I posted last and I still can't get it right. So I guess I need your help again. Here is the demo table.
Code: 
<table border="1" align="center" width="80%">        
<tr>            
	<td rowspan="3" width="50">left</td>            
	<td>top</td>            
	<td rowspan="3" width="50">right</td>        
</tr>        
<tr>            
	<td><table border="1" width="100%">
	<tr>
		<td>left column</td>
		<td width="250">right column</td>
	</tr>
	</table></td>        
</tr>        
<tr>            
	<td>bottom</td>        
</tr>    
</table>
The thing is, some pages will have the two columns in the middle section and some will only have the original one column. It would be good if I didn't have to redo the entire page just to add the additional column. Is that possible?

I've been messing with floats but I can't seem to get it to stop messing with the bottom row. Help?
 
Upvote 0 Downvote
Hi,
I like duplicating table layouts with css too!

Dan's done a good job with your first problem. See if my code below answers your second problem. I've adapted Dan's code !!
Hope Dan doesn't mind ?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] dir="ltr" lang="en-US">
<head profile="[URL unfurl="true"]http://gmpg.org/xfn/11">[/URL]
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en" />

    <style type="text/css">
        #tableOuter {
            width: 80%;
            margin: 0px auto;
            overflow: auto;
            border: 1px solid black;
        }

        #tableOuter2 {
            width: 80%;
            margin: 0px auto;
            overflow: auto;
            border: 1px solid black;
        }


        #leftColumn {
            float: left;
            width: 50px;
            background-color: red;
        }

        #leftColumn2 {
            float: left;
            width: 50px;
            background-color: red;
        }


        #middleColumn {
            margin: 0px 50px;
        }

        #middleColumn2 {
            margin: 0px 50px;
        }


        #middleColumnLeft {
            float:left;
        }

        #middleColumnRight {
            float:right;
            width:250px;
        }


            #topRow {
                background-color: brown;
            }

            #topRow2 {
                background-color: brown;
            }


            #middleRow {
                background-color: pink;
            }

            #middleRow2 {
                background-color: pink;
            }


            #bottomRow {
                background-color: orange;
            }

            #bottomRow2 {
	clear:both;
                background-color: orange;
            }

        #rightColumn {
            float: right;
            width: 50px;
            background-color: gold;
        }

        #rightColumn2 {
            float: right;
            width: 50px;
            background-color: gold;
        }

    </style>
</head>

<body>

 <p>Dan's original css layout for your first table</p>

    <div id="tableOuter">
        <div id="leftColumn">left</div>

        <div id="rightColumn">right</div>

        <div id="middleColumn">
            <div id="topRow">top</div>

            <div id="middleRow">middle</div>

            <div id="bottomRow">bottom</div>
        </div>
    </div>

    <hr />
<p>Your original table for comparison</p>

    <table border="1" align="center" width="80%">
        <tr>
            <td rowspan="3" width="50">left</td>
            <td>top</td>
            <td rowspan="3" width="50">right</td>
        </tr>
        <tr>
            <td>middle</td>
        </tr>
        <tr>
            <td>bottom</td>
        </tr>
    </table>

<p>Your new table with split middle columns</p>

<table border="1" align="center" width="80%">        
<tr>            
    <td rowspan="3" width="50">left</td>            
    <td>top</td>            
    <td rowspan="3" width="50">right</td>        
</tr>        
<tr>            
    <td><table border="1" width="100%">
    <tr>
        <td>left column</td>
        <td width="250">right column</td>
    </tr>
    </table></td>        
</tr>        
<tr>            
    <td>bottom</td>        
</tr>    
</table>

<p>My css layout for your table with split middle columns</p>

<p>See the additions in the style sheet</p>

    <div id="tableOuter2">
        <div id="leftColumn2">left</div>

        <div id="rightColumn2">right</div>

        <div id="middleColumn2">
            <div id="topRow2">top</div>

            <div id="middleRow2">
		<div id="middleColumnLeft">middle column left</div>
		<div id="middleColumnRight">middle column right</div>
            </div>

            <div id="bottomRow2">bottom</div>
        </div>
    </div>

</body>
</html>

Hope this helps !!

Steve
 
Upvote 0 Downvote
Awesome! I must not have tried the right combinations of floats and clears -- so frustrating. Thanks so much for your help!
 
Upvote 0 Downvote
It's worth noting that one 'trick' I used in my original code was to switch the source order of the right & middle columns.

This may not always be desirable (some people like certain content to appear in a certain order when styles are switched off), but if this isn't an issue for you, then great!



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
CSS is frustrating in respect to layout, it's much easier to use it for styles onlye. See here:


I don't see the solutions posted here are easy and straight forward, this just supports the argument to DO use tables for layouting, just don't use it for styling of the content.

The correct rendering of floating divs does depend too much on order of the divs, so you really don't have the intended independency of CSS layout and content.

Bye, Olaf.
 
Upvote 0 Downvote
Interesting read, Olaf. The site I'm working on is a rewrite of an existing site, and the layout is a bit complicated due to a complicated design that I can't change. I think it's important to write a site that is as simple and easy to work with as possible, in case something happens to me and this company has to hire someone else -- they should be able to hit the ground running. The site is in ColdFusion with Oracle, and I'd hate for them to have to find someone who also knows CSS positioning really well on top of that.

So in the end, I'm considering redoing the layout and using regular tables for positioning (using CSS only for display formatting). In this case, I think using CSS for positioning may be a bad choice. The other people who may need to work on the site sometimes are also not CSS gurus. It's definitely cause for thought.

In the article you linked to, the author mentioned how JavaScript needed to be used to extend the background color and border of both columns all the way to the bottom column. I work for another client who has a site completely in CSS, and they have to do just that. So right off the bat, JavaScript is required. It seems a bit silly to me.

This has been an interesting and educational thread for me. Thanks to everyone!
 
Upvote 0 Downvote
In fact the article speaks of "CSS wars". The intention of CSS really is to not only provide styles but also layout. You should be able to just switch to different CSS and then have navigation bar right instead of left or whatever other changes, even a complete different layout. CSS utterly fails to provide that in a simple and consistent way, which is proven. It's astonishing that you'd need so much CSS code for such a simple layout, just to cope with all the problems of overflowing text and such, which is really simple with tables.

There's the disadvantage, that you fix your layout by putting it into the html part, to change a sites layout this way isn't as simple as replacing a css file. On the other side the article demonstrates that this isn't working anyway without complicated CSS stylesheets.

To still give the CSS folks a bonus, there are lots of CMS out there, and many of them have a template section and most of these have several working templates that are rather different and still work with the same html output of these CMSs, so it IS doable to layout with CSS. It's only rather questionable, if something that should help you makes it so complicated. You could go one step further and say it'd be good to use frames for layouting a page <eg>.


If you go for the table approach, the output of your php scripts (or ruby, python, perl, whatever you take to bind to your oracle data) will need to output the table html and tds in the correct order, that disadvantage remains. But whether it's divs or tds, you normally plan html output in some order anyway.

Well, the best approach to this still is keeping the table html apart from the real content. So you'd best modularize the content output to only output a part of each page, eg header.php, navigation.php, article.php, footer.php etc., not named by the layout position, but by their meaning.

A (or several) view.php would combine the table layout html with the calls (includes/require in php) to these seperate scripts/page parts, and you still can use the MVC design pattern by a controller.php on top of all, that does the nongui stuff, sends headers before any html output and controls which view.php will be used to render a request.

Bye, Olaf.
 
Upvote 0 Downvote
you said you're using coldfusion and oracle. Oracle was the only thing sticking in memory, sorry. I haven't worked with coldfusion, but what I recommended is doable there too, isn't it?

Bye, Olaf.
 
Upvote 0 Downvote
ColdFusion outputs HTML just like PHP and others. My biggest issue is that the pages will have the same header and footer but not always the same layout in the center of the page. If I use tables for layout it's pretty easy to change the center of a page and use the same header and footer files. With a CSS layout it's not nearly as easy (for me, anyway).

I think it's time for me to bail on this CSS layout -- I think sticking with the simplest approach is smartest in this case. I just can't struggle with this anymore. But hopefully someday I'll have the time to be able to get better at CSS.
 
Upvote 0 Downvote
Before this thread becomes even more one-sided, I just wanted to add that I have been designing both with tables (way back when we've had no CSS) and with CSS (for the last 5 or so years) and must admit that laying things out with CSS is much more natural and intuitive for me. With tables I would often need visual tools to help me figure out where certain cells lie within a complex table. Since CSS, I have no more problems envisioning my code. Furthermore, I find many of the default behaviours of tables that were described as a benefit (by the linked article or here in the text) to be a nuisance when I try to create my layouts.

That said, I am not claiming one way is better than the other (although the community at large would agree that CSS is a better way to go), because I don't think we need to get in that discussion. I just think it is wrong to assume that everyone finds it easier to lay things out with tables than with floated boxes.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Vragabond said:
I just think it is wrong to assume that everyone finds it easier to lay things out with tables than with floated boxes.
Click to expand...

I'll second that comment. I find it easier to use css layouts now and it just seems like the natural way to do it.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Vragabond,

point taken. I'm also pretty sure CSS is the way to go, as it's meant for the job.

The point this article makes is rather, that if a tool (even think about a tool like a hammer) is made for a certain job (hammer nails into walls) the tool should do that after KISS (keep it simple, stupid) and the POLS (principle of least surprise) principle.

Some of the commenters really argued that CSS is not for everyone and only should be used by professionals. If everything was handled this way, most people would not have computers, not even cars or telephones...

Glowball said:
I just can't struggle with this anymore. But hopefully someday I'll have the time to be able to get better at CSS.
Click to expand...

We understand CSS is there to do the job, I also once used a table for a probelm I couldn't solve by CSS and used CSS (Divs) inside that table. In my case it's even just a two cell table with a navbar on the left and the main page on the right, which I wanted to strech to "100%", I think you know that CSS problem and how it's solved.

I also understand that there are CSS hack like clear fix, that don't fix CSS issues but rather browser issues. But as long as such things are needed I prefer to use as few as possible and solve other problems by a table, which is rendered the same across more browsers.

In fact I use the clearfix and made it an layout standard of the main page to divide it into clearfix divs for every section of the main page. But it leads to layout specific divs rather than content specific ones. Often enough a new paragraph also makes a new pragraph and there is no need for that, but CSS will remain something you need to learn more thoroughly before you own it, before that it owns you.

Bye, Olaf.
 
Upvote 0 Downvote
Are we sure that we are using a good example in the linked article? I find it really hard to take seriously someone who claims to be a expert on HTML but can't even put up a home page without multiple beginner's errors. See Ron's home page validation

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
He also seems to have a weird (if not slightly xenophobic) fixation with things being 'different in England', making facts up to suit, then claiming in updates that 'they are the exception':


Perhaps he's never met anyone called Simon, Daniel, Rupert, Michael, Andy ... the list just goes on.

Ah well!



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
317
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
156
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
119
PeDa
PeDa
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
67
Alt255
Alt255
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
62
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top