Non-Table Oriented Data Entry Form Example Needed

  • Thread starter Thread starter jm
  • Start date Start date
J

jm

I am tired of using tables. The are more trouble than they are worth.
Do any of you know of a good example of a data entry form in CSS and
no tables? Thank you.
 
An HTML element is an HTML element. In other words, if you understand
table-less layout using CSS, it doesn't matter whether you're working with
form fields or image tags, or text. You position it all the same way, using
CSS. A good satarting reference point for this can be found at
http://csszengarden.com.

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.
 
the most common way to do it is to set a div of a specific width, then on
the style sheet you'd specify the align for the label to left, and the
fields to right.
I think I saw a good example of this on www.sitepoint.com
but I wouldn't abandon tables for css, you're much better off with both at
the same time.

what is it about the tables that's got you ticked off?
 
chris leeds said:
the most common way to do it is to set a div of a specific width, then on
the style sheet you'd specify the align for the label to left, and the
fields to right.
I think I saw a good example of this on www.sitepoint.com
but I wouldn't abandon tables for css, you're much better off with both at
the same time.

what is it about the tables that's got you ticked off?

--
The email address on this posting is a "black hole". I got tired of all the
spam.
Please feel free to contact me here:
http://nedp.net/contact/
Click to expand...


I'm tired of lining the stupid cells up, columnspan and all that. One
cell gets bigger and the other one gets bigger with it. I'm just
tired of fooling with it.
 
You realize, don't you, that you'll just have different stupid things to
line up? And more of them.

Bob Lehmann
 
the solution to your predicament is not No Tables, but oddly enough More
Tables.
you'd lay your first table out as just a simple table I usually do 3 rows, 1
column. then I split the middle row into two columns. then drop the table
structure you want for the banner area into the top cell, what you want for
the left column (usually navigation) into the left middle cell, whatever I
want for the foot into the lowest row. that leaves the remaining cell for
content.
what I usually do is make a blank page with just the table and content for
the particular area in the page in a separate folder and use the FrontPage
include to write it into the page. you'll be able to keep all your pages
how you want and changing one file, like the one for the banner area, will
change in every page you used it in.
another thing that will help is when you get the first table/ page worked
out, you don't need to do it again, just copy and paste the whole page in
folder view so you can use it as a template.
HTH
 
I do it a little different. Say the objective isa simple two colum layout
with a logo at the top and a footer at the bottom.
1/ position the logo absolutely at the top of the page
2/ set top margin of the body tag sufficient to clear the logo
3/ drop a 2 colum table on the page either fixed or % width and id the 2
cells
4/ put the footer in a div below the layout table
So the page might look like this

<style type="text/css">
body{
margin: 100px 0 0 0;
padding:0;
background-color: #fff;
}
#logo{
position:absolute;
left:0;top:0;
width:150px;
}
#layoutTable{
width:100%;
}
#left{
width:200px;
border-right: 1px dotted #333;
padding: 0 30px
}
#right{
width:auto;
padding:0 50px;
}
#footer{
width:100%;
text-align:center;
}
</style>
<body>
<div id="logo"><img src="logo.gif"></div>
<table id="layoutTable">
<td id="left">...left stuff</td>
<td id="right">...right stuff</td>
</table>
<div id="footer">...footer stuff</div>
</body>

Mainly because I don't like nesting tables - also a layout like this is very
easy to maintain and modify, eg change from fluid to fixed width etc.

Jon
Microsoft MVP - FP
 
Table-less layout is much easier to make layout changes to. As positioning
and style is handled using CSS, there is no positioning code IN the HTML
document itself. Layout can be changed without touching the document HTML,
but simply by changing the style sheet. And these changes are automatically
applied to all pages using that style sheet.

Using tables for positioning locks one into a certain layout, which, if it
needs changing (and they alwys do at some point), requires re-coding the
entire page.

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.
 
That's true of nested table based layouts. They're never easy to modify.
However look at my previous post for a way to make a table based layout
that's very easy to modify - one could change that layout from say 750px
centred to 100% width to 80% width just by modifying the CSS. If one decided
to change to a table less layout in the future it would just be a case of
doing a find and replace to replace td tags with div tags.

I've done a lot of experimenting with table-less layouts and still am not
convinced they're a good alternative to tables - there's life in the old
table yet ;-)

Jon
 
Well, at least we have enough information here now for John to make his own
informed decision with!

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.
 
Bob Lehmann said:
You realize, don't you, that you'll just have different stupid things to
line up? And more of them.

Bob Lehmann
Click to expand...

Yeah, but I'm not tired of them yet.
 
Jon said:
I do it a little different. Say the objective isa simple two colum layout
with a logo at the top and a footer at the bottom.
1/ position the logo absolutely at the top of the page
2/ set top margin of the body tag sufficient to clear the logo
3/ drop a 2 colum table on the page either fixed or % width and id the 2
cells
4/ put the footer in a div below the layout table
So the page might look like this

<style type="text/css">
body{
margin: 100px 0 0 0;
padding:0;
background-color: #fff;
}
#logo{
position:absolute;
left:0;top:0;
width:150px;
}
#layoutTable{
width:100%;
}
#left{
width:200px;
border-right: 1px dotted #333;
padding: 0 30px
}
#right{
width:auto;
padding:0 50px;
}
#footer{
width:100%;
text-align:center;
}
</style>
<body>
<div id="logo"><img src="logo.gif"></div>
<table id="layoutTable">
<td id="left">...left stuff</td>
<td id="right">...right stuff</td>
</table>
<div id="footer">...footer stuff</div>
</body>

Mainly because I don't like nesting tables - also a layout like this is very
easy to maintain and modify, eg change from fluid to fixed width etc.

Jon
Microsoft MVP - FP
Click to expand...


I have a treeview control (asp.net). I had it on a frame on the left.
I wonder if it could go in a first column and the data in a second
column. I've never seen that, though. I personally don't like
working with frames.
 
You must log in or register to reply here.

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

MS Access Sub form display with all entries 1
VBA - retrieve data on last create named range from previous inserted named range 0
Prevent Duplicate Form Entries 0
Data entry for a table from a form 2
Data entry for a table from a form 1
Subform Data Entry Setting 0
Access Automatically Send a notification email once a record is added 0
Need Carriage Return after Data Entry 1

Back
Top