html table formatting

[WorkerBeeJ]

Hello,

This is somewhat embarrassing, since I've been writing asp.net for over three years now, but I sometimes have trouble with getting my html to make my pages look exactly the way I want them to. I use nested tables without grid layout and without the help of a designer because that's what is preferred where I work, so all the html is written by hand. I have trouble with table cell widths and getting things to be right where I want them. Seems to me that if you set a cell width, it should render at that width, but that doesn't ever seem to happen. Does anyone have any sort of reference or tutorial that you could recommend for me to finally start to feel comfortable with this?

Thanks in advance,
Worker Bee J

 

[ca8msm]

ok lets take an example.

if i have to populte a table using a loop all i would do is:
(ASP)
<%
do until
%>
<tr>
<td>1</td>
</tr>
<%
end loop
%>

And where in there do you check if the data item exists? You simply write out a 1. If that 1 didn't exist for certain rows your table would look very different.

Impossible. once more an example:
<table width=100%>
<tr><td>HI</td></tr>
</table>

that will look across any browser in the same way. if it doenst, i suggest u change the browser.

For very simple examples like that you won't have many problems but how many pages that you design only have that amount of content? Once you get into more complex design with more data (and even worse, nested tables) that's when it does start to become a problem (as I explained above).

The main point of this is that the same HTML behaves and looks different in different browsers when using tables for layout. CSS solves most of these problems. If you want to ignore this and still use tables, then that's fine and is your decision.

one more thing. since u are so enamoured with CSS u must have a good editor that writes neat and clean CSS.
which one do u use???

The "good editor" that I use to write CSS are any of the following:

1) Notepad
2) Wordpad
3) Visual Studio

You don't need a good editor to write good clean code, you just have to have the knowledge to be able to do so (as in most cases it needs maintaining so you should write it so that it is easily maintainable).


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[vbkris]

>>You don't need a good editor to write good clean code, you just have to have the knowledge to be able to do so

precisely what i am trying to say to, i use DW and it writes out clean code (even for nested tables)
using DreamWeaver i have never had problesm like this

<%
do until
if DATA IS THERE then
%>
<tr>
<td>1</td>
</tr>
<%
else
%>
<tr>
<td>2</td>
</tr>
<%
end if
end loop
%>
even if u r using DIVS how will u over come the ifs?


>>For very simple examples like that you won't have many problems but how many pages that you design only have that amount of content? Once you get into more complex design with more data (and even worse, nested tables) that's when it does start to become a problem (as I explained above)

unlike CSS there is only so much that u can do with a table.
but that something always works correctly.

even in CSS there ARE cross browser issues, solvable but still they are there (e.g.: transparency)...

Known is handfull, Unknown is worldfull

 

[ca8msm]

precisely what i am trying to say to, i use DW and it writes out clean code (even for nested tables)
using DreamWeaver i have never had problesm like this

It's only clean as the example you provided didn't have any formatting. Once you start to add formatting to tables, rows and columns, that's were it starts to get messy (irrelevant of which editor you are using to write it)

<%
do until
if DATA IS THERE then
%>
<tr>
<td>1</td>
</tr>
<%
else
%>
<tr>
<td>2</td>
</tr>
<%
end if
end loop
%>
even if u r using DIVS how will u over come the ifs?

There's little point me saying what I would do to a piece of classic ASP code as this is an ASP.NET forum (and the example you provided does just seem to be showing tabular data which is what tables were designed for!). If it were an ASP.NET example, presumably a DataGrid would be used and you wouldn't have that problem.

but that something always works correctly.

So why when I view the same HTML in IE does it look differently to when I view it in Firefox? That to me shows that it doesn't work correctly.

even in CSS there ARE cross browser issues, solvable but still they are there (e.g.: transparency)...

I'm not saying that CSS is perfect (I said "CSS solves most of these problems" but what I am saying is that it has been designed for page layout whereas tables weren't. I could have got this wrong, but to me, that shows which one should be used.



____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[Foamcow]

May I draw you back to the initial post in this thread, which was about achieving a layout using a table.

Tables are EXCELLENT for marking up TABULAR DATA.
That is what they are for, there is nothing better.

Where tables aren't so good is when used to layout a page.
In the past, we HAD to use tables to layout our pages unless we wanted very plain pages. This is, after all, what the web was initially conceived to look like. Text and tables, maybe the odd picture.

CSS is a MUCH better way to layout a page since it allows you to define your page as logical blocks of content. These blocks can then be positioned wherever you wish and/or interact with the positions of other blocks.

The reason I, and many others prefer CSS layouts is that the resulting HTML can be (note I said "can be") made much more simple and logical.
Add to this the fact that, at a stroke, a user (or even a device) can use the same content and display it differently, in a way that suits their means of viewing the page.

Separation of content from presentation is the underlying principle behind the use of CSS layout. Coupled with semantic markup (where HTML tags are used logically to define the TYPE of content they hold) a very powerful argument is made for the use of CSS for layout.

I would say that CSS is more problematic from a browser interpretation perspective than table layouts are. However, with careful and dare I say, proper, coding the problems are fairly easy to overcome. It just requires a concerted effort to get out of the "tables mindset" and think about constructing pages in a slightly different way.

CSS layouts are actually much easier to fathom than complex table layouts. It's just a matter of breaking the page down into logical sections and marking your content up in logical sections. Then styling them using the CSS.

CSS is logical.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Sheco]

Personally, I still find it hard to break out of the "tables mindset."

Part of my problem is that I tried CSS when it was a brand new thing and frankly, at that time, it wasn't enough to completely replace tables and having a mix-match where some was CSS and other was HTML was a real mess. I ended up using inline CSS to do things like alternating the backcolor of rows in ledger-type tables... oh and it was good for fonts.

I recognize that CSS matured several years ago and is now almost all it was hyped up to be back in 1997. I recognize that it vastly superior in many many ways... but I still have a hard time breaking out of my "tables mindset" and somehow the simplicity of a single file containing "the page" still appeals to me.

 

[Foamcow]

Why can't you have a "single file containing the page" anyway?

For convenience and optimisation it's often better to put the CSS in an external file. But that is no different to, for example, linking to an external javascript file.

If anything CSS makes the HTML bit simpler.
By using CSS to style the page, your HTML tags can be free of any styling info and consequently alot easier to modify/debug.

Look at these 2 samples:

http://www.targetgroup.co.uk/clients/bpe/consumer/

http://www.targetgroup.co.uk/clients/bpe/lender/

Both layouts are pretty simple. Both are pure CSS. Both are also easily achievable with tables. But look at the HTML.
See how "stripped down" it is? See how easy it is to see what does what on the page? Now imagine what the code would look like with a table layout?




Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[vbkris]

>>Tables are EXCELLENT for marking up TABULAR DATA.
That is what they are for, there is nothing better.

No point of disagreement there


>>Where tables aren't so good is when used to layout a page.

what does this "Layout" word mean. to me it means placing data in a logical order in a page.

if u r referring to CSS layout are u suggeting about floating <div> tags (or for that matter any tag)?

lets take an e.g. once more, lets saye we have to display one image at the right hand corner and the other on the left hand corner.
lets say this pattern repeats (not the same images but different images)

now in CSS i would have to output each image as a DIV right? now thats a very tedious process.

i still stick to the same point:
the best way to logically arrange a data is using a table. and formatting that table is best done with CSS.




ca8msm:
>>There's little point me saying what I would do to a piece of classic ASP code as this is an ASP.NET forum (and the example you provided does just seem to be showing tabular data which is what tables were designed for!).

all i was trying to say is that tables IS cross browser compatible and it is the most widely used method to represent data (from a simple form to complex reports).

using CSS here would be a disaster (u would have to declare a <DIV> instead of each cell).

A CSS can never replace good old tables...

----------------------------------------------------------
FoamCow
>>By using CSS to style the page, your HTML tags can be free of any styling info and consequently alot easier to modify/debug.

u couldnt have made it better, CSS is meant for formatting html elements...

Known is handfull, Unknown is worldfull

 

[Sheco]

Don't get me wrong, I'm not saying that tables are better.

I'm just sharing the twisted logic behind my "tables mindset." I realize the mindset is tainted by old-fogey-ness... something like "in my day we had to walk barefoot in the snow uphill both ways to format a web page, and we liked it!"

Part of my problem I think is that I never really had the patience to go back and learn all the great things you can now do with CSS.

When the only tool you have is a hammer, every problem looks like a nail!

 

[Foamcow]

what does this "Layout" word mean. to me it means placing data in a logical order in a page.

Layout means the design and construction of a page. More specifically it might mean the positioning of elements of the page design.
Yes, placing elements in a logical order on a page.
More often or not, unless working with a very basic page desing, this cannot be achieved using a table based layout due to the way tables work. i.e. reading top-left to bottom-right.

For example, take a look at this:

http://www.avoncrusade.co.uk/

I built that site a couple of years back using a nested table layout. It works fine, but if you look at the underlying structure of the page it is not built in the same order as you would read the page.

You have the header, the navigation tabs, search box, flash movie, right hand column (with sub tables for each "panel"), side navigation, content, footer.

Now when you look at that page, where do you look first. The navigation? The content? The header?
Wherever it is, I bet you look at the content before the right column. So why does the right column come ahead of the content in the code? What does a search engine or screen reader "see"?

Using CSS to lay the page out means the content can come BEFORE the right column, as it would in it's "read order".

This has benefits beyond making the code easier to follow/edit.

Further to that, if I had built that page with CSS I could set up an alternative layout for hard copy printing, a different, narrower layout for mobile devices, one for screen readers, one for web-tv... and I wouldn't have had to make extra pages.

Check out my previous post with links to the 2 CSS templates. Print one. Note the navigation is removed on the print out and (if you are using a Mozilla based browser) the links are expanded to show the actual URL they link to rather than the link text.

Also note how light the code is compared to a table layout.
I simply define each area, navigation, header, content, right column and any sub parts therein. Define how each area relates to the others e.g. The header is at the top, the content is in the middle flanked by the nav and right columns etc. Then define how I want standard HTML elements (<p>,<a>,<img>,<ul> etc) to appear within each area.
The page is then constructed with "bog standard", no frills, HTML.

Oh, another great use of CSS is in doing navigation. Just define the nav as a series of nested lists, then use CSS to turn them into a nav bar, or drop downs or whatever you fancy.

now in CSS i would have to output each image as a DIV right? now thats a very tedious process.

No. With 2 short CSS statements you could do that.
Try this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Image float test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
	img {position:relative;float:left;clear:left;}
	img.right {position:relative;float:right;clear:right;}
</style>
</head>

<body>
<img src="images/1.jpg">
<img class="right" src="images/2.jpg">
<img src="images/3.jpg">
<img class="right" src="images/4.jpg">
<img src="images/5.jpg">
<img class="right" src="images/6.jpg">
<img src="images/7.jpg">
<img class="right" src="images/8.jpg">
<img src="images/9.jpg">
<img class="right" src="images/10.jpg">
</body>
</html>

I only have to define 1 class (for the right hand images), I can just apply a style to the img tag. If I didn't want to effect all images on the page I could define another class, or better than that, contain the whole thing in a block level element such as a <div> and give that an ID. Then target the specific img tags within that ID.

How do you do it with a table? Which solution has the more code and is more labourious?

i still stick to the same point:
the best way to logically arrange a data is using a table.

If by "data" you mean spread sheet style information then I won't dispute that. If by "data" you mean page content I would definitely say that your argument doesn't hold water.
Tables have to be defined from top-left to bottom-right, a row at a time. If you have a column that spans more than 1 row then the flow is immediately illogical as it becomes necessary to include the entire contents of that column BEFORE you start the next row.
How is that a logical order if the table content is not spreadsheet style data?

u couldnt have made it better, CSS is meant for formatting html elements...

And formatting does not just mean the colour and font. It means how the element interacts with other elements.


I beleive the major issue in this discussion is that we have a couple of very specific misconceptions going on.

[ul]
[li] "Data" means numbers - report style.[/li]

[li]Web pages are certainly not all report style tables of data. In fact I think the majority aren't.[/li]

[li] It's not JUST about CSS. It's about semantic markup. i.e. using the right tag for the right job and as a consequence the separation of content (HTML, XHTML) from style (CSS).[/li]
[/ul]

Your comment about having to wrap img tags in divs leads me to believe that perhaps a little reading and research on the use of CSS layout would go a long way to help you understand why so many people are so passionate about it.
True, it's not the answer to everything, but I really do believe that sites constructed with CSS and semantic markup are the way forward. They simply work better on levels beyond what the user sees in the browser.
Due to cross browser/platform compatibility problems many people, yourself included I think, have a tarnished view. But as time goes on these problems have been ironed out and there are now few real problems of this nature.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[vbkris]

>>Your comment about having to wrap img tags in divs leads me to believe that perhaps a little reading and research on the use of CSS layout would go a long way to help you understand why so many people are so passionate about it.


i will do that and come back to you.

like Sheco says i have the "Table layout" mindset.

now that u have given me examples i will start learding CSS desgining too...

Known is handfull, Unknown is worldfull

 

[ca8msm]

Excellent post there Foamcow with lots of good points. Thanks for the time taken to write all that up.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[Foamcow]

Thanks chaps.


In case someone wants to pull me up on it

<img class="right" src="images/2.jpg">

Should, of course be

<img class="right" src="images/2.jpg" />

To maintain consistency with the declared DOCTYPE.

Silly me.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[FesterSXS]

don't forget your alt attribute too

Tony

Spirax-Sarco - steam traps control valves heat exchangers
Sun Villa - Luxury Florida accommodation

 

[Foamcow]

oops.. you're right of course

<img class="right" src="images/2.jpg" alt="An Image" />

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r