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

 

[VBakias]

Changing a cell width, eg to 100 pixels, this is the minimun width. If you add letters in it that they need more space to be shown, then the width of the cell will be increased. If you delete some and the word's length become less than 100 pixels, the cell width will stay at 100 pixels.

 

[WorkerBeeJ]

Thanks, and what about empty cells? A lot of times I try to add cells as spacers, but they never seem to show up even when I've set a width. Does the cell have to contain something in order to show up? If so, does that something then have to be the minimum width of the cell?

And if I've set the widths of all my cells but the widths of all the cells together are less than that of the table, which cell gets the rest of the space?

Also, any suggestions on general references would be great.

Thanks!

 

[VBakias]

If you type a letter in an empty cell and you have not changed is default properties and then you hit backspace, the column width would be about 0. If you right click in a cell -> Cell Properties and set the width, then this is the minimum width. If you write something in it and then erase it the width should be what you had set (minimum).

I hope you use an editor like frontpage, and not doing this by typing the code.

About the references, open frontpage's online help and type something like: cell width

 

[VBakias]

Forgot to say that it is terrible action if you want some space between words, images, etc and for that to use space (&nbsp. All structure is not stable. So you use tables instead.

That's the answear to "Does the cell have to contain something in order to show up?".

They SHOULD appear (the empty cells as spaces).

 

[WorkerBeeJ]

As I said in my first post, all our html is written without an editor, which is more work, but usually makes for cleaner code. We used to have someone working here who would use frontpage on the sly, and we could always tell her code from anyone elses. It was usually a mess.

That said, does anyone have a generic reference suggestion?

Thanks.

 

[vbkris]

try a product like Dreamweaver, the code it writes is just like .NET would write...

Known is handfull, Unknown is worldfull

 

[firstdivision]

I like

http://www.echoecho.com/html.htm

and

http://www.devguru.com

for references.

 

[WorkerBeeJ]

Thank you!

Since I'm just the worker bee and don't set policy regarding what we can and cannot use to write our code, I appreciate the recommendation for the reference. Any other recommendations from someone else?

WBJ

 

[ca8msm]

My recommendation would be to not use tables at all for page layout. They were not designed to do this and a common misconception is that they were.

CSS provides a much cleaner (and better results with cross-browser issues) and elegant way of organising your page. e.g.

http://dotnethero.com/hero/application/homepage.aspx?nmx=5_5

____________________________________________________________

Need help finding an answer?

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

 

[vbkris]

>>My recommendation would be to not use tables at all for page layout. They were not designed to do this and a common misconception is that they were

so what were they designed to do? before the advent of CSS the only way to maintain layouts was tables...

Known is handfull, Unknown is worldfull

 

[ca8msm]

so what were they designed to do?

They were designed to show data in a tabular format (imagine microsoft excel without any formatting).

Prior to CSS people did use them to perform page layout but as they were not specifically designed to do this, there are lots of issues surrounding their use (e.g. how empty cells are dealt with, how they are rendered in different browsers). Now that CSS has been developed with page layout in mind, lots of these issues are no longer a problem.


____________________________________________________________

Need help finding an answer?

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

 

[vbkris]

Prior to CSS people did use them to perform page layout but as they were not specifically designed to do this, there are lots of issues surrounding their use

e.g. how empty cells are dealt with how they are rendered in different browsers

this has never been a problem (u have to simply paste &nbsp.

even DataGrids use the same concept.

i heavily rely on tables, its easier to code (atleast for me) than having layers floating around in the page...

Known is handfull, Unknown is worldfull

 

[ca8msm]

this has never been a problem (u have to simply paste &nbsp.

And what if the data being displayed in those tables is dynamic? Do you just put a "&nbsp" in each cell just in case?!

even DataGrids use the same concept.

That's because DataGrids are designed to show tabular data hence why they use tables. You wouldn't put one DataGrid on a page and then fill certain cells with various items to make your page layout correct would you (which would be near enough the same as using a table)?!

i heavily rely on tables, its easier to code (atleast for me) than having layers floating around in the page...

I take it you don't do a lot of cross-browser web design then. CSS conforms to W3C standards so that it is cross-browser compatible; using tables means that it may be rendered completely different from one browser to the next. Also, I'm not sure I even understand your logic by saying it's easier to code. Using CSS will dramatically reduce the code needed as you simply set the relevant class that should be used whereas using tables is messy, very hard to maintain and a lot more code.




____________________________________________________________

Need help finding an answer?

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

 

[vbkris]

>>And what if the data being displayed in those tables is dynamic? Do you just put a "&nbsp" in each cell just in case?!

huh?

if there is data we display it otherwise we display  

>>even DataGrids use the same concept.
yup i agree, what i am trying to say is Tabular data is by far the best way to present data (thats why DataGrid uses it).

>>I take it you don't do a lot of cross-browser web design then. CSS conforms to W3C standards so that it is cross-browser compatible;

its rather vice versa. CSS is a w3C standard but that is only for the most recent versions (lets say IE5+) browsers.

but when it comes to tables it is ALWAYS cross browser compatible.

could u point out 1 case where tables are NOT cross browser compatible???



Known is handfull, Unknown is worldfull

 

[ca8msm]

if there is data we display it otherwise we display  

So for every single cell that may or not contain data, you have to check if it's blank. If it isn't you display the data, otherewise you write out "&nbsp". Seems like a waste of processing time to me.

but when it comes to tables it is ALWAYS cross browser compatible.

could u point out 1 case where tables are NOT cross browser compatible???

I could point out lots of cases. For example, an otherwise great ASP.NET menu which is available from

http://www.skmmenu.com/menu/

uses tables to write out the menu elements. Viewing this menu looks fine in IE but in Mozilla Firefox the tables are not rendered the same and the menu items do not appear directly under the relevant menu.

This cross-browser problem is because tables are used for something they were not designed for. If you insist on using them and not using evolved design methods such as CSS, then you will run into problems depending on how each user of your site is viewing it (i.e. which browser they are using, screen resolution etc).


____________________________________________________________

Need help finding an answer?

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

 

[vbkris]

>>So for every single cell that may or not contain data, you have to check if it's blank. If it isn't you display the data, otherewise you write out "&nbsp". Seems like a waste of processing time to me.


and how will that be overcome using any other method???

>>I could point out lots of cases. For example, an otherwise great ASP.NET menu which is available from

http://www.skmmenu.com/menu/

uses tables to write out the menu elements. Viewing this menu looks fine in IE but in Mozilla Firefox the tables are not rendered the same and the menu items do not appear directly under the relevant menu.

i would like to point out that i too use tables in dropdowns(which is cross browser). badly written tables will always lead to problems, for that case so would layers.

>>(i.e. which browser they are using, screen resolution etc).

i was acutally trying to point that out too, a table can be center aligned across screens without any problems.

one more thing:
if u think that i am denying CSS as a good technology then u are wrong. i too widely use CSS. but i would prefer using tables.

in my past 5 years of experience in HTML programming i have never come across a problem...

Known is handfull, Unknown is worldfull

 

[ca8msm]

and how will that be overcome using any other method???

Because if you use CSS, you don't have data columns, so if no data exists you don't even need to worry about not having a space, as nothing will be displayed data wise but the actual design will still look the same (whereas if you are using a table the cell will be displayed differently if there is or isn't data in it).

i would like to point out that i too use tables in dropdowns(which is cross browser). badly written tables will always lead to problems, for that case so would layers.

My point here is that they are not "badly written tables". They are simply HTML tags that display differently from one browser to the next and therefore alter the look of the website depending on how you are viewing it. This is what I deem to be a cross-browser incompatibily as when you pass HTML to a browser it should look the same regardless of which browser is being used. Therefore in response to:

in my past 5 years of experience in HTML programming i have never come across a problem...

I would say that I have just pointed one of many examples where it is a problem.



____________________________________________________________

Need help finding an answer?

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

 

[vbkris]

>>Because if you use CSS, you don't have data columns, so if no data exists you don't even need to worry about not having a space, as nothing will be displayed data wise but the actual design will still look the same (whereas if you are using a table the cell will be displayed differently if there is or isn't data in it).


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


>>My point here is that they are not "badly written tables". They are simply HTML tags that display differently from one browser to the next and therefore alter the look of the website depending on how you are viewing it.

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.


>>I would say that I have just pointed one of many examples where it is a problem.
what u point out is code written by someone else, it will be time consuming for me to debug it in toto. from the JS coding that i have done i usially have a <Div> into which i insert the table(it will overflow if div length is lesser thatn table length) and i have not faced any problem...






Known is handfull, Unknown is worldfull

 

[vbkris]

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

Known is handfull, Unknown is worldfull