How to get single line in tables?

Wysocki · 02-06-2005, 02:54 PM

Code:

<html>
<head>
</head>
<body bgcolor="#EEFFEE">
<table width="25%" style="border-collapse: collapse; background-color: #CCFFCC;" border="1">
<tbody><tr>
    <th width="50">a</th>
    <th width="80">b</th>
</tr>
<tr>
    <td width="50">1</td>
    <td width="80">2</td>
</tr>
<tr>
    <td width="50">3</td>
    <td width="80">4</td>
</tr>
</tbody>
</table>
</div>
</body></html>

With the above code I'm able to get a table that has single lines in it instead of the double lines when I just have border="1". The problem is that it looks different in Mozilla an IE. In Mozilla, I get nice black border lines, in IE the lines are white. Since the table is green you can still see them but is there any way to have both browsers see a table with single black lines?

idx · 02-06-2005, 04:15 PM

This seems pretty similar in IE5.5 and Moz Firefox 1.0:

Code:

<html>
<head>
</head>
<body bgcolor="#EEFFEE">
<style>
<!--
  table, td {
    border: 1px solid #000;
    border-collapse: collapse;
  }
//-->
</style>
<table width="25%" border="0">
<tbody><tr>
    <th width="50">a</th>
    <th width="80">b</th>
</tr>
<tr>
    <td width="50">1</td>
    <td width="80">2</td>
</tr>
<tr>
    <td width="50">3</td>
    <td width="80">4</td>
</tr>
</tbody>
</table>
</div>
</body></html>

Wysocki · 02-06-2005, 04:30 PM

Thanks for the great solution! But I wanted the table to be a different color than the background. With your code, I went into the cells and added back the pale green color. When I saw the page it was an ugly yellow-green. Any idea why the color in the cells changed? Even with the cells set to #FFFFFF they are a deep yellow.

Code:

<html>

<html>
<head>
</head>
<body bgcolor="#EEFFEE">
<style>
<!--
  table, td {
    border: 1px solid #000;
    border-collapse: collapse;
  }
//-->
</style>
<table width="25%" border="0">
<tbody><tr>
    <th bgcolor="#CCFFCC width="50">a</th>
    <th bgcolor="#CCFFCC width="80">b</th>
</tr>
<tr>
    <td bgcolor="#CCFFCC width="50">1</td>
    <td bgcolor="#CCFFCC width="80">2</td>
</tr>
<tr>
    <td bgcolor="#CCFFCC width="50">3</td>
    <td bgcolor="#CCFFCC width="80">4</td>
</tr>
</tbody>
</table>
</div>
</body></html>

idx · 02-06-2005, 05:14 PM

Yeah, no closing quote after the #ccffcc.. Although you can easily adjust the color from css and not have to specify it on each row.

Code:

<style>
<!--
  table, td {
    border: 1px solid #000;
    border-collapse: collapse;
    background-color: #ccffcc;
  }
//-->
</style>

-r

Wysocki · 02-06-2005, 10:46 PM

Damn! It must be the sleep deprivation! I'm starting to lose control over the basics while I'm trying to get more advanced. This is a great solution, but where would you suggest is the best place that I can find more tutorial/info about the <style> stuff, I've just been a basic html guy to this point.

idx · 02-07-2005, 06:51 PM

Well the official source is http://w3c.org/Style/CSS/ .. They seem to have some FAQ/articles/tutorials that might help.

I'm, by far, nowhere close to knowledgeable on design, but I ended up going through enough tutorials and ripping other pages apart to make things work.

-r