Since I often see review sites that use tables and graphs to display categorical analysis on products/services, it appears that tables are a great way to display data to users in a way that’s simple to read and makes things a lot quicker than writing a bunch of content that many won’t take time to read unless it’s in bullet points, headlines, or divided inside a table. This landing page is the first one that I’ve put a table into the markup. Here is how I have marked up this table so far:
<div class="floatLeft">
<img src="firstdateswedenreview2.jpg" title="Meeting a Potential Mate" alt="An interview over dinner and getting to know your potential lover." width="400" height="289"/>
<p class="articletext">Check out this categorical review that summarizes what you can expect at this online dating site.</p>
<table>
<tr>
<td>Number of Profiles</td>
<td class="bold" class="green">2,000,000+</td>
</tr>
<tr>
<td>Maximum Number of Picture Uploads</td>
<td class="bold" class="green">24</td>
</tr>
<tr>
<td>Chat Feature</td>
<td class="bold" class="green">Fully Categorized Chat Rooms</td>
</tr>
<tr>
<td>Response Rate from Members</td>
<td class="bold" class="orange">3.4 ⁄ 5</td>
</tr>
<tr>
<td>Webcam Functionality?</td>
<td class="bold" class="orange">Gold Profiles Only</td>
</tr>
</table>
</div>
What I want to do is to change the color of the 2nd column in the table. I’m missing something very basic as I doubt you can add more than one class to an element. I tried doing a class of bold and an i.d. for the color, but that still hasn’t done what I want it to do.
I also need to keep in mind the size of the table as my responsive design adapts to different viewport sizes, but that may already be just fine.
Would also like to get a recommendation on what I should do if I want to display a bar graph or meter as I review these products and would like to indicate how good something is in a particular category.
I’m not sure what you want to do with the graphs. But, a little research might help.
Right-click on their web page.
Select View Page Source to see the HTML. It’s a long file.
It appears to call 2 CSS files and a zillion JavaScripts. Didn’t try to figure out where the JavaScripts get their data.
In the HTML, we see that the top half of the page is an extensive table.
I did not look to see how/where the graphs are constructed (it all looks like ordinary HTML and inline CSS from here), but because some heights have decimal values for the pixels, at least the heights must be calculated by a script from some data source.
Yes, you would have to come up with some new background images.
Yes, I read the HTML. I imagine that the inline styles are being written by JavaScipt or maybe the whole table section is a PHP call. I am not knowledgeable enough to guess where the data comes from. I do not believe those values are fixed; they looked like they are dynamically updated in some way… I didn’t linger long enough to figure out if that is true. I’m afraid that level of web design is over my head.
I can help you construct a simplified non-dynamic version in which the values are stored inline or in CSS. Anything more elaborate than that is beyond my ken. What is your goal?
My goal is to display a bar graph. I have no interest in doing it as elaborately as the cited example has it, but a much simplified version would likely accomplish the objective.
The example site has 10 cells, each cell containins 4 vertical graphs, the products are arranged in descending order according to the rating of the product. Above each cell is a number that represents the rated value of the product.
The choice of colors in the graphs of the example site makes them difficult to identify for those who have color perception problems (that’s more than 10% of the general population).
How many graphs per cell do you want? What qualities are to be compared? How many cells do you want in your table (how many products are to be compared)? Overall design prefs (look and feel)?
What do you want the graphical presentation to look like?
Can you code a design on a standalone example page? That’s how I would start.
Well, I have now uploaded new stuff to my page. You’ll see a bar graph example that I made out of a .gif file. Obviously, the page that I linked is way too complex, and most visitors don’t really take much info in from that.
You will see on my page that what I want to do with the bars is just use one here or there. Nothing complex. The categories will vary depending on what it is that I’m reviewing. Really, those images are so small in size that it may just make more sense to just use image files. The bar graphs won’t be used on every category of the product/service I’ve reviewed. If the review is bad, then the bar will appear more red. If the review is positive, the bar’s color approaches vivid green. It would be cool to see what I can do to eliminate having to use dozens and dozens of images and put it together through HTML/CSS entirely.
Looking at the current page, I think you’ve chosen a smart idea by making the .png. The “segmented” LED look seems cool, the image resizes as needed and it is easy to code. The graph can be done quite easily using CSS alone, but it would not resize in its container the way the foreground image does. On the other hand (perception speaking), at first glance, I wasn’t sure what it was… took a moment to realize it was a graph. Perhaps it needs more “context” to make it’s message obvious. I’m not artistically creative enough to suggest something, though .
When you settle on a design, we can help make it happen, if needed; but I recommend giving the design a bit more forethought.
Yes, ronpat, I did need to do some more brainstorming on the design.
I’ve formulated a strategy, but as far as the coding for the table goes, I’ve got a long way to go. Check the updated test page for a visual on what I’m talking about.
I was inspired to create something similar to the tutorial I read here.
I created a bar image that has a gradient on it, which starts red and becomes green. That way the bar does not have to have its color changed (I like the idea of indicating how good something is by color). How far along the bar reaches on the meter will determine its color on the end.
The bar.gif image will receive its width through inline styles that I’ll use to simply change its width.
On top of the table cell that contains the bar image, I want to add columns that are numbered 1-10 (for the measurement of how good something is- the integral).
In the above-linked tutorial, they used a 2nd image for the integral measurements. I don’t believe this will put me in a good position as far as how responsive the graph size is to different-sized browser windows, so it may be better to just go with doing the columns inside the one cell like I described in the previous point.
That’s basically my idea that I’m going to roll with.
Here are a couple of hang-ups:
The columns are being placed on the top-leftmost corner of the table.
If I use an image inside the table, the image takes on the border assigned to the .floatLeft and .floatRight images [i]unless[/i] I assign a class to the image. Weird.
I’ll respond with a couple of suggestions in a while. I have a couple of things begging my attention at the moment. The graph still seems uninspirational. Will talk about floats and things then. Sorry to put you on hold, but…
None of the tutorials really get down to what I’m trying to accomplish, since they are a bit straightforward and not situational specific… I want to make these little meter graphs happen inside the table.
In order to get the rating dividers 1-10, I added in ten divs with a new class, .ratingticks. They are numbered 1 to 10 successively.
“Overall<br>Rating” in cell1, the rating markers in cell2, and the overall rating number in cell3. No borders around the cells; just a border around the table.
Give that a try and see what that looks like.
I haven’t tried it, but it seems like it would extend the width of the graph to a more eye-catching and meaningful length and height.
Instead of the background image for the graph bar, apply a background-color to the rating markers. I’m not sure how to limit the horizontal length just yet.
Like I said, just a thought.
I don’t have a very good track record for extemporaneous creativity and untested suggestions, so take this with a grain of salt.
That seems like an idea that might be doable, but I can’t seem to get the two (three?) tables to sit right beside each other with floats or various display properties. I guess table layout is first, then the next obstacle is the one cell in particular that has a bar meter in it (getting the 1-10 dividers to show up with the image as well.).
I was thinking of two tables, the one with maybe 3 cells (including the graph) sitting atop the one with 2 columns. No floats. I’m still not convinced it’s a good idea, though.
