Need help in table color design

Hi,

I created reports and i display it on a table format.

Now I just want to add color line in every end of reject type within the date. to identify what are the reject type per reject date.

here is my code:


<?php
ob_start();
include "connection.php";

$id = "30";

if(isset($id)){
    /*
    We are building an array of all information with a single query.
    */
    $Reports = array();
    $dates = array();
    $process_names = array();
    $reject_types = array();
    $compound_types = array();
    $rejects = array();
    $reject_total = array();
    $sql = "SELECT
    r.reject_date,
    r.reject,
    r.process_id,
    r.reject_type,
    r.compound_type,
    p.process_name
    FROM op_reject AS r
    JOIN process_list AS p
    ON (p.process_id = r.process_id)
    WHERE WEEK(reject_date)+1= '$id'
    ORDER BY p.process_id, r.reject_date, r.compound_type ASC";
    $res = mysql_query($sql);
    while($row = mysql_fetch_assoc($res)){
        //Would have been nice to work off this single array, but found it difficult so I built sub-arrays below.
        $Reports[$row['reject_date']][$row['process_name']][$row['reject_type']][$row['compound_type']][]  = $row['reject'];

        //build some unique sub arrays for displaying data
        if (!in_array($row['reject_date'],$dates)){
            $dates[] = $row['reject_date'];
        }
        if (!in_array($row['process_name'],$process_names)){
            $process_names[] = $row['process_name'];
        }
        if (array_key_exists($row['process_name'],$compound_types) && !in_array($row['compound_type'],$compound_types[$row['process_name']]) ||
        !array_key_exists($row['process_name'],$compound_types)){
            $compound_types[$row['process_name']][] = $row['compound_type'];
        }
            $reject_types[$row['reject_date']][$row['process_name']][] = $row['reject_type'];
            $rejects[$row['reject_date']][$row['process_name']][$row['reject_type']][$row['compound_type']] = $row['reject'];

    }

    //----query for total rejec

    $sql_total = "SELECT
    r.reject_date,
    SUM(r.reject) AS reject_total,
    r.process_id,
    r.reject_type,
    p.process_name
    FROM op_reject AS r
    JOIN process_list AS p
    ON (p.process_id = r.process_id)
    WHERE WEEK(reject_date)+1= '$id'
   GROUP BY r.reject_type
    ORDER BY r.reject_date, reject_type, p.process_id  ASC";

    $res_total = mysql_query($sql_total);

     while($row_total = mysql_fetch_assoc($res_total)){
        $Reports[$row_total['reject_date']][$row_total['process_name']][$row_total['reject_type']]  = $row_total['reject_total'];

        //build some unique sub arrays for displaying data

            $rejects_total[$row_total['reject_date']][$row_total['process_name']][$row_total['reject_type']] = $row_total['reject_total'];

    }

//echo "<pre>";
//print_r($Reports);
//print_r($dates);
//print_r($process_names);
//print_r($compound_types);
//print_r($reject_types);
//print_r($rejects);
//echo "</pre>";


////Build display data BEFORE output to browser////
$display = "<table border=1 cellpadding=2 cellspacing=0>
        <thead>
            <tr>
                <th>Compound</th>\\r";
                //I'll keep your id identifier in place
                $i=1;
                foreach($dates as $date){
                    $display .= "<th id=col".$i." colspan=\\"8\\">$date</th>\\r";
                    $i++;
                }
            $display .= "</tr>
            </thead>";
                $datecnts = array();
                foreach($process_names as $process_name){
                    $display .= "<tr>\\r";
                        $display .= "<td>$process_name</td>\\r";

                    foreach($dates as $date){
                        if (array_key_exists($process_name,$Reports[$date])){
                            $datecnts[$date] = count($Reports[$date][$process_name]);
                            $d=0;
                            foreach($Reports[$date][$process_name] as $reject_type => $arry){
                                $display .= "<td>$reject_type</td>\\r";
                                $d++;
                            }
                        }else{
                            for($c=0;$c<=$d;$c++){
                                $display .= "<td>&nbsp;</td>\\r";
                            }
                        }
                    }
            $display .= "</tr>\\r";
            // Even with sub-arrays it get quite messy checking for all the keys and attempting to fill empty table cells
                    foreach($compound_types[$process_name] as $compound_type){
                        $display .= "<tr>\\r";
                            $display .= "<td>$compound_type</td>\\r";
                        foreach($dates as $date){
                            if (array_key_exists($date,$rejects) && array_key_exists($process_name,$rejects[$date])){
                                foreach($rejects[$date][$process_name] as $reject_type => $arry){
                                    if (array_key_exists($date,$rejects) && array_key_exists($process_name,$rejects[$date]) && !array_key_exists($reject_type,$rejects[$date][$process_name])){
                                        $display .= "<td>&nbsp;</td>\\r";
                                    }elseif (array_key_exists($date,$rejects) && array_key_exists($process_name,$rejects[$date]) && array_key_exists($reject_type,$rejects[$date][$process_name]) && !array_key_exists($compound_type,$rejects[$date][$process_name][$reject_type])){
                                        $display .= "<td>&nbsp;</td>\\r";
                                    }elseif (array_key_exists($date,$rejects) && array_key_exists($process_name,$rejects[$date]) && array_key_exists($reject_type,$rejects[$date][$process_name]) && array_key_exists($compound_type,$rejects[$date][$process_name][$reject_type])){
                                        $display .= "<td>{$rejects[$date][$process_name][$reject_type][$compound_type]}</td>\\r";
                                    }else{
                                        $display .= "<td>&nbsp;</td>\\r";
                                    }
                                }
                            }else{
                            $display .= "<td colspan=\\"{$datecnts[$date]}\\">&nbsp;</td>\\r";
                            }
                        }


                    }
           //---total rejects per process and per reject type---//

                        $display .= "<tr>";
                        $display .= "<td>Total</td>";

                        foreach($dates as $date1){
                            if (array_key_exists($date1,$rejects_total) && array_key_exists($process_name,$rejects_total[$date1])){
                                foreach($rejects_total[$date1][$process_name] as $reject_type => $arry){
                                    if (array_key_exists($date1,$rejects_total) && array_key_exists($process_name,$rejects_total[$date1]) && !array_key_exists($reject_type,$rejects_total[$date1][$process_name])){
                                        $display .= "<td>&nbsp;</td>\\r";
                                    }elseif (array_key_exists($date1,$rejects_total) && array_key_exists($process_name,$rejects_total[$date1]) && !array_key_exists($reject_type,$rejects_total[$date1][$process_name])){
                                        $display .= "<td>&nbsp;</td>\\r";
                                    }elseif (array_key_exists($date1,$rejects_total) && array_key_exists($process_name,$rejects_total[$date1]) && array_key_exists($reject_type,$rejects_total[$date1][$process_name])){
                                        $display .= "<td>{$rejects_total[$date1][$process_name][$reject_type][$compound_type]}</td>\\r";
                                    }else{
                                        $display .= "<td>&nbsp;</td>\\r";
                                    }
                                }
                            }else{
                            $display .= "<td colspan=\\"{$datecnts[$date1]}\\">&nbsp;</td>\\r";
                            }
                        }

                        $display .= "</tr>";
                }



    $display .= "</table>";
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Operator's Output and Reject</title>
    </head>
    <body>
        <?php
        if(isset($display)){
            echo "$display";
        }
        ?>
    </body>
</html>


table {
    margin: 12px;
    margin-left: 3px;
    border: 1px;


}

th {
    background: #694;
    color: #FFF;
    padding: 2px 6px;
    border-collapse: separate;
    border: 1px;
}

td {
    border: 1px solid #DDD;
    text-align: left;

}

I attached my sample screenshots and also the database

Thank you.

Are you asking for help with PHP or CSS?

css

After re-reading, it still sounds like database and php to me, so we will have to wait until the images are approved and hope that the one labeled “table line” explains what a color line is and how it relates to css. Sorry, I just don’t understand. Don’t dispair, though. A php person will probably drop in before long :slight_smile: .

Thank you…

It was just a simple table that data came from database.

I just want to add green line after between dates to figured out the list of reject type per date.

Thank you so much

Can you show us the HTML that is generated by the PHP? Most of us do not read PHP. We work primarily with HTML and CSS.

Please note the following guideline:

here is the view source:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Operator's Output and Reject</title>
    </head>
    <body>
        <table border=1 cellpadding=2 cellspacing=0>
        <thead>
            <tr>
                <th>Compound</th>
<th id=col1 colspan="8">2013-07-24</th>
<th id=col2 colspan="8">2013-07-25</th>
</tr>
            </thead><tr>
<td>Compound Mixing</td>
<td>SC</td>
<td>SH</td>
<td>SP</td>
<td>PG</td>
<td>PT</td>
</tr>
<tr>
<td>P28</td>
<td>1.00</td>
<td>3.00</td>
<td>2.00</td>
<td>1.00</td>
<td>&nbsp;</td>
<tr>
<td>P30</td>
<td>1.00</td>
<td>3.00</td>
<td>2.00</td>
<td>2.00</td>
<td>&nbsp;</td>
<tr>
<td>P32</td>
<td>1.00</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>3.00</td>
<tr><td>Total</td><td>3</td>
<td>6</td>
<td>4</td>
<td>3</td>
<td>3</td>
</tr><tr>
<td>Forming</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>BS</td>
</tr>
<tr>
<td>P28</td>
<td colspan="3">&nbsp;</td>
<td>1.00</td>
<tr><td>Total</td><td colspan="3">&nbsp;</td>
<td>1</td>
</tr></table>
    </body>
</html>


but the problem here the reject_type PG and PT and BS is reject type of 2013-07-25

OK. Are you saying that some of the cells of data are aligned under the wrong heading?

Yes.

Thank you

Should BS be in the “Forming” row or should it be in the “Compound Mixing” row? And what about the data in P28 and Total?

Tell me if this is what you are expecting the table to look like?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Operator's Output and Reject</title> 
</head> 
<body> 
<table border=1 cellpadding=2 cellspacing=0> 
<thead> 
<tr> 
    <th>Compound</th>
    <th id=col1 colspan="3">2013-07-24</th>
    <th id=col2 colspan="2">2013-07-25</th>
</tr> 
</thead>
<tr>
    <td>Compound Mixing</td>
    <td>SC</td>
    <td>SH</td>
    <td>SP</td>
    <td>PG</td>
    <td>PT</td>
</tr>
<tr>
    <td>P28</td>
    <td>1.00</td>
    <td>3.00</td>
    <td>2.00</td>
    <td>1.00</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>P30</td>
    <td>1.00</td>
    <td>3.00</td>
    <td>2.00</td>
    <td>2.00</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>P32</td>
    <td>1.00</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>3.00</td>
</tr>
<tr>
    <td>Total</td>
    <td>3</td>
    <td>6</td>
    <td>4</td>
    <td>3</td>
    <td>3</td>
</tr>
<tr>
    <td>Forming</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>BS</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>P28</td>
    <td colspan="3">&nbsp;</td>
    <td>1.00</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>Total</td>
    <td colspan="3">&nbsp;</td>
    <td>1</td>
    <td>&nbsp;</td>
</tr>
</table> 
</body> 
</html>

Should be in Forming Row

Please copy the HTML that I posted into an HTML file and open it in your browser and tell me if this is on the right track.

If it is, please describe what else you would like to see.

Nothing was change, but its ok cause i resolved it now using php.

THank you so much

Would you mind posting another Source View of the HTML? I would like to see how it is fixed?

Thank you.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Operator's Output and Reject</title>
    <style type="text/css">
    .display {
    background-color:#9D9D9D;
    color:#00000;
    font-family: Arial;
    font-size: 13px;
    }
    .display th{
    background-color:#4F8E38;
    color:#FFF;
    font-size: 14px;
    font-weight:bold;
    text-align:center;
    padding: 1px 3px;
    }
    .display td{
    background-color:#FFF;
    color:#00000;
    font-weight:bold;
    padding: 2px 4px;
    border:1px solid #E1E1E1;
    }
    .display .total{
    background-color:#F7FFF1;
    color:#000000;
    font-size: 13px;
    font-weight:bold;
    padding: 2px 4px;
    border-top:1px solid #609A2C;
    border-bottom:1px solid #609A2C;
    }
    .display .border {
    border-left:2px solid #385320;
    }
    </style>
    </head>
    <body>
        <table border=0 cellpadding=0 cellspacing=0 class="display">
        <thead>
            <tr>
                <th>Compound</th>
<th id=col1 colspan="3">2013-07-24</th>
<th id=col2 colspan="2">2013-07-25</th>
</tr>
            </thead><tr>
<td>Compound Mixing</td>
<td class="border">SC</td>
<td>SH</td>
<td>SP</td>
<td class="border">PG</td>
<td>PT</td>
</tr>
<tr>
<td>P28</td>
<td class="border">1.00</td>
<td>3.00</td>
<td>2.00</td>
<td class="border">1.00</td>
<td> </td>
</tr>
<tr>
<td>P30</td>
<td class="border">1.00</td>
<td>3.00</td>
<td>2.00</td>
<td class="border">2.00</td>
<td> </td>
</tr>
<tr>
<td>P32</td>
<td class="border">1.00</td>
<td> </td>
<td> </td>
<td class="border"> </td>
<td>3.00</td>
</tr>
<tr>
<td class="total">Total</td>
<td class="total border">3.00</td>
<td class="total">3.00</td>
<td class="total">3.00</td>
<td class="total border">3.00</td>
<td class="total">3.00</td>
<tr>
<td>Forming</td>
<td class="border"> </td>
<td> </td>
<td> </td>
<td class="border">BS</td>
<td> </td>
</tr>
<tr>
<td>P28</td>
<td class="border"> </td>
<td> </td>
<td> </td>
<td class="border">1.00</td>
<td> </td>
</tr>
<tr>
<td class="total">Total</td>
<td class="total border"> </td>
<td class="total"> </td>
<td class="total"> </td>
<td class="total border">1.00</td>
<td class="total"> </td>
</tr>
</table>

    </body>
</html>




You’re very fast! That looks very nice. You’re quite a pro.

FYI: there is one closing </tr> tag missing around line 89 in the above code, but it does not seem to affect the output.

And the validator would like to have the attribute values placed within quotation marks the same as “display” is.


<table border=[color=blue]"[/color]0[color=blue]"[/color] cellpadding=[color=blue]"[/color]0[color=blue]"[/color] cellspacing=[color=blue]"[/color]0[color=blue]"[/color] class="display"> 
    <thead> 
        <tr> 
            <th>Compound</th>
            <th id=[color=blue]"[/color]col1[color=blue]"[/color] colspan="3">2013-07-24</th>
            <th id=[color=blue]"[/color]col2[color=blue]"[/color] colspan="2">2013-07-25</th>

Nice chatting with you. :slight_smile:

:slight_smile:

Make sure you close each command, but I agree it should be used in forming row.