Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Tables vs. CSS: Need advice on which is better suited for this job...

Tables vs. CSS: Need advice on which is better suited for this job...
Thread Tools
Akarso
Junior Member
Join Date: Nov 2001
Location: California
Status: Offline
Reply With Quote
Mar 17, 2004, 07:35 PM
 
Hey guys,

I was wondering if there was an easier way of using CSS to format information in a tabular form. I'm trying to create a web application that will return information and then display them in a table/row format. I've read several articles on A List Apart and i finally came up with a way to do it in CSS, but i was wondering if anybody knows if what i'm doing is the "right" way to do it.

Also, should i even bother with an all CSS layout for the formatting of the search results ? Would tables be better? (right now if i used the tables, it would actually save me a few bytes, but of course, down the line, it'll be harder for me to restructure the page if i had to)

this is a test page i created using all CSS: csstables.html
--so far it works great in Safari 1.2 , FireFox and IE/Mac 5.2

this is a test page i created using tables: tabletables.html
--so far it works great in Safari 1.2 , FireFox and IE/Mac 5.2

this is the CSS file for the test pages: table.css
( Last edited by Akarso; Mar 18, 2004 at 02:21 PM. )
     
cowerd
Senior User
Join Date: Jan 2001
Status: Offline
Reply With Quote
Mar 17, 2004, 08:05 PM
 
semantically isn't this information supposed to be tabular?
yo frat boy. where's my tax cut.
     
Akarso  (op)
Junior Member
Join Date: Nov 2001
Location: California
Status: Offline
Reply With Quote
Mar 17, 2004, 08:22 PM
 
Originally posted by cowerd:
semantically isn't this information supposed to be tabular?
I believe so. But i wanted to use a pure CSS layout and i was wondering if i could accomplish it would making the page bloated and harder than it needs to be.

according to this alistapart.com article:

"...However, tables imply a relationship between column and/or row headers, and the data in the table cells. When we use them for layout, we lose the structural semantics of a table. And we are back to using HTML for layout. Nesting tables only compounds the problem..."

I'm still rather new at this so thats why i'm asking if what i'm doing with the CSS is correct? Or am i miss using it and should stick with using tables.
(oi)
     
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Mar 17, 2004, 09:43 PM
 
Speaking for myself, I have yet to see any CSS formatting which replaces HTML tables which isn't INFINITELY more coding. In my opinion, while it can achieve similar results, CSS formatting doesn't come CLOSE to replacing tables. If and when tables are deprecated, I'll be more than annoyed.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Millennium
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Mar 17, 2004, 09:59 PM
 
Using CSS for a tabular layout is destroying semantics in the name of semantics. You may as well drinking in the name of sobriety.

That said, why have you chosen this particular layout type? It looks as though this might be better done as a table with each row being one patient and having columns for name, medical record number, gender, birthdate, an Admit link, and an Update link.

In addition to simplifying the look for users, it would also neatly collapse code-wise into only one table; no nesting would be necessary at all. Admittedly, it is not quite as pretty as the layout you have devised (which, incidentally, looks quite nice), but it may provide more functionality for your users. You might want to experiment with the idea.
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
     
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Mar 17, 2004, 10:11 PM
 
What am I missing here? The CSS page and the one that uses a table appear to render identically to me.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Turias
Mac Elite
Join Date: Nov 2003
Location: Minnesota
Status: Offline
Reply With Quote
Mar 17, 2004, 11:03 PM
 
Originally posted by DUNSEL:
What am I missing here? The CSS page and the one that uses a table appear to render identically to me.
Um, one is coded using CSS and the other with tables.
     
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Mar 17, 2004, 11:35 PM
 
So in other words, I'm not missing a thing. I obviously knew that from my post.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Turias
Mac Elite
Join Date: Nov 2003
Location: Minnesota
Status: Offline
Reply With Quote
Mar 18, 2004, 12:14 AM
 
Originally posted by DUNSEL:
So in other words, I'm not missing a thing. I obviously knew that from my post.
Right.

It's a question of which is more correct, not which looks better.
     
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Mar 18, 2004, 12:20 AM
 
But unless I'm crazy millenium's post intimated that "it wouldn't be as pretty" as the css layout, if he used a table. Meanwhile he DID use a table to produce identical results. That's the part where I get confused.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
cowerd
Senior User
Join Date: Jan 2001
Status: Offline
Reply With Quote
Mar 18, 2004, 12:48 AM
 
Speaking for myself, I have yet to see any CSS formatting which replaces HTML tables which isn't INFINITELY more coding. In my opinion, while it can achieve similar results, CSS formatting doesn't come CLOSE to replacing tables. If and when tables are deprecated, I'll be more than annoyed
In some of my markup, moving to a strictly CSS layout has reduced page size by 1/3.

You haven't tried hard enough. Try:
www.csszengarden.com
yo frat boy. where's my tax cut.
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Mar 18, 2004, 01:38 AM
 
Originally posted by DUNSEL:
Speaking for myself, I have yet to see any CSS formatting which replaces HTML tables which isn't INFINITELY more coding. In my opinion, while it can achieve similar results, CSS formatting doesn't come CLOSE to replacing tables. If and when tables are deprecated, I'll be more than annoyed.
Just as a simple example using tables and css... try creating a table with black borders around each cell... just using tables.

Check how much code it requires... now just create a simple table with no formatting and use the following css code:

table { border: solid 1px #000; border-collapse: collapse }

Which is more code?

Or create a site with several two column tables, each with a title... something that could be used for a gallery for example.

Check the code... then try:

<h2>Title</h2>
<div><div>Left text</div>This is the main text. This is the main text.</div>

Repeat that a few times and then with the css code...

div div { float: left }

The idea is that you can keep your HTML code as clean as possible... the HTML code can be repeated tens of.. even hundreds of time in the case of a database. That's what creates such high-bandwidth sites. So even if you have large css, it is only loaded once and then used throughout the page. That's why using HTML/CSS lets you have much smaller sites.

Do you have any examples of table formatting that CSS can't even come close to?
     
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Mar 18, 2004, 01:57 AM
 
I think you missed the point. The issue wasn't using, or not using, css to format the appearance of HTML tables, but rather using css formatting entirely in LIEU of HTML tables. I use CSS to format nearly all HTML elements.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Simon Mundy
Grizzled Veteran
Join Date: Jun 2001
Location: Melbourne, Australia
Status: Offline
Reply With Quote
Mar 18, 2004, 03:16 AM
 
Yep, although I like using CSS for 2 or 3 column layouts, good, well-attributed tables (i.e. those that fully utilise 'summary', 'caption', 'tbody', 'th', etc) are my choice when it comes to longer lists.

It's the having to nest DIVs or SPANs repeatedly for no other reason than to create a visual technique that drives me nuts - the HTML code looks messy and unfriendly.

HOWEVER, I'll never use tables to create the framework for a page, or to - say - make a form, or to layout two columns of text - where it really isn't suitable. I always have to ask myself before I use a table - can I give it a meaningful 'summary' or caption? If the answer is no, it's back to headings, DIVs and Ps.

Tables for layout's sake is the argument here, I would say, and the abuse of said tables in many a site in the last 3-4 years.

...so back to the original question...

Yes, I would say the table is most suitable because you have tabular information, you can give it meaningful descriptions (Summary is 'Patient information for...' and caption would be 'Page 1 of 6'). The code for the tabular layout is also much less contrived.
Computer thez nohhh...
     
registered_user
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Mar 18, 2004, 10:23 AM
 
I'd use tables in this instance as well because, as said, it's tabular data. What I like to do before I choose a table, is ask myself what the column headings would be. If I can easily answer that question, then it's a good bet that I should be working with table.

Originally posted by DUNSEL:
I think you missed the point. The issue wasn't using, or not using, css to format the appearance of HTML tables, but rather using css formatting entirely in LIEU of HTML tables. I use CSS to format nearly all HTML elements.
If your argument is appearance, then perhaps I could use bondo polymer body filler as an analogy. A classic car that is always garage kept and preserved in its pristine condition is of more value than one that was rusted out and then refilled with bondo to look new. Even though the finished product looks the same on the outside, it lacks the integrity of a job done properly. It's essentially like fixing stuff with duct tape and bubble gum. You would duct-tape a video card in place just because you think its easier than using a screwdriver, would you?

By using css when it's appropriate, your content is not sullied with superfluous formatting information. For example, when this sample page is generated, the names and information are pulled from a database -- just the names and information, no markup. That's because, as I'm certain you'll have surmised, it's foolish to store formatting information in the database. Why? Because it corrupts your data. Using tables for layout purposes is the same concept -- it corrupts your data. If you should ever find that you want to move your data to a new site, or if someone should *gasp* want to buy your data, it will be worth much less if it's not bogged down with tables, or even font tags because to reuse it, someone must go and clean up all of the irrelevant junk.

Another reason is compatibility with screen reader software. If you format your layout with tables, then the screen reader must assume that you aren't presenting tabular data, and since computers have never done well at assumption, it ultimately ends up with fewer good screen readers for the disabled. Why? Again, because the data is corrupted.

If screen-reader software isn't important enough that you'd consider it, perhaps you should consider the coming age of portable devices connecting to the internet. With a css layout, you can control layouts for these devices and even control what images are downloaded. If, however, your data is corrupted with a table lay-out, your data can not be adapted for mobile devices, and it's unlikely a mobile user will bother with your site.

And while these data-integrity issues may or may not be important to you now, they are remarkably important to almost every client I've served.

So what people are trying to explain to you, is that while you can manipulate your tables to look the same as a css layout, and while it may even be easier for you to do so, your pages will have corrupted data that has less integrity, is not portable, uses excessive bandwidth, and may be inaccessible to some users.
     
Akarso  (op)
Junior Member
Join Date: Nov 2001
Location: California
Status: Offline
Reply With Quote
Mar 18, 2004, 02:36 PM
 
Originally posted by Millennium:
Using CSS for a tabular layout is destroying semantics in the name of semantics. You may as well drinking in the name of sobriety.

That said, why have you chosen this particular layout type? It looks as though this might be better done as a table with each row being one patient and having columns for name, medical record number, gender, birthdate, an Admit link, and an Update link.

In addition to simplifying the look for users, it would also neatly collapse code-wise into only one table; no nesting would be necessary at all. Admittedly, it is not quite as pretty as the layout you have devised (which, incidentally, looks quite nice), but it may provide more functionality for your users. You might want to experiment with the idea.
Wow, you know what? I never thought to use that format. In my zeal to go for an all CSS layout, i overlooked something as simple as that. Thanks for the tip Millennium, i really appreciate it.

Also thanks to everybody who commented and helped me in this project. I'm still rather new to CSS so i wasn't sure what was appropriate or not. So i'll scrap the css table format and just use the tables with the columns for names as Millennium suggested.

Thanks again.
(oi)
     
cnelson87
Forum Regular
Join Date: Jul 2002
Location: Seattle
Status: Offline
Reply With Quote
Mar 18, 2004, 03:28 PM
 
didn't read everything or even check out your site. just curious why it has to be one or the other? in my coding i don't nest tables anymore, i use css to place html elements like smaller tables (for query results or a nav menu) on the page. works great, less filling.
chris
     
york28
Senior User
Join Date: Mar 2002
Location: Chicago, IL
Status: Offline
Reply With Quote
Mar 18, 2004, 07:06 PM
 
I'd say use table when you need a table. Not for page layout. But there is no sense in writing really complicated html and css just to emulate something that is done perfectly well by a table.

In your case, though, you don't really have much of a table, it's more of a list with two columns, in which case the choice is not clear. I'd say do the one that works best in the most browsers.

The thing about standards is that they don't always apply. You're making a web system for use in an office it seems, so it will likely be a closed system, and you will know who is using it, what browsers, etc. (I could be wrong about this, if the site will be for the general public, ignore this paragraph.) You don't need to worry about random people with screen readers stumbling upon your site from a google search in such a situation. With that being said, though, it's usually good to the best you can, but remember that the purpose of your page/site it so perform a function.

For those that think that standards-based designers never use tables, consider that the second most recent article on A List Apart talked about tables, and their use to display tabular data.

Good luck with your project.
We need less Democrats and Republicans, and more people that think for themselves.

infinite expanse
     
Scarpa
Dedicated MacNNer
Join Date: Aug 2002
Status: Offline
Reply With Quote
Mar 18, 2004, 08:28 PM
 
At the risk of beating a dead horse here, a good example of the structure vs presentation debate is copy-paste out of a web page.

Using your examples I copy-pasted the entire table from the browser to Excel. The table based layout preserved the column/row arrangements and I immediately had a usable data set. The css layout did not preserve the data structure.

Another example would be to view both pages without the style applied, by either removing the style sheet or using an old browser. You'll get the same effect, in the table layout the data structure will be preserved, in the css layout it will not.
     
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Mar 18, 2004, 09:49 PM
 
Originally posted by registered_user:
I'd use tables in this instance as well because, as said, it's tabular data. What I like to do before I choose a table, is ask myself what the column headings would be. If I can easily answer that question, then it's a good bet that I should be working with table.



If your argument is appearance, then perhaps I could use bondo polymer body filler as an analogy. A classic car that is always garage kept and preserved in its pristine condition is of more value than one that was rusted out and then refilled with bondo to look new. Even though the finished product looks the same on the outside, it lacks the integrity of a job done properly. It's essentially like fixing stuff with duct tape and bubble gum. You would duct-tape a video card in place just because you think its easier than using a screwdriver, would you?

By using css when it's appropriate, your content is not sullied with superfluous formatting information. For example, when this sample page is generated, the names and information are pulled from a database -- just the names and information, no markup. That's because, as I'm certain you'll have surmised, it's foolish to store formatting information in the database. Why? Because it corrupts your data. Using tables for layout purposes is the same concept -- it corrupts your data. If you should ever find that you want to move your data to a new site, or if someone should *gasp* want to buy your data, it will be worth much less if it's not bogged down with tables, or even font tags because to reuse it, someone must go and clean up all of the irrelevant junk.

Another reason is compatibility with screen reader software. If you format your layout with tables, then the screen reader must assume that you aren't presenting tabular data, and since computers have never done well at assumption, it ultimately ends up with fewer good screen readers for the disabled. Why? Again, because the data is corrupted.

If screen-reader software isn't important enough that you'd consider it, perhaps you should consider the coming age of portable devices connecting to the internet. With a css layout, you can control layouts for these devices and even control what images are downloaded. If, however, your data is corrupted with a table lay-out, your data can not be adapted for mobile devices, and it's unlikely a mobile user will bother with your site.

And while these data-integrity issues may or may not be important to you now, they are remarkably important to almost every client I've served.

So what people are trying to explain to you, is that while you can manipulate your tables to look the same as a css layout, and while it may even be easier for you to do so, your pages will have corrupted data that has less integrity, is not portable, uses excessive bandwidth, and may be inaccessible to some users.
Let me be clear. I use external CSS almost all the time. However, I use it to format HTML tags. While CSS positioning can mimic the appearance of an HTML table, it's a heck of a lot more work than just using a table and doing whatever formatting required for that table and contents with CSS. However if the issue is pulling from a database and displaying, I'd pull the info with java and use servlets and XML/XSL/CSS for display/formatting, because that's what I know.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Mar 18, 2004, 11:05 PM
 
Originally posted by DUNSEL:
Let me be clear. I use external CSS almost all the time. However, I use it to format HTML tags. While CSS positioning can mimic the appearance of an HTML table, it's a heck of a lot more work than just using a table and doing whatever formatting required for that table and contents with CSS. However if the issue is pulling from a database and displaying, I'd pull the info with java and use servlets and XML/XSL/CSS for display/formatting, because that's what I know.
The thing is, it's you who find it to be a lot more work because you're used to and familiar with tables. To any newbie CSS layouts are a lot more logical. Although it can be useful, layouts aren't meant to fit in grids. Would you find a page layout program like InDesign easier if the layout was restricted to a grid? Tables have very much shaped how the modern web looks today, css is beginning to change that and cause designers to think, literally, outside the box.

I think for anyone who's taken some time to learn the basic CSS mindset and memorize a few key attributes it's much faster and more efficient than having to employ a table-based design. You can take a layout and break it down into a series of boxes or sections... then literally put boxes or divs in your HTML and begin to style them. But disregarding all that... let's say you still find CSS layouts harder... Let's say you've made (same example as before) a nice looking gallery page using tables. You take your clients artwork and apply plug it into the gallery items, it spans several pages. You're ready to present the final copy and your client mentions that he wanted the images on the right side, not the left size. Now you're left with the task of trudging through all your files and manually editing each item, possibly aided with multiple find and replaces. Now that easy layout you made is no longer so easy to maintain. With a generic CSS layout you'd simply have...

<div>
&nbsp;&nbsp;&nbsp;&nbsp;<div><img src="image.gif" />Small caption</div><p>Main text here</p>
</div>

From within your CSS you'd change "float: left" to "float: right" and perhaps if you used borders, change your "border-right: solid 1px black" to "border-left: solid 1px black".

For this particular example you'd probably use a database to store the content and then use a script to apply the styles. Now that probably makes sense to you, but if you think of it another way... HTML can your database and CSS your script. With such generic HTML as my example above, you can manipulate it in any way you want and never have to touch the HTML again. But when you're doing a simple 5 page website and have several boxes throughout the site, you generally don't use a database.

Anyways.. just some ideas to ponder
     
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Mar 18, 2004, 11:24 PM
 
Well my response was geared to this particular example. I do not routinely use tables unless the situation calls for it (in my view). I tend to use them for groupings like links, or if the entire page is one that begs that kind of rigid formatting. In those cases, the advantage tables have is, stuff doesn't MOVE (so long as you hard code the width and don't use %). You can resize the browser and nothing on the page shifts, you just see less of it. However I've also built sites that upon window resize, all page elements will change in size proportionally, so that the entire page remains visible regardless of window size (mostly for laughs). I've never used any pagemaking software (well,frontpage, for about 10 minutes), so I dunno what would, or wouldn't, be easier where they're concerned.

Oh, and no, I wouldn't even consider a database for such a small amount of data. That would be making a TON more work for myself. I'd just use a table here, and format it and the contents with CSS.
( Last edited by DUNSEL; Mar 18, 2004 at 11:35 PM. )
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Akarso  (op)
Junior Member
Join Date: Nov 2001
Location: California
Status: Offline
Reply With Quote
Mar 19, 2004, 03:14 PM
 
Hey guys,

Okay, based on everybody's recommendation, i re-did the test page and this is what i got so far:

tables.html

I really like the new design, and it's definitely a lot easier to read. (i should have done it this way the first time around) The only thing is, does anybody know how to make the hover effect work in MS/IE6 with tables? I want it so that when a user has their arrow on a row, the row background/or font color changes color. (I got it to work fine in Safari and Firefox (both MS/OSX versions) BUT it doesn't work on IE6/IE5.2(OSX)

Thanks york28 for the link to that alistapart article. I plan on using it in my Web App.
(oi)
     
Turias
Mac Elite
Join Date: Nov 2003
Location: Minnesota
Status: Offline
Reply With Quote
Mar 19, 2004, 03:36 PM
 
Originally posted by Akarso:
Hey guys,

Okay, based on everybody's recommendation, i re-did the test page and this is what i got so far:

tables.html

I really like the new design, and it's definitely a lot easier to read. (i should have done it this way the first time around) The only thing is, does anybody know how to make the hover effect work in MS/IE6 with tables? I want it so that when a user has their arrow on a row, the row background/or font color changes color. (I got it to work fine in Safari and Firefox (both MS/OSX versions) BUT it doesn't work on IE6/IE5.2(OSX)

Thanks york28 for the link to that alistapart article. I plan on using it in my Web App.
:hover is broken for everything but anchor tags in IE. You have a couple options:

1) Use JavaScript and onMouseEnter/Leave events. I know, it's painful and ugly.
2) Check out the sticky in this forum showing a style sheet that someone wrote to fix things like this in IE.
     
Oisín
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status: Offline
Reply With Quote
Mar 19, 2004, 10:43 PM
 
This is just a small thing, but if I were you, I'd go with changing the background colour instead of the font colour when hovering, the way it was in your first example. First of all, changing the font colour is almost more confusing than attention-fixating, secondly, the background really does fix your eyes to that one row...
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Mar 20, 2004, 12:26 AM
 
Originally posted by Oisn:
This is just a small thing, but if I were you, I'd go with changing the background colour instead of the font colour when hovering, the way it was in your first example. First of all, changing the font colour is almost more confusing than attention-fixating, secondly, the background really does fix your eyes to that one row...
I second this idea... It looks like a link and I don't think that it makes it any more usable... the alternating rows and the position of the arrow cursor makes it clear enough. If you must have some sort of hovering, I agree with just having the background hilighted.
     
Akarso  (op)
Junior Member
Join Date: Nov 2001
Location: California
Status: Offline
Reply With Quote
Mar 20, 2004, 06:07 AM
 
Originally posted by Synotic:
I second this idea... It looks like a link and I don't think that it makes it any more usable... the alternating rows and the position of the arrow cursor makes it clear enough. If you must have some sort of hovering, I agree with just having the background hilighted.
I totally agree with you guys and that's what i originally intended to do. Unfortunately for some reason, the DOM code i used from the alistapart zebra article, breaks the hover effect for changing the row background. The only thing the hover effect works on is the text. (the background changes fine if i removed the DOM code) So i might have to do away with the DOM code and write seperate classes to handle the alternating rows. That is, unless someone can spot what i'm doing wrong in my CSS file to fix it. (obviously right now, my CSS file lacks the background declaration for the tr:hover due to the fact that i couldn't get it to work with the DOM code)

also, does anybody know how i can get a hold of the patch for IE6 from the dean edward website? i went there and there's a download link, but nothing happens. I tried getting the source code and using it with the CSS file he has on his webpage, but so far i can't get it to work. Maybe i'm missing something.

Again, thanks for the help and all the honest feedback. I really appreciate it.
(oi)
     
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Mar 20, 2004, 09:19 AM
 
I dunno if you wanna do it this way, but I posted this in another thread on a similar subject. If you only have this one table on your page, you can zebra the rows with a few lines of javascript:

<script type="text/javascript">
function tableChange()

{

var rows = window.document.getElementsByTagName('tr');
for(var i = 0; i < rows.length; i++)
{
(i%2==0)? rows.item(i).style.backgroundColor = "lightblue" : rows.item(i).style.backgroundColor = "E0EFEE"

} }
</script>

But that will zebra any table on the page, so if you have another table you DON'T want zebra-ed, you'd need to modify it.

If you want to really have a row standout on mouseover, you could use javascript to change the other row backgrounds to black, or similar color. If that approach sounds useful to you, I could whip up the function.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Akarso  (op)
Junior Member
Join Date: Nov 2001
Location: California
Status: Offline
Reply With Quote
Mar 22, 2004, 03:54 PM
 
Originally posted by DUNSEL:
But that will zebra any table on the page, so if you have another table you DON'T want zebra-ed, you'd need to modify it.

If you want to really have a row standout on mouseover, you could use javascript to change the other row backgrounds to black, or similar color. If that approach sounds useful to you, I could whip up the function.
thanks Dunsel, i'd really appreciate it if you could make that javascript for me. having the table rows highlighted is really important.
(oi)
     
Chris O'Brien
Grizzled Veteran
Join Date: Nov 2003
Location: Hebburn, UK
Status: Offline
Reply With Quote
Mar 22, 2004, 05:26 PM
 
Akarso, I got bored and so thought I'd whip up a quick version for you:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Tables</title> <style> table {font: 11px verdana} tr {background-color: lightblue; cursor: pointer; cursor: hand} tr:hover {background-color: blue} </style> <script> function stripe() { var tab = document.getElementsByTagName("table"); for (var i=0; i < tab.length; i++) { var tr = tab[i].getElementsByTagName("tr"); for (var a=0; a < tr.length; a++) { if (a%2 == 0) tr[a].style.backgroundColor = "dodgerblue"; //now attach event handlers: if (document.addEventListener) { tr[a].addEventListener("mouseover", rollOver, true); tr[a].addEventListener("mouseout", rollOver, true); } else { tr[a].attachEvent("onmouseover", rollOver); tr[a].attachEvent("onmouseout", rollOver); } } } } var old_colour = null; function rollOver(e) { e = (document.addEventListener) ? e.target.parentNode : event.srcElement.parentElement; if (old_colour == null) { old_colour = e.style.backgroundColor; e.style.backgroundColor = "blue"; } else { e.style.backgroundColor = old_colour; old_colour = null; } } </script> </head> <body onload="stripe()"> <table summary="This is table one"> <caption>This is table one</caption> <thead> <tr> <th>First Column</th> <th>Second Column</th> <th>Third Column</th> </tr> </thead> <tbody> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> </tbody> </table> <table summary="This is table two"> <caption>This is table two</caption> <thead> <tr> <th>First Column</th> <th>Second Column</th> <th>Third Column</th> </tr> </thead> <tbody> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> <tr> <td>Blah</td> <td>Blah</td> <td>Blah</td> </tr> </tbody> </table> </body> </html>
I should note it took two minutes, and i haven't tested it in internet explorer (although you'll note I've written in for IE support). One problem is that it stripes the header of the table, and allows the mouseover effect to work on it too - that can be ammended.

Also, you'll notice in the CSS at the top that I put in the hover effect - it sadly doesn't work when an element has a background colour defined in a style tag for some reason (as the stripe() function does), hence the need for the function. Oh, and IE won't handle :hover for arbitrary elements, so you'd need to use javascript for that anyway.

Hope that helps. This is just one way of doing it, mind. There are, as always, other ways to get the effect you want.
Just who are Britain? What do they? Who is them? And why?

Formerly Black Book
     
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Mar 22, 2004, 09:49 PM
 
Interloper!!! j/k. I was absurdly busy at work. Never got back to this.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Akarso  (op)
Junior Member
Join Date: Nov 2001
Location: California
Status: Offline
Reply With Quote
Mar 23, 2004, 02:36 PM
 
Originally posted by Black Book:
I should note it took two minutes, and i haven't tested it in internet explorer (although you'll note I've written in for IE support). One problem is that it stripes the header of the table, and allows the mouseover effect to work on it too - that can be ammended.

Also, you'll notice in the CSS at the top that I put in the hover effect - it sadly doesn't work when an element has a background colour defined in a style tag for some reason (as the stripe() function does), hence the need for the function. Oh, and IE won't handle :hover for arbitrary elements, so you'd need to use javascript for that anyway.

Hope that helps. This is just one way of doing it, mind. There are, as always, other ways to get the effect you want.
Thanks Black Book! The code works fine with IE6. But i was wondering, can you make it so that the header doesn't have the mouseover effect (if it's possible)? Otherwise, this code is good enough for me and i really appreciate you taking the time to help out.
(oi)
     
Chris O'Brien
Grizzled Veteran
Join Date: Nov 2003
Location: Hebburn, UK
Status: Offline
Reply With Quote
Mar 23, 2004, 03:13 PM
 
To make the header not have a stripe, just start the variable a counting from 1 instead of 0 in the second for loop (assuming you only have one row in the header, and every table has a header). That way there is no striping done and no event listeners attached. Easy

Although, you'll have to take out the tr:hover bit in the CSS, because it will still apply to it... but since it's irrelevant code anyway due to the javascript, it isn't a worry.
Just who are Britain? What do they? Who is them? And why?

Formerly Black Book
     
Akarso  (op)
Junior Member
Join Date: Nov 2001
Location: California
Status: Offline
Reply With Quote
Mar 23, 2004, 03:36 PM
 
Originally posted by Black Book:
To make the header not have a stripe, just start the variable a counting from 1 instead of 0 in the second for loop (assuming you only have one row in the header, and every table has a header). That way there is no striping done and no event listeners attached. Easy

Although, you'll have to take out the tr:hover bit in the CSS, because it will still apply to it... but since it's irrelevant code anyway due to the javascript, it isn't a worry.
Thanks again for your help.
(oi)
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 10:34 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,