www.webdeveloper.com
Results 1 to 2 of 2

Thread: Moving from tables to pure CSS for layout

  1. #1
    Join Date
    Aug 2010
    Posts
    7

    Moving from tables to pure CSS for layout

    Ok, I've decided to move out of the 90's and into the new century. I want to totally abandon my <table>'s for layout. I LOVE TABLES. They are so EASY for layout. LOL I can hear the groans.

    Groan no more. I'm ready to move on. Over the past decade or so, usually when starting a GUI layout framework from scratch (which is what I'm doing right now), I'll start by saying to myself, "OK, time to get the job done without tables." I've done this probably a dozen times and I did it this time.

    Result? I always abandon the attempt in utter frustration and spend a couple of minutes making it all work in a table. And that's exactly what happened this time too.

    But this time it's different. This time I'm seeking professional help (err... that's you guys). Below I've pasted in a contrived code example. It uses tables. Can someone please show me how to achieve the same layout with pure CSS (no JavaScript). A requirement is that anything that is currently a DIV, stays a DIV.

    If I can get an example of how to do this simple contrived example, I should be able to apply the same ideas to some more complex things I'm doing.

    Any help appreciated. Cheers.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Table Example</title>
    
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    		<meta http-equiv="language" content="en-us" />
    		<meta http-equiv="Expires" content="0" />
    		<meta http-equiv="Cache-Control" content="no-cache" />
    		<meta http-equiv="Pragma" content="no-cache" />
    
    		<style type="text/css">
    
    			body {
    				margin: 20px;
    				padding: 0;
    				font-family: Arial;
    			}
    
    			.container {
    				margin: 0;
    				padding: 20px;
    				border: 1px solid black;
    				width: 400px;
    			}
    
    			.container:last-child {
    				border: 0px 1px 1px 1px solid black;
    			}
    
    			.heading {
    				font-size: 16px;
    				font-weight: bold;
    			}
    
    			.smallText {
    				font-size: 12px;
    				font-weight: normal;
    			}
    
    			.numbers {
    				margin: 0px 20px 0px 20px;
    			}
    
    			.iconBox {
    				width: 20px;
    				height: 20px;
    				background-color: blue;
    			}
    
    		</style>
    
    	</head>
    
    	<body>
    
    		<div class="container">
    
    			<table width="100%" cellpadding="0" cellspacing="0">
    				<tr>
    					<td width="1%"><div class="heading">Aaa</div></td>
    					<td width="97%"></td>
    					<td width="1%" nowrap>
    						<div class="numbers">(001)</div>
    					</td>
    					<td width="1%" rowspan="3" valign="top">
    						<div class="iconBox"></div>
    					</td>
    				</tr>
    				<tr>
    					<td width="100%" colspan="4"><div><hr></div></td>
    				</tr>
    				<tr>
    					<td width="100%" colspan="4">
    						<div class="smallText">This is a description. It could go on for many lines. It might not go
    						on at all. This one goes on for a couple of lines.</div>
    					</td>
    				</tr>
    			</table>
    
    		</div>
    		<div class="container">
    
    			<table width="100%" cellpadding="0" cellspacing="0">
    				<tr>
    					<td width="1%"><div class="heading">Bbb</div></td>
    					<td width="97%"></td>
    					<td width="1%" nowrap>
    						<div class="numbers">(002)</div>
    					</td>
    					<td width="1%" rowspan="3" valign="top">
    						<div class="iconBox"></div>
    					</td>
    				</tr>
    				<tr>
    					<td width="100%" colspan="4"><div><hr></div></td>
    				</tr>
    				<tr>
    					<td width="100%" colspan="4">
    						<div class="smallText">Can someone tell me why the last-child selector is not working for this
    						container?</div>
    					</td>
    				</tr>
    			</table>
    
    		</div>
    	</body>
    </html>

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles