Help with table formatting
Hello, I could relaly use your help. I'm learning as I go on CSS, switching from old habits of all kinds of attributes to set things.
Well I have come pretty close on what I want with using CSS, however, if I change my table to be a width of 100%, things go goofy. Please see http://www.wtvgames.com/tables/ for an example.
The top table is how I like it. THe one below it is stretched 100% wide. Notice the gaps between the colums stretches as well. I can't just set up this gap with cellspacing, as there are places where I need no space (see bottom set of tables with border turned on).
Any help in this matter, and any suggestions in better setting up my CSS would be GREATLY appriciated. I'm leaving the tables at their natural width, however with 10 different ones on my site, I'd prefer them all the same width to be more uniform looking on the site.
I know I'm still using an image to size the gaps between the data rows/columns, but wasn't sure the best, most "standard" css way to do it.
Thanks in advance for your help.
-Greg
PS. The blank colum on the left is normally an EDIT icon to edit the row, however this this is a category table, so no icons are there.
Busy posted this at 10:34 — 3rd February 2005.
He has: 6,151 posts
Joined: May 2001
With tables its best to 'size' the cells to desired width, even if you need to put width="100%" in a td cell.
Another way (and there are several) is to nest the content table in a fixed sized table, this way the nested table wont (shouldn't) exceed the main tables width.
My belief for data tables (such as your example) should be fixed width. while the big table (width 100%) looks ok at 800x600, on a screen size twice or three times as big things can be really spread out.
Since your learning CSS try make what you have without tables, a good challenge for you
JeevesBond posted this at 13:22 — 3rd February 2005.
He has: 3,956 posts
Joined: Jun 2002
Yes you're learning the technical way that css works - and you may not like what I'm about to say, but it has relevance to your problem - but there are some fundamentals missing from the way you're trying to code.
1. No DOCTYPE - not detrimental, but a browser does make some decisions based upon this and it's needed for using the W3C validator.
2. Your css is suffering from an attack of the classes! It is all too tempting to define everything by classes, and to only take half-measures when learning css.
3. Not using consistent semantic markup. You're not utilising the strengths of (X)HTML to provide 'hooks' for your css, hence the need for many classes. For example: There is no or tags that could be used as hooks.
4. Using the 'tree' model of (X)HTML allows you to add a class or id hook to an element high up the tree and then use css to change its child elements, I'll clarify with an example:
<table id="testtable"><thead>
<tr>
<td>...</td>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Then you can use css selectors to format the table - for example:
#testtable thead td {...
}
#testtable tbody td {
...
}
This is far easier to understand, you can group all these selectors together and see a clear formatting path for every element, rather than having multiple ambiguous classes that could apply to anthing.
Overall: This will cut-down your (X)HTML and CSS code substantially, making it a lot easier to debug, provide more hooks, whilst making the code semantic that will make the code easier to read and portable across pages without having to create yet-more classes.
I know this isn't the answer you wanted, but it'll be a lot easier for all of us to read the code and provide answers to your questions if you do this!
Also, if you - or anyone - spot any errors in what is written please correct me, this was all written from memory!
a Padded Cell our articles site!
JeevesBond posted this at 13:24 — 3rd February 2005.
He has: 3,956 posts
Joined: Jun 2002
Sorry to double-post, but...
I should note that I could/should have used tags in the element, if you do it just provides even mor hooks to play with, and that's what you need when using css.
a Padded Cell our articles site!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.