Style Certain Table Rows from Database Query Set Data with CSS

Question

I have a set of data in a MySQL database. I have a table created from these data using PHP loops. I want to style certain rows in certain ways. For example, the data fetched from the database are in groups of 2, 3, 4, 5 rows. There are a about 25 rows of data and I'd like to style each group a bit differently, e.g., add color to row sub heading...

I built this out and didn't quite take into consideration that this styling was necessary. The client wants this styling and now I'm trying to figure out how to make it.

Here is an image from Excel with the kind of thing I'm trying to accomplish:

enter image description here

I could just hand write the HTML and then style it but the code is much cleaner and tighter when using the PHP loops. Also, if I can figure this out, I could use this as a model and template for other scenarios where I need to style certain parts of a table from more data.

Here is the PHP snippet:

<table>
    <tr>
        <th>hd1</th>
        <th>hd2</th>
        <th>hd3</th>
    </tr>

    <?php

    $mysqli = <connect to db is fine>;

    $query = 'SELECT a, b, c from t1';

    if($stmt = mysqli_prepare($mysqli, $query)) {
        mysqli_stmt_execute($stmt);
        mysqli_stmt_bind_result($stmt, $a, $b, $c);

        while (mysqli_stmt_fetch($stmt)) {
            echo '<tr>';
            echo '<td>' . $a . '</td>';
            echo '<td>' . $b . '</td>';
            echo '<td>' . $c . '</td>'; 
            echo '</tr>';       
        }
    }

    ?>

</table>

It's very straight forward. It's a boilerplate PHP while loop. nothing fancy... I'll add snippets. — nicorellius
– nicorellius, Commented Sep 3, 2013 at 19:53
How does your MySQL table look like? Is there any way of knowing when to apply a certain style? — Gillian Lo Wong
– Gillian Lo Wong, Commented Sep 3, 2013 at 19:58

Charaf JRA · Accepted Answer · 2013-09-03 20:17:12Z

2

In this part of code add a class for your sub-headings :

$subheadingsContent = array("a", "sub heading", "cell data");

while (mysqli_stmt_fetch($stmt)) {


    if(in_array($a, $subheadingsContent)) echo '<tr class="subheading">';

    echo '<td>' . $a . '</td>';
    echo '<td>' . $b . '</td>';
    echo '<td>' . $c . '</td>'; 
    echo '</tr>';       
}

And add class in your css file foreach element , for the first , the second , third .... :

 .subheading:nth-child(1){background-color:blue;}
 .subheading:nth-child(2){background-color:orange;}
 .subheading:nth-child(3){background-color:gray;}

edited Sep 3, 2013 at 20:17

answered Sep 3, 2013 at 20:05

Charaf JRA

8,3551 gold badge36 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nicorellius Over a year ago

I ended up using specific tests and unique classes and this worked great - thanks a bunch.

Charaf JRA Over a year ago

@nicorellius i added array of values , and you check if $a is in this array.

edhedges · Accepted Answer · 2013-09-03 19:53:55Z

0

For each different group of rows you could add a class to style each one in your php. Then in your css style according to each class.

For example give your heading row a class of blueHeading and then in your css just set the background-color attribute to be blue.

This is basically what the html class attribute is for.

answered Sep 3, 2013 at 19:53

edhedges

2,7282 gold badges31 silver badges63 bronze badges

Comments

timgavin · Accepted Answer · 2013-09-03 19:54:53Z

0

Just check the name of the subheading in the loop and color the td's background

if($subheading == 'foo') {
    echo '<td class="foo">';
}

answered Sep 3, 2013 at 19:54

timgavin

5,1865 gold badges39 silver badges56 bronze badges

Collectives™ on Stack Overflow

Style Certain Table Rows from Database Query Set Data with CSS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related