Call for Help - Tables
Submitted by Steve on 27 March, 2007 - 10:47.
This is a call for help. Hey, that would make for a good name of a TV show.
If there are any HTML/CSS guru's out there I'd really appreciate some advice on how to set up a table, position it left or right of the page AND have the body of my article (text) flow around it, either to the left or right depending upon where the table is positioned.
An example table, which appears in the bulk of my posts usually at the end, is here:-
| This Week |
11.50
|
| This Month |
175.05
|
| This Year |
545.70
|
So with this table, I would like text (this paragraph) to flow around it to the right.
Ultimately, what I want to do is position this table in the top left position of the page and have the body of my article directly to the right flowing around it.
The definition for the above table is this:-
<table cellspacing="2" cellpadding="2" width="180" border="1">
<caption><i><u>Stats as of 26 Mar 2007</u></i></caption>
<tbody>
<tr>
<td>This Week </td>
<td>
<div align="right">11.50</div></td></tr>
<tr>
<td>This Month</td>
<td>
<div align="right">175.05</div></td></tr>
<tr>
<td>This Year </td>
<td>
<div align="right">545.70</div></td></tr></tbody></table>Anyway, any clues please.
- Steve's blog
- Add new comment
- 3065 reads
- Email this page
<div> tags
I tried that, enclosing the table definition within the 'div' tags and it correctly positions the table left or right but there was still white space either side of the table. The text commencing at the bottom of the table rather than at the top and to the side.
Thanks Craig.
adding this to your CSS will
adding this to your CSS will do the trick:
table {float:left;padding:5px; }
the padding is just for space.
however, this will affect all your tables in this way. if that's not an issue, it's a solution.
I'll try it
Thanks Craig, I'll give that a try later. Can't fiddle with it at the moment as I'm at work.
re: adding this to your CSS will
float definitely does what you want it to and prettily too, if used in conjunction with padding/margin, like Craig's suggested. you could give your table a class, or just use inline styles as an alternative to applying those attributes to ALL tables.
I'll try again
Thanks Raelene, I'll try again.
Floating
Float is the key I think.
Stick this in your style sheet or in the head section
.tableleft {background-color: #00FF00;
float: left;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px"
}
Then put the class in the table code:
<table width="180" border="1" cellpadding="2" cellspacing="2" class="tableleft">Angela, I took the liberty of inserting some 'code' tags - better display your comment
Another idea
I'm no HTML expert, but if the above two ideas don't work, what about using a table to do it all. That is add a third column to the table to contain the text, and merge the cells together in that column, then format that column to remove the borders. Would that work ?
Probably not
It is certainly a work-around but the problem would be, as I see it, is that the text wouldn't merge back to the left at the bottom of the table.
Going around in circles
I just can't seem to get this thing working. I'll have to hit the books, study up a little bit. What's frustrating is that it's suppose to be a simple process and yet it's not. I'm obviously missing the point somewhere.
Just posted the question over to here http://groups.drupal.org/node/3358 (the big guns)
Sorry
Sorry but you lost me after you said "a call for help".
You taught me everything I know about html and any advice from me to 'The Master' would be pointless :-)
Frustrated progress
As I've mentioned previously, I'm going around in circles or nothing's happening. Doesn't matter what changes I make to the bloody CSS file, so called simple changes in other areas, just to witness that something does change, doesn't work.
I've got this far and the following is the Table definition followed by the actual output display:-
<table cellspacing="2" cellpadding="2" width="180" border="1" align="left" valign="top" ><caption><i><u>Stats as of 29 Mar 2007</u></i></caption>
<tbody>
and so on...
I've included align="left" and valign="top". As you can see from the output the text is correctly flowing down the right of the table but flush with the table. I would prefer a bit of space.
Anyway, that's where I'm at with this little problem at the moment.
CSS
Try http://www.getfirebug.com/ to speed up the testing on your CSS tweaks, it has a function where you can make changes right in firefox and see the results immediately, then copy your results back into your original CSS. You should be rolling in no time!
Good tip
Thanks, sounds like a good tip. I'll check it out later when at home. Can't check it at the moment as I'm at work.
I've also noticed that my last comment when using Firefox the table is correctly displayed or output. Checking now, using IE at work, the table isn't displayed. I'm wondering, which is the non-standard IE or Firefox.
It's usually IE
Because it is, basically, a steaming pile.
If you are ever unsure as to what's happening in your CSS, any changes should be:
a) at the bottom of your css file
b) mark them as !important (eg p { margin: 4px !important; color: red !important; })
Then, once you're happy with that, go and see what's occurring earlier or elsewhere in your CSS. if you make those changes earlier, something else might be interfering with it later.
Alternately, try adding inline styles to the table. It's dirty but it works.
actually that's better here
I twittered this but here it may as well stay for posterity --
Any other CSS file is normally related to a plugin.
Thanks
Thanks for that. I've been stuffing around with the Styles.css adding to an existing Table bit that is there already.
I'll try what you suggested add stuff at the bottom and see what happens.
Little bit of progress
Making some progress. Using the Webdeveloper tool for Firefox I can dynamically enter this code:-
.tableleft {background-color: #00FF00;
float: left;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px"
}
When opening the sytle.css file in my editor, adding the above code, saving it and re-running the page, the effects don't take effect and WebDeveloper doesn't show the effects either. I'm at a loss as to which file WebDeveloper is showing.
Cache issue
Finally worked it out. I was saving the css file correctly. The browser was using the cached version. So clearing out the cache and presto, it worked. Now there's just a couple of other little formatting things to work out and hopefully in a few days or so this will be history.
Bookmarks
How I add this article to Netscape social networking?
Netscape Social Networking
Not exactly sure what you mean by this. I'm not familar with Netscape Scoical Networking.