When using tables to display tabular data, I've run into a few problems using them with my CSS layouts. Usually I can't use width="100%" without it screwing up floated DIV's, etc. As far as positioning and styling goes, which attributes should be defined in the actual <table> <tr> and <td> tags - and which attributes should be defined with STYLE?
I'm displaying search results with a table - each row is one result, and there are about 8 columns of data to describe the result (it's pretty detailed data). What's the best way to make that type of thing very accessable? Should I use the <th> <thead> <tbody> and <tfoot> tags?
Should I just not even use tables? I know I can recreate the same thing with DIV's, it's just that it would take longer.
What about displaying a form, or detailed information like a user account or details about a certain item? It seems like I can create a page with a table just for the main content with a table, with all the layout and navigation with CSS - but I'm not sure where to draw the line with the "Tabular data" thing.
Another thing, what is the most supported way to determine the width of the content? Right now I have two logo images at the top of the page. The combined width is 742px. I made it so that the min-width is 742px, but the content stretches to the entire width of the screen if it's wider. Is that ok?
What can you change using CSS on the <fieldset> and <legend> tags?
What about font size? I have it set in px right now, which I know I should change. What font size (and units) seems to look best in most browsers?
I looked at the stats for the browsers that visit the website I'm redesigning. ~95% use Internet Explorer, ~5% use Netscape Navigator, <1% use Firefox / Mozilla (I think that's just me testing the site every day).Here's something to get your started. I hope you find this useful.
You can specify individual td widths (NOT tr's!) like this:
--------
<td style="width: 50%">content</td>
--------
But it's often much cleaner to set up classes as you usually would in your external CSS file so that you can change things later without a ton of find and replaces.
Like this . . ..
--------
<td class="product-names">content</td>
--------
and then in your CSS file, you'd simply have:
td.product-names{
width: 50%;
}Oh, and regarding font sizes, since you said you don't want to use px because they display differently in different browsers, you should give either % or em a shot. Both are relative sizing options.
So you can set your text size for the page in the body, and then do all your other text-sizes afterward, and they'll cascade accordingly; like this:
---------------------------------
YOUR EXTERNAL CSS STYLESHEET
---------------------------------
BODY{ font-size: 100%; }
H1{ font-size: 130%; }
.small-text{ font-size: 80% }
---------------------------------
Make sense?For text I prefer using pt instead of px.
Tables shouldn't be used for layout but they make sence for tabular data.no no no no!!!
heavenly_blue, I highly recommend you STAY AWAY from using pts to style the size of your text on websites!!!
I have no intention or desire of starting a relgious war over this, but points are not meant for computer monitors--they're great for print (and print-only pages), but NOT for the web.
Take a look and see for yourself:
Check out Why (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=UsingPoints">http://css-discuss.incutio.com/?page=UsingPoints</a><!-- m -->)This isn't entirely related but....
If someone wants to print a web page does em's cause any problems?
Thanksis there any reference where i can find the all the valid, cross-browser CSS attributes for each HTML element?
For example, I am using the <fieldset> and <legend> tags. I want to know what CSS styles are valid for those tags, and work in all recent browsers. I've already tried some styles, and only certain ones work in certain browsers, or they behave differently.
It would be nice if there were an easy reference that showed this information for all the html elements. I tried searching, but didn't find much.Originally posted by baseiber
If someone wants to print a web page does em's cause any problems?
I really don't think it does, but if you want a fixed text size for your printed pages you could always use the @media command to create print styles for your page:
@media print { /* printer-only styles */
body {
color:black;
font-size:12pt;
}
}
I'm displaying search results with a table - each row is one result, and there are about 8 columns of data to describe the result (it's pretty detailed data). What's the best way to make that type of thing very accessable? Should I use the <th> <thead> <tbody> and <tfoot> tags?
Should I just not even use tables? I know I can recreate the same thing with DIV's, it's just that it would take longer.
What about displaying a form, or detailed information like a user account or details about a certain item? It seems like I can create a page with a table just for the main content with a table, with all the layout and navigation with CSS - but I'm not sure where to draw the line with the "Tabular data" thing.
Another thing, what is the most supported way to determine the width of the content? Right now I have two logo images at the top of the page. The combined width is 742px. I made it so that the min-width is 742px, but the content stretches to the entire width of the screen if it's wider. Is that ok?
What can you change using CSS on the <fieldset> and <legend> tags?
What about font size? I have it set in px right now, which I know I should change. What font size (and units) seems to look best in most browsers?
I looked at the stats for the browsers that visit the website I'm redesigning. ~95% use Internet Explorer, ~5% use Netscape Navigator, <1% use Firefox / Mozilla (I think that's just me testing the site every day).Here's something to get your started. I hope you find this useful.
You can specify individual td widths (NOT tr's!) like this:
--------
<td style="width: 50%">content</td>
--------
But it's often much cleaner to set up classes as you usually would in your external CSS file so that you can change things later without a ton of find and replaces.
Like this . . ..
--------
<td class="product-names">content</td>
--------
and then in your CSS file, you'd simply have:
td.product-names{
width: 50%;
}Oh, and regarding font sizes, since you said you don't want to use px because they display differently in different browsers, you should give either % or em a shot. Both are relative sizing options.
So you can set your text size for the page in the body, and then do all your other text-sizes afterward, and they'll cascade accordingly; like this:
---------------------------------
YOUR EXTERNAL CSS STYLESHEET
---------------------------------
BODY{ font-size: 100%; }
H1{ font-size: 130%; }
.small-text{ font-size: 80% }
---------------------------------
Make sense?For text I prefer using pt instead of px.
Tables shouldn't be used for layout but they make sence for tabular data.no no no no!!!
heavenly_blue, I highly recommend you STAY AWAY from using pts to style the size of your text on websites!!!
I have no intention or desire of starting a relgious war over this, but points are not meant for computer monitors--they're great for print (and print-only pages), but NOT for the web.
Take a look and see for yourself:
Check out Why (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=UsingPoints">http://css-discuss.incutio.com/?page=UsingPoints</a><!-- m -->)This isn't entirely related but....
If someone wants to print a web page does em's cause any problems?
Thanksis there any reference where i can find the all the valid, cross-browser CSS attributes for each HTML element?
For example, I am using the <fieldset> and <legend> tags. I want to know what CSS styles are valid for those tags, and work in all recent browsers. I've already tried some styles, and only certain ones work in certain browsers, or they behave differently.
It would be nice if there were an easy reference that showed this information for all the html elements. I tried searching, but didn't find much.Originally posted by baseiber
If someone wants to print a web page does em's cause any problems?
I really don't think it does, but if you want a fixed text size for your printed pages you could always use the @media command to create print styles for your page:
@media print { /* printer-only styles */
body {
color:black;
font-size:12pt;
}
}