CSS for Dynamic Data Table Presentation


	CSS for Dynamic Data Table Presentation

BigBadWolf

4-29-2007 9:42 AM

3078 views

tags:

css, web, tables, html

BigBadWolf says:

Very cool way to use CSS to control table appearance.

Add a Comment

Login to Comment. Not a member yet? Sign up

Today's Top Clips

visit the Top Clips page

View the Top Clips from April 29, 2007

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/4b922502-1dcc-47e2-9c4b-527e98e2b9ea/0DB1CDBE-FFA7-4756-85D3-87474C8DDB28/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.expertsrt.com/tutorials/Cd/dynamic-table-presentation.html" href="http://www.expertsrt.com/tutorials/Cd/dynamic-table-presentation.html" style="font-size: 11px;">www.expertsrt.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.expertsrt.com/tutorials/Cd/dynamic-table-presentation.html"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.expertsrt.com/img/62231FF1-1125-4562-B120-51B794A382A9" alt="experts round table" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.expertsrt.com/tutorials/Cd/dynamic-table-presentation.html"><H1 id="ertTitle">CSS for Dynamic Data Table Presentation</H1></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.expertsrt.com/tutorials/Cd/dynamic-table-presentation.html"><P id="ertSubtitle">A tutorial by COBOLdinosaur</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.expertsrt.com/tutorials/Cd/dynamic-table-presentation.html"><P>
The table is the most misused and abused tag in HTML.  Tables are not intended to be used for layout.  They are specified the way they are for optimization for <B>data table presentation</B>.  They do not have to be boring grids. Using <B>CSS for Dynamic effects</B> is a powerful and elegant tool for the developer.
</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.expertsrt.com/tutorials/Cd/dynamic-table-presentation.html"><P>
CSS, Scripting and the methods available in the DOM, give the developer almost unlimited flexibility, and the opportunity to enhance the user experience.  Consider this.  Not all users have the same taste in color selection.  Let's start by offering some simple options.  A table with alternating row colors is simple. A couple of CSS declarations:</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.expertsrt.com/tutorials/Cd/dynamic-table-presentation.html"><TEXTAREA rows="5" cols="60">&lt;style type="text/CSS"&gt;
   .evenrow {background-color:red;color:white;}
   .oddrow {background-color:white;color:red;}
&lt;/style&gt;
</TEXTAREA></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/0DB1CDBE-FFA7-4756-85D3-87474C8DDB28/blog/" title="blog or email this clip"><img src="http://content7.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>

New from the makers of Clipmarks: Amplify.com - Don't just share the news...Amplify it!

Clipmarks: Home; New Clips; Top Clips; Dashboard

Popular Topics: News; Life; Science; Technology; Entertainment

Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch

Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map

About Clipmarks: About Us; Contact; Copyright; Privacy; EULA

Search Options

Today's Top Clips