Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Set table header row font weight

  1. #1
    Join Date
    May 2011
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    Default Set table header row font weight

    This is my CSS:
    Code:
    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:
    Code:
    <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>

  2. #2
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    There are two ways of doing this:

    First method:
    HTML Code:
    <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:
    HTML Code:
    <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:

    PHP Code:
    /**
    * Same in both examples
    */

    #month

        
    border-width3px;
        
    border-stylesolid;
        
    border-collapsecollapse;
        
    border-color#415065;
        
    background-color#B6CEFF;
        
    width600px;
    }

    #month td
    {
        
    border-width1px;
        
    padding2px;
        
    border-stylesolid;
        
    border-color#000;
    }

    /**
    * For the First example HTML
    */

    #month thead td
    {
        
    font-weightbold;
    }

    /**
    * For the Second example HTML
    */

    #month th
    {
        
    font-weightbold;

    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.

  3. The Following User Says Thank You to ApacheTech For This Useful Post:

    Atom (07-04-2012)

  4. #3
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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
    Code:
    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.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. The Following User Says Thank You to bernie1227 For This Useful Post:

    Atom (07-04-2012)

  6. #4
    Join Date
    May 2011
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by ApacheTech View Post
    There are two ways of doing this:

    First method:
    HTML Code:
    <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:
    HTML Code:
    <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:

    PHP Code:
    /**
    * Same in both examples
    */

    #month

        
    border-width3px;
        
    border-stylesolid;
        
    border-collapsecollapse;
        
    border-color#415065;
        
    background-color#B6CEFF;
        
    width600px;
    }

    #month td
    {
        
    border-width1px;
        
    padding2px;
        
    border-stylesolid;
        
    border-color#000;
    }

    /**
    * For the First example HTML
    */

    #month thead td
    {
        
    font-weightbold;
    }

    /**
    * For the Second example HTML
    */

    #month th
    {
        
    font-weightbold;

    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:
    Code:
    <!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

  7. #5
    Join Date
    May 2011
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    Default

    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.


    Code:
    <?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.
    Last edited by Atom; 07-04-2012 at 03:21 PM. Reason: more info

  8. #6
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    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 Code:
    <?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.

  9. #7
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

    Here you go.

    PHP Code:
    <?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.

  10. #8
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

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

    PHP Code:
    <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>

  11. #9
    Join Date
    May 2011
    Posts
    49
    Thanks
    17
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by ApacheTech View Post
    With this technique, your table code has bee reduced to:

    PHP Code:
    <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

  12. #10
    Join Date
    Apr 2012
    Location
    Chester, Cheshire
    Posts
    329
    Thanks
    7
    Thanked 35 Times in 35 Posts

    Default

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

    Code:
    <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>

  13. The Following User Says Thank You to ApacheTech For This Useful Post:

    Atom (07-05-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •