Table layout to Div

**nathj** · Jun 27 '07, 07:02 AM

Originally posted by cmcdermo

Hopefully this is an easy solution.

I come from the old school tables layout.

I am trying to accomplish a layout using divs that I can easily do in tables but having trouble with using divs.

This is what I am trying to do (this is how i'd do it using tables).

<table width="750" border="1">

<tr>

<td width="500">con tent for this div here</td>

<td width="250" height="450" rowspan="2">con tent for cell here, this will span 2 rows.</td>

</tr>

<tr>

<td> content for this cell </td>

</tr>

</table>

I don't get it!

Any help would be great, thanks.

Hi,

There is an easy way to do this. I found an article the other day when i was trawling around the web but I can't for the life of me remember where, and foolishly I did not bookmark this. So the code I am abut to post is not mine originally but it does work a treat.

CSS

Code:

div.row 
{
	clear: both;
	padding-top: 3px;
	padding-bottom: 5px;
}

div.row span.label 
{
	padding-left: 10px;
	padding-right: 0px;
	float: left;
	width: 100px;
	text-align: right;
}

span.labelwarning 
{
	padding-left: 10px;
	padding-right: 0px;
	float: left;
	width: 100px;
	text-align: right;
	color: #ff0000;
}

div.row span.formw 
{
	float: right;
	width: 455px;
	text-align: left;
}

HTML (for a dummy form that I am working on)

Code:

<form id="personal" action="application.php?step=2" method="post">
	<!-- 
	Personal details
	-->	
	<div class="row">
		<h4 class="eventListItem">Personal Details </h4>
	</div>
	
	<div class="row">
		<span class="labelwarning">
			Title:
		</span>
		<span class="formw">
			<input id="title" type="text" maxlength="15" size="47" />
		</span>
	</div>
	
	<div class="row">
		<span class="labelwarning">
			Forename(s):
		</span>
		<span class="formw">
			<input id="forename" type="text" maxlength="30" size="47" />
		</span>
	</div>
	
	<div class="row">
		<span class="labelwarning">
			Surname:
		</span>
		<span class="formw">
			<input id="surname" type="text" maxlength="30" size="47" />
		</span>
	</div>

	<div class="row">
		<span class="label">
			Note:
		</span>
		<span class="formw">
			<textarea id="note" cols="44" rows="8">
			</textarea>
		</span>	
	</div>

<div class="row">
		<h4 class="eventListItem">Access Details </h4>
	</div>
	
		<div class="row">
		<span class="labelwarning">
			Username:
		</span>
		<span class="formw">
			<input id="username" type="text" size="47" />
		</span>
	</div>
	
	<div class="row">
		<span class="labelwarning">
			Password:
		</span>
		<span class="formw">
			<input id="password" type="password" maxlength="18" size="47" /> 
			 (6-18 characters)
		</span>
	</div>

This structure code be used and modified for any situation where you would normally use a table.

I hope this helps
Nathan

**drhowarddrfine** · Jun 27 '07, 04:55 PM

Well, using CSS to imitate tables is the anti-thesis for using CSS in the first place. Tables were originally used because nothing much else was available. So trying to duplicate table usage defeats the whole purpose of CSS.

What you want to do is layout your page using html only. Group those elements which belong together with a <div> if necessary; and it's not always necessary. Then, style those elements as needed using CSS.

Separating your content from your style makes life much easier than in the old table method.

**nathj** · Jun 28 '07, 06:15 AM

Originally posted by drhowarddrfine

Well, using CSS to imitate tables is the anti-thesis for using CSS in the first place. Tables were originally used because nothing much else was available. So trying to duplicate table usage defeats the whole purpose of CSS.

What you want to do is layout your page using html only. Group those elements which belong together with a <div> if necessary; and it's not always necessary. Then, style those elements as needed using CSS.

Separating your content from your style makes life much easier than in the old table method.

Hi,

The sample code I provided lays out a form. Originally tables were the best way to ensure that the labels and inputs lined up nicely. As tables are dead, and really should not be used any more CSS is the way to do it. I agree with what drhowarddrfine is saying and that is, to my mind, what I have done. I have used <div> to group similar elements together. My testing has also shown that my page displays the same way in FF, IE and O. So the results are good, the code is smooth and the effect desirable.

If there is another way to layout a form that is even better than I have suggested then please post it. I am always keen to learn new things. Sorry if that was a bit of a hijack, I didn't mean to.

I hope the questions have been answered and an informative discussion provided.

Cheers
nathj

**drhowarddrfine** · Jun 28 '07, 08:06 PM

So no one is confused, tables are not 'dead', but, intead, tables have resumed their rightful place in the display of tabular data instead of being used for page layout. Page styling and layout should only be done using CSS.

**Yordan Georgiev** · Mar 7 '08, 06:12 AM

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>Accessib le Table-less forms</title>
<style type="text/css" media="all">
#content_half1
{
float:left;
border: 1px dashed #333;
background-color: #0028ff;
min-width:300px;
min-height:300px;
max-width:600px;
max-height:600px;
}
#content_half2
{
float:left;
border: 1px dashed #333;
background-color: #ffffff;
min-width:20px;
min-height:20px;
max-width:20px;
max-height:20px;
}

#content_half3
{
float:left;
border: 1px dashed #333;
background-color: #0028ff;
min-width:300px;
min-height:300px;
max-width:600px;
max-height:600px;
}

form, label, input { font-size : 1em; }
fieldset { width : 25em; padding : 0.5em 1em; }
label { position : relative; width : 15em; display : block; margin : .5em 0em; }
label input { position : absolute; left : 100%; top : 0px; width : 10em; }
input.submit { margin-left : 15em; }
br { display : none; }
</style>
</head>

<body>
<h1>CSS Forms</h1>
<p>This page is based entirerly on CSS. No tables whatsoever. It's fast, accessible, and probably the most elegant way to make table-less forms today. Check it out yourself...</p>

<div id="content_hal f1">
<fieldset>
<legend>Persona l details</legend>

<label>Name:<in put type="text" name="name" /></label><br />
<label>Email:<i nput type="text" name="email" /></label><br />
<label>Telephon e:<input type="text" name="tel" /></label><br />

<input type="submit" value="Submit" class="submit" />
</fieldset>
</div>
<div id="content_hal f2">
</div>
<div id="content_hal f3">
<fieldset>
<legend>Persona l details</legend>

<label>Name:<in put type="text" name="name" /></label><br />
<label>Email:<i nput type="text" name="email" /></label><br />
<label>Telephon e:<input type="text" name="tel" /></label><br />

<input type="submit" value="Submit" class="submit" />
</fieldset>
</div>

</body>
</html>[/html]

**dlite922** · Mar 7 '08, 09:06 AM

Originally posted by nathj

Hi,

The sample code I provided lays out a form. Originally tables were the best way to ensure that the labels and inputs lined up nicely. As tables are dead, and really should not be used any more CSS is the way to do it. I agree with what drhowarddrfine is saying and that is, to my mind, what I have done. I have used <div> to group similar elements together. My testing has also shown that my page displays the same way in FF, IE and O. So the results are good, the code is smooth and the effect desirable.

If there is another way to layout a form that is even better than I have suggested then please post it. I am always keen to learn new things. Sorry if that was a bit of a hijack, I didn't mean to.

I hope the questions have been answered and an informative discussion provided.

Cheers
nathj

tables are not Dead!

i love tables. (then again, i grew up with them)...but for page layout, not anymore. for tabular data? hell ya.

For tabular data , div and css is hell.

**eBay** · Mar 8 '08, 10:11 PM

Article - Tables are for Tabular Data. Period.

Table layout to Div

Table layout to Div

Comment

Comment

Comment

Comment

Comment

Comment

Comment