CSS2 Table Formatting

S

(Shovel)

Guest
Right then, the next websites I make are going down the CSS Layout route, having just attempted to edit one my older Table layout sites to disasterous effect.. ahem.

I've been playing with tables though, for data presentation and want to play with the borders, erm, this particular case is as follows (for a messageboard post):

3 rows, top row has no border and contains the title, and optionally some admin buttons.
The second row has two columns, poster info to the left and the post itself to the right.
Here, I want dashed vertical borders and solid horizontal borders.

Then the bottom row, showing some more shortcuts (PM, Quote, Report to mod etc) has no border.

The borders in the middle are problematic. I can define borders for individual table cells, which kindof works, but leaves a tiny gap between cells on the horizontal lines.

I have the CSS2 spec on my computer, but I can't make much sense on what it says about tables, and I tried implementing the example it gave and it didn't do anything.

Can someone give me some tips on how to do the traditional table layout and appearence work using CSS rather than HTML?

Thanks very much,

Ben
 
J

Jonty

Guest
Hey Ben

Flying visit :( I really like the W3Schools CSS2 Reference for simplicity. Just click on specific properties for more detail. Their CSS guide is quite a gentle introduction to everything too. If needs be, I'll post some sample code on Monday. Trust me, it can be done :)

Sorry I can't help more
 
C

Clowneh!

Guest
border:1px solid #AAD4AA;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 1px;

dunno if that might help? chop and change the 1px and 1px to however you want the borders
 
O

old.Kez

Guest
I don't quite understand the issue at hand really, but anyway.

table td.border {
/* this is applying the style to any table element with a cell class defined as border */
border-left: 1px dashed #colour;
border-right: 1px dashed #colour;
border-top: 1px solid #colour;
border-bottom: 1px solid #colour;
}

Though this does mean that rows with two cells with have a bit in the middle with two closely positioned dashed borders. The way to fix this would be to use two different classes, so .borderone and .bordertwo - each with only three border sides defined.

and just incase the gap issue is something else, margin: 0px; and padding: 0px; ought to solve it.
 
S

(Shovel)

Guest
Thank you :)

Kez, that's pretty much what I'm doing at the moment - The CSS2 spec seems to be saying something about:

table[table-row] { etc.. }

NB the "table-row" bit my not be accurate, I don't have the bit of the spec handy. It's a label in [ ] though.

I expect I'll get it working some how or other, or just go for the cell formatting option as I am at the moment. Thanks very much.:D
 
J

Jonty

Guest
Hi Ben

You have to be careful when using some of the advanced CSS2 features, as IE6 does not support some of the more recent enhancments which have been made. Anyway, below is roughly how I'd do things. It's far from perfect, and it still doesn't fix the gap issue, but I'm sure we can iron that out later :)

Code: 
<?// [Leave comment for offline IE viewing] xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html lang="en-uk" xml:lang="en-uk"" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Ben's CSS Table</title>

  <meta content="Amaurea Design" name="author" />
  <meta content="Copyright &copy; 2003 Amaurea Design" name="copyright" />
  <meta content="charset=ISO-8859-1; text/html;" http-equiv="Content-Type" />
  <meta content="text/css" http-equiv="Content-Style-Type" />
  <meta content="en-uk" http-equiv="Content-Language" />

  <style type="text/css">
Body
{
  background:transparent;
  color:#000000;
  margin:0px;
  padding:10px;
}

[u]Table,
Tr
{
  border:0px;
  margin:0px;
  padding:0px;
  width:100%;
}[/u]

Td
{
  font:11px tahoma,verdana,arial;
  padding:5px;
}

[u].PostDetails
{
  border-bottom:1px solid #000000;
  border-left:1px dashed #000000;
  border-top:1px solid #000000;
  width:20%;
}

.PostContent
{
  border-bottom:1px solid #000000;
  border-left:1px dashed #000000;
  border-right:1px dashed #000000;
  border-top:1px solid #000000;
  width:80%;
}[/u]
  </style>
</head>

<body>

[u]<table>
<tr>
  <td colspan="2">This is the title row with optional admin buttons</td>
</tr>
<tr>
  <td class="PostDetails">Post Details</td>
  <td class="PostContent">Post Content</td>
</tr>
<tr>
  <td colspan="2">This is the post shortcuts row</td>
</tr>
</table>[/u]

</body>
</html>
The underlined parts are the most important, as the rest is simply superfluous presentation or background code. Anyway, the CSS here is designed with simplicity in mind.

  • Table{...} simply removes any default borders, padding or margins which browsers may or may not automatically apply.
  • .PostDetails{...} is a reusable class which can be applied to any element (Td.PostDetails{...} would limit the class to Td's only). It defines the borders, omitting one of the right, and sets the width to, in this instance, 20%.
  • .PostContent{...} is another reusable class which can be applied to any element (Td.PostContent{...} would limit the class to Td's only). It defines the borders, including one on the left, and sets the width to, in this instance, 80%.
The Table markup code is also very simple. The only attribute we have to use is colspan. It should be noted you could just have easily used <th></th> to define the top row (in fact, you probably should :)) but just be aware of the default formatting applied to such elements, formatting which you would want to override via CSS (most browsers embolden the content, center it and sometimes increase the font size slightly).

I'll try and get rid of the small gap between the two content cells and post again later.

Kind Regards

Jonty

P.S. I'm not saying this is the only way to do it! CSS/XHTML is very flexible, and no one way is better than another :)
 
S

(Shovel)

Guest
Thank you very much Jonty - browser non support may well be the problem.

Thanks very much for the example code, I'll certainly have a play with that.

Thank you :)
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
Top Bottom