Set table header row font weight

[Atom]

This is my CSS:

table.month{ border-width:3px; border-style: solid; border-collapse:collapse; border-color:#415065; background-color:#B6CEFF; cellpadding:2px; cellspacing:2px; width:600px;}
table.month th {
font-weight: bold;
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: #000000;
}
table.month td {
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: #000000;

I want the header row to be bold, and the cell text to be regular, but I am unable to find the way to make that happen.

This is first part of html:

<table class="month">
<th >
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
<td>Jul</td>
<td>Aug</td>
<td>Sep</td>
<td>Oct</td>
<td>Nov</td>
<td>Dec</td>
</th>

[ApacheTech]

There are two ways of doing this:

First method:

<table id="month">
<thead>
<tr>
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
<td>Jul</td>
<td>Aug</td>
<td>Sep</td>
<td>Oct</td>
<td>Nov</td>
<td>Dec</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jan Data</td>
<td>Feb Data</td>
<td>Mar Data</td>
<td>Apr Data</td>
<td>May Data</td>
<td>Jun Data</td>
<td>Jul Data</td>
<td>Aug Data</td>
<td>Sep Data</td>
<td>Oct Data</td>
<td>Nov Data</td>
<td>Dec Data</td>
</tr>
</tbody>
</table>

Second method:


<table id="month">
<tr>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
<tr>
<td>Jan Data</td>
<td>Feb Data</td>
<td>Mar Data</td>
<td>Apr Data</td>
<td>May Data</td>
<td>Jun Data</td>
<td>Jul Data</td>
<td>Aug Data</td>
<td>Sep Data</td>
<td>Oct Data</td>
<td>Nov Data</td>
<td>Dec Data</td>
</tr>
</table>


And the CSS:



/**
* Same in both examples
*/

#month
{
border-width: 3px;
border-style: solid;
border-collapse: collapse;
border-color: #415065;
background-color: #B6CEFF;
width: 600px;
}

#month td
{
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: #000;
}

/**
* For the First example HTML
*/

#month thead td
{
font-weight: bold;
}

/**
* For the Second example HTML
*/

#month th
{
font-weight: bold;
}


I can't remember which is the preferred method. I think it's the second example. Someone else may be able to expand more on it though.

[bernie1227]

I would think there would be more than two solutions, as there are multiple ways you can do this with different CSS seletors. For example, an efficient way to do it would also be to just use the


tr:first-child th /* or td, depending on what your HTML is */
{
font-weight: bold;
}

So this means that all of the th tags withinn the tr tag that is the first child (of table) will be styled accordingly.

[Atom]

There are two ways of doing this:

First method:

<table id="month">
<thead>
<tr>
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
<td>Jul</td>
<td>Aug</td>
<td>Sep</td>
<td>Oct</td>
<td>Nov</td>
<td>Dec</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jan Data</td>
<td>Feb Data</td>
<td>Mar Data</td>
<td>Apr Data</td>
<td>May Data</td>
<td>Jun Data</td>
<td>Jul Data</td>
<td>Aug Data</td>
<td>Sep Data</td>
<td>Oct Data</td>
<td>Nov Data</td>
<td>Dec Data</td>
</tr>
</tbody>
</table>

Second method:


<table id="month">
<tr>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
<tr>
<td>Jan Data</td>
<td>Feb Data</td>
<td>Mar Data</td>
<td>Apr Data</td>
<td>May Data</td>
<td>Jun Data</td>
<td>Jul Data</td>
<td>Aug Data</td>
<td>Sep Data</td>
<td>Oct Data</td>
<td>Nov Data</td>
<td>Dec Data</td>
</tr>
</table>


And the CSS:



/**
* Same in both examples
*/

#month
{
border-width: 3px;
border-style: solid;
border-collapse: collapse;
border-color: #415065;
background-color: #B6CEFF;
width: 600px;
}

#month td
{
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: #000;
}

/**
* For the First example HTML
*/

#month thead td
{
font-weight: bold;
}

/**
* For the Second example HTML
*/

#month th
{
font-weight: bold;
}


I can't remember which is the preferred method. I think it's the second example. Someone else may be able to expand more on it though.

Thanks so much for your help. It was a great revelation to me that php could run in CSS. However, in the meantime I've done some additional work and I'm not sure how I would apply what you've given me with what I now have. I am constructing the table using php and using internal style code. This allows me to make fill the table with data uploaded to my website from my desktop. Here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SIF Trading Systems - About</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
/************************************************ All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code***********************************************/
</script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script language="JAVASCRIPT" type="TEXT/JAVASCRIPT"></script>
<style type="text/css">
table { border-width:5px; border-style: solid; border-collapse:collapse; border-color:#415065; background-color:#B6CEFF; cellpadding:2px; cellspacing:2px; width:600px;}
</style>
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header" class="fltlft"><img src="images/logo.jpg" alt="SIF Trading Systems Logo" class="fltlft" /><img src="images/software_box.jpg" alt="Software Box" class="fltrt" /> </div><br class="clearfloat" />

<div id="left_column"><!--#include file="menu.shtml" -->
</div>


<div id="mainContent">
<h1>Monthly Net Points by Year</h1>
<div>
<?php
$i = 0;
$file = file("clientFTP/SixInOne_MonNet.txt");


echo "<table >";


foreach($file as $line){
$line = trim($line);
$split = split(",",$line);
echo "<tr><td>$split[0]</td><td>$split[1]</td><td>$split[2]</td><td>$split[3]</td><td>$split[4]</td><td>$split[5]</td><td>$split[6]</td>
<td>$split[7]</td><td>$split[8]</td><td>$split[9]</td><td>$split[10]</td><td>$split[11]</td><td>$split[12]</td></tr>";
}

echo "</table>";

?>
</div>
</div><br class="clearfloat" />
<div id="footer">
<p><a href="index.html">Home</a></p></div>
<p id="copyright">Copyright &copy; 2009 SIF Trading Systems</p><img alt="" src="images/menu_tile.jpg" style="display: none" /></div>

</body>
</html>


And here's the link to the webpage it makes:
http://www.siftradingsystems.com/Table1.php

In addition to putting the header row in bold, I would also like to have the negative numbers displayed in red.

I know I have to move the style to my CSS, so I will be doing that in the meantime.

Thanks again for your help.

Tom

[Atom]

Ok, I've discovered that if I try to use "echo "<table id="month"> it does not run, so I'm using the code below with an internal style. I am unable to get the header row to format to bold font, but I can get the entire table to bold font, which I'm very happy with. At this point, I'm just interested in the possibility of getting the negative numbers in red.



<?php
$i = 0;
$file = file("clientFTP/SixInOne_MonNet.txt");


echo "<table>";


foreach($file as $line)
{
$line = trim($line);
$split = split(",",$line);

if ($i=0) echo
"<tr><th>$split[0]</th><th>$split[1]</th><th>$split[2]</th><th>$split[3]</th><th>$split[4]</th><th>$split[5]</th><th>$split[6]</th>
<th>$split[7]</th><th>$split[8]</th><th>$split[9]</th><th>$split[10]</th><th>$split[11]</th><th>$split[12]</th></tr>";
else echo
"<tr><td>$split[0]</td><td>$split[1]</td><td>$split[2]</td><td>$split[3]</td><td>$split[4]</td><td>$split[5]</td><td>$split[6]</td>
<td>$split[7]</td><td>$split[8]</td><td>$split[9]</td><td>$split[10]</td><td>$split[11]</td><td>$split[12]</td></tr>";
$i=$i+1;
}
?>
echo "</table>";

Nevermind, I've discovered I can select table properties from CSS by using: echo "<table id=\"month\">";

Just need red negative numbers now.

[ApacheTech]

Thanks so much for your help. It was a great revelation to me that php could run in CSS.

What do you mean by this? There is a way of using PHP within external CSS sheets, for some truly flexible designs, but for what you need, a simple CSS file should be fine.


Nevermind, I've discovered I can select table properties from CSS by using: echo "<table id=\"month\">";

You could also do:


<?php echo 'table id="month">'; ?>

Which is the preferable method.

I'll have a look over your code now and work something out for you, shouldn't be too hard.

[ApacheTech]

Here you go.


<?php

$th = true;
$file = file("clientFTP/SixInOne_MonNet.txt");
?>

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>SIF Trading Systems - About</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
table
{
border-width:5px;
border-style: solid;
border-collapse:collapse;
border-color:#415065;
background-color:#B6CEFF;
cellpadding:2px;
cellspacing:2px;
width:600px;
}

td.negative
{
color: #f00;
}
</style>
</head>

<body class="twoColFixLtHdr">
<div id="container">
<div id="header" class="fltlft">
<img src="images/logo.jpg" alt="SIF Trading Systems Logo" class="fltlft" />
<img src="images/software_box.jpg" alt="Software Box" class="fltrt" />
</div>

<div class="clearfloat"></div>

<div id="left_column">
<!--#include file="menu.shtml" -->
</div>


<div id="mainContent">
<h1>Monthly Net Points by Year</h1>
<div id="contentTable">
<table>
<? foreach($file as $line) { $split = split(',', trim($line)); ?>
<tr>
<?php foreach($split as $num) { $neg = (!$th && $num < 0) ? true : false; ?>
<?php echo ($th) ? '<th>' : '<td '.($neg) ? 'class="negative">' : '>'; ?>
<?php echo $num; ?>
<?php echo ($th) ? '</th>' : '</td>'; ?>
</tr>
<?php $th = false; } ?>
</table>
</div>
</div>

<div class="clearfloat"></div>

<div id="footer">
<p>
<a href="index.html">Home</a>
</p>
</div>

<p id="copyright">Copyright &copy; 2009 SIF Trading Systems</p>
<img alt="" src="images/menu_tile.jpg" style="display: none" />
</div>

</body>
</html>

I've added a couple of future-proofing techniques. I've updated the doctype to HTML5 to allow for better future development and I've allowed the table to dynamically shrink or grow as needed.

[ApacheTech]

With this technique, your table code has bee reduced to:



<table>
<? foreach($file as $line) { $split = split(',', trim($line)); ?>
<tr>
<?php foreach($split as $num) { $neg = (!$th && $num < 0) ? true : false; ?>
<?php echo ($th) ? '<th>' : '<td '.($neg) ? 'class="negative">' : '>'; ?>
<?php echo $num; ?>
<?php echo ($th) ? '</th>' : '</td>'; ?>
</tr>
<?php $th = false; } ?>
</table>

[Atom]

With this technique, your table code has bee reduced to:



<table>
<? foreach($file as $line) { $split = split(',', trim($line)); ?>
<tr>
<?php foreach($split as $num) { $neg = (!$th && $num < 0) ? true : false; ?>
<?php echo ($th) ? '<th>' : '<td '.($neg) ? 'class="negative">' : '>'; ?>
<?php echo $num; ?>
<?php echo ($th) ? '</th>' : '</td>'; ?>
</tr>
<?php $th = false; } ?>
</table>


I cannot get this to work. I keep getting an error like:
Parse error: syntax error, unexpected $end in /home/siftradi/public_html/SixSysMonthlyNeta.php on line 72

[ApacheTech]

The change you need to make is on the highlighted line, in red.


<table>
<? foreach($file as $line) { $split = split(',', trim($line)); ?>
<tr>
<?php foreach($split as $num) { $neg = (!$th && $num < 0) ? true : false; ?>
<?php echo ($th) ? '<th>' : '<td '.($neg) ? 'class="negative">' : '>'; ?>
<?php echo $num; ?>
<?php echo ($th) ? '</th>' : '</td>'; } ?>
</tr>
<?php $th = false; } ?>
</table>

[Atom]

The change you need to make is on the highlighted line, in red.


<table>
<? foreach($file as $line) { $split = split(',', trim($line)); ?>
<tr>
<?php foreach($split as $num) { $neg = (!$th && $num < 0) ? true : false; ?>
<?php echo ($th) ? '<th>' : '<td '.($neg) ? 'class="negative">' : '>'; ?>
<?php echo $num; ?>
<?php echo ($th) ? '</th>' : '</td>'; } ?>
</tr>
<?php $th = false; } ?>
</table>

Ok, the parsing error is gone, but I now get this:

class="negative"> class="negative"> Jan class="negative"> Feb class="negative"> Mar class="negative"> Apr class="negative"> May class="negative"> Jun class="negative"> Jul class="negative"> Aug class="negative"> Sep class="negative"> Oct class="negative"> Nov class="negative"> Dec class="negative"> 2000 class="negative"> 446 class="negative"> 166 class="negative"> 268

This is the data file I'm using if this helps.


,Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
2000,446,166,268,220,162,35,-24,212,300,146,-36,294
2001,167,57,12,92,170,107,72,77,186,105,-28,129
2002,166,156,-11,191,206,298,326,66,128,24,29,25
2003,253,77,177,82,73,64,96,96,98,13,78,109
2004,28,22,122,128,-7,-13,88,137,-7,74,29,-13
2005,73,89,67,213,35,-14,74,-104,28,137,19,12
2006,-57,40,-32,70,136,37,58,-65,-8,1,27,17
2007,-34,90,-49,96,77,118,230,228,40,49,113,80
2008,446,45,207,101,67,108,208,150,542,715,200,174
2009,99,103,290,-33,188,62,159,-67,46,-5,24,32
2010,27,117,47,21,117,99,154,-32,4,19,46,0
2011,51,71,68,46,2,44,84,72,209,126,41,16
2012,-16,52,74,-43,6,75

[ApacheTech]

This works for me:


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>SIF Trading Systems - About</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
table
{
border-width:5px;
border-style: solid;
border-collapse:collapse;
border-color:#415065;
background-color:#B6CEFF;
cellpadding:2px;
cellspacing:2px;
width:600px;
}

td.negative
{
color: #f00;
}
</style>
</head>

<body class="twoColFixLtHdr">
<div id="container">
<div id="header" class="fltlft">
<img src="images/logo.jpg" alt="SIF Trading Systems Logo" class="fltlft" />
<img src="images/software_box.jpg" alt="Software Box" class="fltrt" />
</div>

<div class="clearfloat"></div>

<div id="left_column">
<!--#include file="menu.shtml" -->
</div>


<div id="mainContent">
<h1>Monthly Net Points by Year</h1>
<div id="contentTable">
<table>
<? foreach(file('clientFTP/SixInOne_MonNet.txt') as $row=>$data) { $cell = explode(',', trim($data)); ?>
<tr>
<?php foreach($cell as $num) { $neg = ($num<0); ?>
<?php echo ($row < 1) ? '<th': '<td', ($neg) ? ' class="negative"' : '', '>'; ?>
<?php echo $num; ?>
<?php echo ($th) ? '</th>' : '</td>'; } ?>
</tr>
<?php } ?>
</table>
</div>
</div>

<div class="clearfloat"></div>

<div id="footer">
<p>
<a href="index.html">Home</a>
</p>
</div>

<p id="copyright">Copyright &copy; 2009 SIF Trading Systems</p>
<img alt="" src="images/menu_tile.jpg" style="display: none" />
</div>

</body>
</html>

[Atom]

Darned if doesn't work for me too. I must have copied something wrong earlier. I'm going to work on having all the table data be in bold text and getting the table border to complete around the partially complete last year. If I can't get it, I might be back, but thanks so much for your help.

tom