[RESOLVED] A little help beginning CSS tables...

markfc

Hi, I'm Just beginning CSS and was wondering if someone could offer a tidier way of coding the following table ;

http://www.theboyinwales.com/csshelp/

I will have upto Five of these tables on one page, each one will have a different header graphic and a different colour.

I was planning on repeating the same CSS but changing each table to #table_dashboard_(next_number)

I would like to move the BGCOLOR in to the HEAD CSS section if possible.

Am I on the right tracks?

Many thanks for your time!

Mark

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
#table_dashboard_1 {
	width: 745px;
   border-collapse: collapse;
}
#table_dashboard_1 th {
   font-family: Arial, Tahoma;
   font-weight: normal;
   font-size: 11px;
   padding: 4px;

}
#table_dashboard_1 td {
   font-family: Arial, Tahoma;
   font-weight: normal;
   font-size: 11px;
   border-bottom: 1px solid #EEEEEE;
   padding: 4px;
}

</style>
</head>
<body>
<table id="table_dashboard_1">
   <tr>
      <th colspan="7">
		<img alt="" src="img14.gif" style="float: left"></th>
   </tr>

   <tr>
      <th class="style2" colspan="7" style="height: 16px" background="dots3.png"></th>
   </tr>
   <tr>
      <th bgcolor="#F9A55B" align="left"><strong>Field Title</strong></th>
      <th bgcolor="#F9A55B" align="left"><strong>Field Title</strong></th>
      <th bgcolor="#F9A55B" align="left"><strong>Field Title</strong></th>

  <th bgcolor="#F9A55B" align="left"><strong>Field Title</strong></th>
  <th bgcolor="#F9A55B" align="left"><strong>Field Title</strong></th>
  <th bgcolor="#F9A55B" align="left"><strong>Field Title</strong></th>
  <th bgcolor="#F9A55B" align="right"><strong>Total</strong></th>
   </tr>
   <tr>
      <td>Field</td>

  <td>Field</td>
  <td>Field</td>
  <td>Field</td>
  <td>Field</td>
  <td>Field</td>
  <td align="right">0.00</td>

   </tr>
   <tr>
      <td>Field</td>
      <td>Field</td>
      <td>Field</td>
      <td>Field</td>
      <td>Field</td>

  <td>Field</td>
  <td align="right">0.00</td>
   </tr>
</table>
</body>
</html>

cahva

You dont have to repeat the css with #table_dashboard_(next_number). Thats what classes are for. Id's are for elements used once in markup. Heres an example where I put the bgcolor to the css where it belongs and tidied up the markup and css a little:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">

.table_dashboard {
	width: 100%;
	font-weight: normal;
	font-family: Arial, Tahoma;
	font-size: 11px;
	border-collapse: collapse;
}
.table_dashboard th {
	font-weight: bold;
	padding: 4px;
	text-align: left;
	background-color: #F9A55B;

}
.table_dashboard td {
	border-bottom: 1px solid #EEEEEE;
	padding: 4px;
}

.dot {
	background: transparent url(dots3.png) center center repeat-x;
	width: 100%;
	height: 16px;
}

</style>
</head>
<body>
<div style="width: 745px">
	<img alt="" src="img14.gif">
	<div class="dot"></div>
	<table class="table_dashboard">
	   <tr>
	      <th>Field Title</th>
	      <th>Field Title</th>
	      <th>Field Title</th>

      <th>Field Title</th>
      <th>Field Title</th>
      <th>Field Title</th>
      <th style="text-align: right">Total</th>
   </tr>
   <tr>
      <td>Field</td>

      <td>Field</td>
      <td>Field</td>
      <td>Field</td>
      <td>Field</td>
      <td>Field</td>
      <td style="text-align: right">0.00</td>

   </tr>
   <tr>
      <td>Field</td>
      <td>Field</td>
      <td>Field</td>
      <td>Field</td>
      <td>Field</td>

      <td>Field</td>
      <td style="text-align: right">0.00</td>
   </tr>
</table>
</div>
</body>
</html>

Weedpacket

markfc wrote:
I would like to move the BGCOLOR in to the HEAD CSS section if possible.

You mean

#table_dashboard_2 th {
   font-family: Arial, Tahoma;
   font-weight: bold;
   font-size: 11px;
   padding: 4px;
   text-align:right;
   background-color:#fa995b;
}

(Which will also left-align the headings in those cells (the last one will need to be overridden of course) - and give them a bold weight.) You could also look at using a <thead> element as well.

Edit: Hah... I'm not the fastest here. But now that I look at it, the dots image could be replaced by giving the table a dotted border along the top, couldn't it?

cahva

The dotted border does not look the same in every browser so I too prefer to use images for those.

markfc

Hi!

Many thanks for the great replies.

Just one thing, How would I change the .table_dashboard th { background for each table? }

I wanted each table to have a different background-color which is why I started down the table_dashboard_1 2 3 route.

Many thanks again.

Mark

cahva

Ok.. First remove the background-color from ".table_dashboard th". Then add these:

.col1 th {
	background-color: #F9A55B;
}

.col2 th {
	background-color: #a9a55B;
}

And then add the tables like this:

<table class="table_dashboard col1">
...
</table>

<!-- and another table -->
<table class="table_dashboard col2">
...
</table>

markfc

Cahva my man, you are a genius.

Thanks very much for your help.

It's greatly appreciated.

Mark

Weedpacket

cahva wrote:
The dotted border does not look the same in every browser so I too prefer to use images for those.

Do you use images for the text as well, then?

cahva

Weedpacket;10902879 wrote:
Do you use images for the text as well, then?

Nitpicking eh? Well no, ofcourse not. Just test yourself what dotted border looks in IE6. They are not dots, they are 2 pixel wide(or vertically 2 pixels in height) and that makes a difference designwise.

Weedpacket

cahva wrote:
They are not dots, they are 2 pixel wide(or vertically 2 pixels in height) and that makes a difference designwise.

So does screen resolution. Or do you put everything into an 800px-wide box?

Face it: if you want pixel-perfect rendering of every nitpicking little thing (it's just a dotted line for $DEITY's sake) you should stay away from the web.

PS: despite several optimisations (including the obvious two) I couldn't get that dots3.png image down below 98 bytes. Which is still larger than

border-top:1px dotted silver; margin-top:5px; padding-top:10px;

and I'm not going to bust a gut for the sake of coddling something abandoned by its manufacturer and only used by (at a generous estimate) about a third of the browsing audience at the expense of everyone else as long as it doesn't break the page. What's the betting that none of said audience will care that a dotted line was two pixels high instead of one even if they noticed?

67 bytes isn't much. But a separate image file makes it necessary to reserve a connection (Firefox defaults to a maximum of 15 per server), construct an HTTP request, wrap it in an IP packet, wrap that in a TCP packet, wrap that in an Ethernet or PPP or whatever packet, send it out into the network and wait for a similarly-multiply-wrapped packet to come back. The HTTP request alone is probably about the size of this paragraph.

cahva

Sorry. I was so stupid that I did not think of the bandwith that is more precious than oil. Shame on me. I will do my sites with no graphics from now on. Atleast Lynx users will be pleased. Thank you for your wisdom Weedpacket! 🙂

Anyway.. When I get a layout from some customer and need to convert it to html. I atleast TRY to make it look the same for every major browser. And like it or not, IE6 is still the most used browser in many countries. I actually had a case when I made the god damn dotted line with css border and customer complained that it didnt look the same as his layout(and I agreed with him because the whole site's appearance was very different with the ugly dotted lines that IE6 produces). And hey, they pay my salary and customer is always right, right? 😉

Weedpacket

See? We both have our hangups. You care about how it looks and I care about how it works.

I guess I'm (a) more fortunate because I don't get the customer breathing down my neck about it and (b) less fortunate because they think making it look nice is the hard part and expect everything else to be done in half an hour. Until they start asking why the site is so slow (apparently it's nothing to do with the fact that they're getting a thousand hits a minute on cheap shared hosting and their front page alone is 700kB of tag soup and border images and background images and navigation images and random rotating ad banners and uncacheable up-to-the-second dynamically-generated personalised content and half their audience is on dialup).

Besides, regarding whether to use an image or CSS for tables: note the title of this thread.