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.
7 13078 nathj 938
Recognized Expert Contributor
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 -
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>
-
-
This structure code be used and modified for any situation where you would normally use a table.
I hope this helps
Nathan
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 938
Recognized Expert Contributor
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
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.
<!-- courtesy to authors .... -->
[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 1,584
Recognized Expert Top Contributor
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.
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: Anthony Williams |
last post by:
Good morning,
I'm currently designing a site, using CSS, and wish to create a variable
width two-column layout, with header and footer, and one fixed-width column
on the left.
Previously, I would have used a table to do this, using the following code:
<table width="100%">
|
by: Neal |
last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog
entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A
quite good article.
|
by: Rob Freundlich |
last post by:
I have some servlet-generated tabular data that I need to present, so I'm
using an HTML Table. In some cases, it can be quite large. I'm flushing
the servlet output every N lines to push the data to the browser as it
generates, and I've used "table-layout: fixed" for the table's CSS class.
It works pretty well in Netscape (7.1 and higher) - the table is drawn
pretty much as the rows are received by the browser. However, Internet...
|
by: Eric |
last post by:
I'm trying to reproduce the following table layout using CSS only and am
having some trouble with it. I'd like them to look identical but I'm having
trouble sizing the labels properly as it doesnt seem to be working
correctly:
Here's the table:
<table class="Table1" cellSpacing="0" cellPadding="0"
borderColorLight="white" border="1">
<tr class="HeaderTr">
|
by: Wayne Wengert |
last post by:
I have an aspx page I originzlly built in WebMatrix that includes a
"<table>" structure to layout the columns using "<tr>" and "<td>" elements
(see sample below). When I create a new aspx form in my VSNE2003 solution,
add a datalist component with table layout and paste that code, it doesn't
like the table related tags (<table>, <tr>, etc.). Using VSNET2003 what is
the correct way to specify the "table" layout (rows and columns)
...
| |
by: greg.mckone |
last post by:
Hi folks,
I've been using CSS for style for several years now, but I've never
attempted a layout using CSS. (I'd like to move away from tables)
I'm working on a page here:
http://www.eurekacamp.ca/demo/contact.php
using the stylesheet here:
http://www.eurekacamp.ca/demo/Eureka.css
|
by: Roberto Roachling |
last post by:
Hello,
Converting a table layout to a div layout. The navbar is giving me
some trouble.
div link: http://gertrudischale.com/essay.pl.htm (slightly
incomplete, but illustrates problem)
table link:http://gertrudischale.com/_en/essay.htm
The images in the nav bar are slightly smaller in the div version. I
cant figure out why the last item in the nav bar wraps. The widths are
|
by: sethp |
last post by:
I have a question about table layout in IE. I have a table with two
columns. The left column has two rows and the right column has 1 row
that has a column span of 2. In the left column I have given the top
row a height of 20 pixels. In firefox, that row always stays 20 pixels
high. The bottom row in the left column and the right column expand if
you add more text to either the bottom left row or the right column.
This does not work in...
|
by: spacix |
last post by:
Does anyone know a work around for "table-layout: fixed;" to prevent the automatic evenly space cells width without assigning classes or ID to cells?
My program prints a HTML "report" file and I used "table-layout: fixed; width:691px;" because the reports have to be printed on 8.5x11 paper. I didn't want the table to resize or anything.
Then after I added that property to the table, the data cells no longer "fit to contents" even with a...
|
by: Timothy Larson |
last post by:
I'm trying to create a 3 row layout in which each row will have two blocks,
BUT I want the width of these blocks to be independent of the blocks in the
other rows. So AFAICT a regular table layout is completely unsuitable.
I've been trying to recreate this idea with CSS for a couple hours now, using
positioned divs, but am not even close. (Maybe FF 1.5 is the problem?) Even
if I did manage to position the top and bottom rows within the...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
| |
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |