Alternative for tables

[Taftheman]

Hi i was wondering what is the alternative for tables in html. I was told that using tables is not the ideal way, so what other alternative are there. I pressume you can use a CSS but how would i go about doing this.

Thanks if anyone can help

[nathj]

Hi,

I'm not sure how to cross reference posts, but here's the answer I put on a different post earlier today:

CSS

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)

<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>

Don't worry about the <h4> class, this is simply a style issue for my site. I can't show it to you in operation as it's still under development and as such is only on the local network.

Have fun playing around with this.

Nathan

[bettor]

Hi,

I don't know who told you that tables are not the best way. I really don't know if a best way exists. My opinion is to learn from the best...and there I go and look at Google.com or gmail.com and I see that it's all designed using tables...I think I shouldn't comment any further...but to make your layout tableless you can use CSS but be careful since many features will look different in different browsers...try to keep up to CSS 1 and some CSS 2

Good luck

[drhowarddrfine]

Tables were originally created for data presentation and should only be used for that now. At one time, tables were used for page layout because it was the only reliable means available in the early days of the web. Nowadays, CSS is the best way to layout pages.

Generally, the only problems you may encounter with using CSS is with IE. If you follow standards, however, and test in a modern browser, such as Firefox or Opera, your problems will be minimal.

[MMcCarthy]

I'm not sure how to cross reference posts, but here's the answer I put on a different post earlier today:

Hi Nathan,

Just enclose the link in url tags, it should create a hyperlink

i.e. [url=http://www.urlhere] to open and close with backslash url in square brackets.

This should work.

Mary

[nomad]

I quess I still from the old school and I need to learn more css2...

[nathj]

Hi Taftheman,

Have you got you system running now? This topic has provided some good discussion. Ultimately any layout can and should be done with CSS. The idea of keeping the presentation separate from the content is pure genius and it is making my life easier.

Let me know how you got on.

nathj

ps taftheman - from Wales?