Fri, 2010-12-17 01:57
Hi, all –
So, I need to add a small table to a page. I want it to look something like this (only better!):
I notice that the description of this forum hints that HTML tables aren't the best way to do this. Fine by me; I always found tables a hassle anyway. So, what do we use instead?
Thanks...
Fri, 2010-12-17 02:10
#1
That's a table. Use a table.
That's a table. Use a table. </thread>
What do the numbers mean?
Fri, 2010-12-17 02:25
#2
OK, I'll use a table. I'm
OK, I'll use a table. I'm currently having trouble getting the row widths the way I want them. I guess I'll play with it a bit more.
The numbers are the size of groups (measured in inches) of 10 shots fired at 50 yards. The table is going to show four kinds of ammunition, fired out of four configurations of the Ruger 10/22 rifle.
Fri, 2010-12-17 03:14
#3
mzimmers wrote: ... The
... The numbers are the size of groups (measured in inches) of 10 shots fired at 50 yards. The table is going to show four kinds of ammunition, fired out of four configurations of the Ruger 10/22 rifle.
Interesting. What are the slashed values ("1.49/.99" and ".89/.58")?
Fri, 2010-12-17 03:37
#4
Verschwindende
Interesting. What are the slashed values ("1.49/.99" and ".89/.58")?
Oh...in target shooting, there is the concept of a "flyer." A flyer is when you know that you did something to contribute to a poor shot (in this instance, you don't fault the ammunition). In my case, I was using a gun with a really light trigger, which I'm not used to, and pulled a bit prematurely.
In competition, flyers count just like anything else, but for analytical purposes, it's common to "forgive" a flyer in one;s measurements. The slashed values represent my group counting/not counting a flyer.
Anyway, my table sucks. I can't get the widths the way I want them. Is it not appropriate to assign widths to specific data elements? Also, can you have a table with differing numbers of columns from row to row? I'll play with it a bit more, then post source code.
Fri, 2010-12-17 03:50
#5
mzimmers wrote: ... Oh...in
... Oh...in target shooting, there is the concept of a "flyer." ...
Ah, yes. I'm a shooter myself but I've never discounted the fliers. (I just pretend to accidentally drop that target in the trash. 
). I can see how it would be useful to discount them for analysis.
... Anyway, my table sucks. I can't get the widths the way I want them. Is it not appropriate to assign widths to specific data elements? Also, can you have a table with differing numbers of columns from row to row? I'll play with it a bit more, then post source code.
Post it and I'll help you clean it up.
Fri, 2010-12-17 04:09
#6
Here's the code for the
Here's the code for the table. I'd like to be able to play with the column widths a bit for better presentation. I'm limited to about 500 pixels horizontally.
Thanks for looking.
<table width="500" border="1" cellspacing="2" cellpadding="4"> <tr><td width="200"></td><td width="250"><strong>Ammunition</strong></td></tr> <tr><td><strong>Configuration</strong></td><td>CCI Mini Mag</td><td>Winchester T22</td><td>RWS Target Rifle</td><td>RWS R-50</td></tr> <tr><td>Carbine/OEM</td><td>1.62</td><td>2.43</td><td>1.22</td><td>0.96</td></tr> <tr><td>Carbine w/ KID trigger</td><td>3.75</td><td>3.06</td><td>0.72</td><td>0.92</td></tr> <tr><td>Full Custom</td><td>1.55</td><td>1.49/0.99</td><td>0.97</td><td>0.89/0.58</td></tr> <tr><td>Target</td><td>2.85</td><td>1.75</td><td>1.40</td><td>0.81</td></tr> </table>
Fri, 2010-12-17 04:47
#7
Try something like this:
Try something like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Ammo Table</title> <style type="text/css"> table { width: 500px; border: 1px solid #000; background: #aaa; padding: 10px; font-size: .7em; } td { color: #000; background: #fff; border: 1px solid #000; padding: 3px; text-align: right; } th { color: #000; background: #fff; border: 1px solid #000; padding: 1px; } .head td, .head th { color: #000; background: #fd0; } thead th { color: #fff; background: #555; padding: 4px; } tfoot td { background: #fd0; text-align: center; } </style> </head> <body> <table> <caption>Describe table here</caption> <thead> <tr class="head"> <th>Configuration</th> <th colspan="4">Ammunition</th> </tr> <tr> <th></th> <th>CCI Mini Mag</th> <th>Winchester T22</th> <th>RWS Target Rifle</th> <th>RWS R-50</th> </tr> </thead> <tfoot> <tr> <td colspan="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a neque lorem, euismod semper sem. Morbi diam orci, accumsan vel tempor eu, rhoncus ut enim. Aenean feugiat porttitor faucibus. In sed dolor id dui facilisis condimentum a at tellus. Sed ultrices luctus tellus, et mattis nulla pulvinar ac. Nam convallis egestas sollicitudin. Phasellus nunc enim, molestie et pharetra eget, malesuada vitae augue.</td> </tr> </tfoot> <tr> <th scope="row">Carbine/OEM</th> <td>1.62</td> <td>2.43</td> <td>1.22</td> <td>0.96</td> </tr> <tr> <th scope="row">Carbine w/ KID trigger</th> <td>3.75</td> <td>3.06</td> <td>0.72</td> <td>0.92</td> </tr> <tr> <th scope="row">Full Custom</th> <td>1.55</td> <td>1.49/0.99</td> <td>0.97</td> <td>0.89/0.58</td> </tr> <tr> <th scope="row">Target</th> <td>2.85</td> <td>1.75</td> <td>1.40</td> <td>0.81</td> </tr> </table> </body> </html>
Fri, 2010-12-17 06:25
#8
Wow...that's impressive. I
Wow...that's impressive. I assume that I can create a style name for this formatting, and apply it to this table, so that the other tables on my site don't inherit this?
I'll take a closer look at this in the AM and come back with some more questions.
Thanks again...
Fri, 2010-12-17 08:02
#9
Give the table an id, e.g.
Give the table an id, e.g. "groups". You can then have each selector descend from #groups. Using V's stylesheet:
table#groups { width: 500px; border: 1px solid #000; background: #aaa; padding: 10px; font-size: .7em; } #groups td { color: #000; background: #fff; border: 1px solid #000; padding: 3px; text-align: right; } #groups th { color: #000; background: #fff; border: 1px solid #000; padding: 1px; } #groups .head td, #groups .head th { color: #000; background: #fd0; } #groups thead th { color: #fff; background: #555; padding: 4px; } #groups tfoot td { background: #fd0; text-align: center; }
cheers,
gary
Fri, 2010-12-17 16:08
#10
Thanks, Gary. I get the part
Thanks, Gary. I get the part about creating an id in my css file. As far as applying it, though, wouldn't it be easier to put a <div id="group"> around the HTML for the table?
Fri, 2010-12-17 16:26
#11
mzimmers wrote: Thanks, Gary.
Thanks, Gary. I get the part about creating an id in my css file. As far as applying it, though, wouldn't it be easier to put a <div id="group"> around the HTML for the table?
There's no real point to the extra DIV. I'd leave it out and add the ID to the TABLE.
Fri, 2010-12-17 16:37
#12
Another question: If I want
Another question:
If I want the data columns (the four to the right) to be of the same width, how would I go about that?
Fri, 2010-12-17 17:10
#13
I guess try something like
I guess try something like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Ammo Table</title> <style type="text/css"> table#groups { width: 500px; border: 1px solid #000; background: #aaa; padding: 10px; font-size: .7em; } #groups td { color: #000; background: #fff; border: 1px solid #000; padding: 3px; text-align: right; } #groups th { color: #000; background: #fff; border: 1px solid #000; padding: 1px; } #groups .head td, #groups .head th { color: #000; background: #fd0; } #groups thead th { color: #fff; background: #555; padding: 4px; } #groups tfoot td { background: #fd0; text-align: center; } #groups .fixWidth { width: 18%; } </style> </head> <body> <table id="groups"> <caption>Describe table here</caption> <colgroup> <col /> <col class="fixWidth" /> <col class="fixWidth" /> <col class="fixWidth" /> <col class="fixWidth" /> </colgroup> <thead> <tr class="head"> <th>Configuration</th> <th colspan="4">Ammunition</th> </tr> <tr> <th></th> <th>CCI Mini Mag</th> <th>Winchester T22</th> <th>RWS Target Rifle</th> <th>RWS R-50</th> </tr> </thead> <tfoot> <tr> <td colspan="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a neque lorem, euismod semper sem. Morbi diam orci, accumsan vel tempor eu, rhoncus ut enim. Aenean feugiat porttitor faucibus. In sed dolor id dui facilisis condimentum a at tellus. Sed ultrices luctus tellus, et mattis nulla pulvinar ac. Nam convallis egestas sollicitudin. Phasellus nunc enim, molestie et pharetra eget, malesuada vitae augue.</td> </tr> </tfoot> <tr> <th scope="row">Carbine/OEM</th> <td>1.62</td> <td>2.43</td> <td>1.22</td> <td>0.96</td> </tr> <tr> <th scope="row">Carbine w/ KID trigger</th> <td>3.75</td> <td>3.06</td> <td>0.72</td> <td>0.92</td> </tr> <tr> <th scope="row">Full Custom</th> <td>1.55</td> <td>1.49/0.99</td> <td>0.97</td> <td>0.89/0.58</td> </tr> <tr> <th scope="row">Target</th> <td>2.85</td> <td>1.75</td> <td>1.40</td> <td>0.81</td> </tr> </table> </body> </html>
Table cell widths behave according to content and will expand if necessary no matter if you specify a width or not. In fact the entire table will respond if necessary. Don't try to be too draconian. 
Fri, 2010-12-17 17:06
#14
Verschwindende
Thanks, Gary. I get the part about creating an id in my css file. As far as applying it, though, wouldn't it be easier to put a <div id="group"> around the HTML for the table?
There's no real point to the extra DIV. I'd leave it out and add the ID to the TABLE.
Well, the point is, I only have to do it once, right? With Gary's approach there seem to be several #group tags throughout the example. No?
Fri, 2010-12-17 17:14
#15
mzimmers wrote:Well, the
Well, the point is, I only have to do it once, right? With Gary's approach there seem to be several #group tags throughout the example. No?
Only once in the markup and same amount of times in the styling no matter which choice you make. Using the ID in the TABLE is less markup and uses no extraneous DIVs.
I've updated the last example with Gary's ID addition. Does that clear up your misconception on the topic?
Fri, 2010-12-17 19:57
#16
The point, Michael, is that
The point, Michael, is that if you want only the elements of a certain table to have certain property values, you must be specific. The cascade allows you to define a context, i.e. #groups, rather than needing to give each and every element an ID.
cheers,
gary
Fri, 2010-12-17 22:26
#17
Verschwindende wrote: I guess
I guess try something like this:
(code deleted for brevity)
Table cell widths behave according to content and will expand if necessary no matter if you specify a width or not. In fact the entire table will respond if necessary. Don't try to be too draconian.
Oh, now that is slick. And I hear you about not trying to be too strict on widths. I just think it looks a little more organized if the data columns are similar.
Fri, 2010-12-17 22:27
#18
gary.turner wrote: The point,
The point, Michael, is that if you want only the elements of a certain table to have certain property values, you must be specific. The cascade allows you to define a context, i.e. #groups, rather than needing to give each and every element an ID.
cheers,
gary
OK...I will have to look at this a bit later. I want to understand why this is better than a single div statement around my table.
Thanks for the help, guys.
Fri, 2010-12-17 22:36
#19
mzimmers wrote:... I want to
... I want to understand why this is better than a single div statement around my table.
Well, it's less code and it's more semantic.
Why would you think this:
<div id="groups"> <table> ... exact same code as below ... </table> </div>
is better than this:
<table id="groups"> ... exact same code as above ... </table>
The extra DIV has no purpose at all. TABLE is a container in and of itself.
Fri, 2010-12-17 23:19
#20
OK, the example in post #13
OK, the example in post #13 makes it clearer. I get it now.
The only difference is, I used a class instead of an id in my stylesheet.
I think we can consider this resolved. Thanks to both of you for all the help.
Fri, 2010-12-17 23:23
#21
mzimmers wrote: ... The only
... The only difference is, I used a class instead of an id in my stylesheet. ...
That's probably a good idea since you may have more than one table styled like that on a page.
Sat, 2010-12-18 23:34
#22
Actually, I do have another
Actually, I do have another question, though it may be beyond the scope of this forum.
I have scans of all of the targets that comprise the data in the table. It would be very cool if a mouse-over caused the target image to pop up, a la lightbox. Any ideas?
Thanks.
Sun, 2010-12-19 00:02
#23
You could try
You could try this
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
Sun, 2010-12-19 04:22
#24
Interesting approach. Lots of
Interesting approach. Lots of (repetitive) coding, which I don't mind, but...I can't get it to work for me. Nothing shows up in the cell, not even the text. Maybe it doesn't like to work inside tables...
I'll play with it some more in the morning and see if I can figure it out.
Sun, 2010-12-19 04:33
#25
Why not just use a nice
Why not just use a nice jQuery lightbox clone?
Sun, 2010-12-19 04:51
#26
For something like images
For something like images illustrating table data, I'd rather have a click trigger the image rather than a mouse over. That would require a javascript solution. If implemented properly, the function would still work, if not as elegantly, with javascript disabled.
See Swapping images.
cheers,
gary
Sun, 2010-12-19 07:23
#27
Aargh...this is starting to
Aargh...this is starting to sound too complicated for a newbie blogger like me. I'm trying to do this in my WP site, so my options are somewhat limited. And, I don't know JavaScript.
I'll take a fresh look at it in the morning. Thanks for the suggestions.
Sun, 2010-12-19 13:39
#28
mzimmers wrote: Aargh...this
Aargh...this is starting to sound too complicated for a newbie blogger like me. ...
To be honest it sounds a bit unnecessary as well. Just make the group sizes a link to the target photos.
Sun, 2010-12-19 16:02
#29
Verschwindende wrote: To be
To be honest it sounds a bit unnecessary as well. Just make the group sizes a link to the target photos.
Yeah, that's the fallback position. I guess I could open the photos in a new window, too, so the user doesn't have to navigate back to the main page. A lightbox-style approach would have been slick, but perhaps it's more trouble than it's worth.
Sun, 2010-12-19 16:27
#30
mzimmers wrote: ... I guess I
... I guess I could open the photos in a new window, too, so the user doesn't have to navigate back to the main page. ...
No!!!!! NOOOO!!!! Don't make my browser open extra windows or tabs. Seriously, if I want a link to open in a new window I'll right click or I'll Ctrl-click. Don't force that behavior on me.
Thanks for accepting my rant.
Sun, 2010-12-19 16:52
#31
Verschwindende wrote: No!!!!!
No!!!!! NOOOO!!!! Don't make my browser open extra windows or tabs. Seriously, if I want a link to open in a new window I'll right click or I'll Ctrl-click. Don't force that behavior on me.
Thanks for accepting my rant.
Well, then...it sounds like I'm back to the lightbox approach. I think I'm going to experiment with putting thumbnails into the table, too...that would at least make the lightbox treatment a little more "normal." If I do this, though, I'll have alternating rows of thumbnails and text denoting group sizes. What's the simplest way to make the border between these single instead of double?
Sun, 2010-12-19 17:02
#32
mzimmers wrote: ... What's
... What's the simplest way to make the border between these single instead of double?
I'm not sure what you're asking. Do you want to collapse borders? If so add border-collapse:collapse; to table#groups.
Sun, 2010-12-19 17:07
#33
Verschwindende
... What's the simplest way to make the border between these single instead of double?
I'm not sure what you're asking. Do you want to collapse borders? If so add border-collapse:collapse; to table#groups.
I mean that I'd like the border between thumbnail and caption to be less prominent than the other borders. It should make the chart a bit easier to look at.
Sun, 2010-12-19 22:56
#34
OK, we can scrap that idea...
...the body of my site only gives me room for thumbnails about 75 pixels wide (if they're 4 across plus the title column). At that size, they're virtually useless, plus they add some complexity to the coding.
I'd still like to do the lightbox idea, but I can table that (heh) for a while. Now, my question is, can I make the entire cell part of the link, rather than just the numerical data contained in the cell?
Thanks.
Sun, 2010-12-19 23:48
#35
Maybe try something like
Maybe try something like table.groups td a { display: block; height: 100%; width: 100%; }
Mon, 2010-12-20 04:51
#36
Verschwindende wrote: Maybe
Maybe try something like table.groups td a { display: block; height: 100%; width: 100%; }
Damn, you're good.