CSS Forum

**madseason** · 09:43 AM

I have this table code:

HTML Code:

<table class="stats" cellspacing="0">
<tr>
<td class="hed" colspan="4">These stats here are good</td>
</tr>
<tr>
<td>The thing</td>
<td>10.0</td>
<td>9.8</td>
<td>6.7</td>
</tr>
<tr>
<td>Other thing</td>
<td>6.5</td>
<td>8.9</td>
<td>9.9</td>
</tr>
</table>

and this CSS code:

Code:

table.stats 
{text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
    font-weight: normal;
    font-size: 11px;
    color: #fff;
    width: 280px;
    background-color: #666;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 0px;}

table.stats td 
{background-color: #CCC;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;}

table.stats td.hed
  {background-color: #666;
color: #fff;
padding: 4px;
text-align: left;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;}

What name should i give to the CSS file and where/how do i call it.

Why are in the font family so many fonts and not just one?

**edgray** · 03-07-2011, 09:22 AM

Quote:

Originally Posted by madseason

What name should i give to the CSS file and where/how do i call it.

call the CSS file whatever you like, and call it like this:

HTML Code:

<link href="css/your-style-sheet.css" type="text/css" rel="stylesheet" media="screen"/>

Quote:

Originally Posted by madseason

Why are in the font family so many fonts and not just one?

Because there is no guarantee that the font you want to use is installed on the browser's computer, so you set a font family, that contains similar fonts, so you still have a little control over how the site displays on a wide variety of machines with different fonts etc.

**madseason** · 09:53 AM

Thanks for the reply edgray,

how do i adapt this code to the code of the css file?

Code:

    <table class="stats" border="0" cellpadding="1" cellspacing="1" width="100%">
  
 (...)
       
 <td  class="hed" valign="top"><%=rs("field")%></td>
      

(...)
    </table>

i tryed with the link inside the <body href="...\a\b\c\myfile.css (..)/> and after the body tag. Doesn't happen anything.

**edgray** · 03-07-2011, 10:06 AM

Quote:

Originally Posted by madseason

Thanks for the reply edgray,

how do i adapt this code to the code of the css file?

Code:

    <table class="stats" border="0" cellpadding="1" cellspacing="1" width="100%">
  
 (...)
       
 <td  class="hed" valign="top"><%=rs("field")%></td>
      

(...)
    </table>

i tryed with the link inside the <body href="...\a\b\c\myfile.css (..)/> and after the body tag. Doesn't happen anything.

your CSS file should be called between your HEAD tags. Avoid using windows backslashes - use the unix standard forward slash ( / ) in your URLs.

**madseason** · 03-07-2011, 10:14 AM

Still not working. I put the link between the head, class="stats" in all my <table></table>. Maby it's the way (.../a/b/myfile.css")?

**edgray** · 03-07-2011, 10:18 AM

Quote:

Originally Posted by madseason

Still not working. I put the link between the head, class="stats" in all my <table></table>. Maby it's the way (.../a/b/myfile.css")?

Your document should look something like this:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<title>My Page</title>
		<link href="styles.css" type="text/css" rel="stylesheet" media="screen"/>
	</head>
	<body>
<table class="stats" cellspacing="0">
<tr>
<td class="hed" colspan="4">These stats here are good</td>
</tr>
<tr>
<td>The thing</td>
<td>10.0</td>
<td>9.8</td>
<td>6.7</td>
</tr>
<tr>
<td>Other thing</td>
<td>6.5</td>
<td>8.9</td>
<td>9.9</td>
</tr>
</table>

	</body>
</html>

Then your CSS, named "styles.css" should be saved in the same folder as your page.

**madseason** · 03-07-2011, 10:22 AM

Thanks again. I changed the way (just put the name of the file like you did) and it works

**edgray** · 03-07-2011, 10:26 AM

Quote:

Originally Posted by madseason

Thanks again. I changed the way (just put the name of the file like you did) and it works

excellent. happy coding