too long

Question

My friend made new design for my table but i couldnt integrate old table php code to the new design. How can i make it? Thanks

This is my old table;

<table align="center" width="1200" height="370" cellpadding="7">
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Sex</th>
                <th>Country</th>
                <th>Age</th>
                <th>Twitter</th>
                <th>Instagram</th>
                <th>Snapchat</th>
                <th>Details</th>
            </tr>

            <?php
            foreach($db->query('SELECT * FROM uyeler ORDER BY RAND()LIMIT 20') as $row) {
                    echo "<tr><td>" .$row['id'] . "</td>";
                    echo "<td>" .$row['fname'] . "</td>";
                    echo "<td>" .$row['sex'] . "</td>";
                    echo "<td>" .$row['country'] . "</td>";
                    echo "<td>" .$row['age'] . "</td>";
                    echo "<td>" .$row['twitter'] . "</td>";
                    echo "<td>" .$row['instagram'] . "</td>";
                    echo "<td>" .$row['snapchat'] . "</td>";
                    echo ('<td><a href="details.php?id=' .$row['id'] . '" title="Panel">Details</a></td>');
                    echo "</tr>";
                }
            ?>

            </table>

This is new design, (One line dark, one line black....)

<table class="table table-striped">

                                <!--Table Header -->
                                    <tr>
                                        <th class="t_head">ID</th>
                                        <th class="t_head">NAME</th>
                                        <th class="t_head">SEX</th>
                                        <th class="t_head">COUNTRY</th>
                                        <th class="t_head">AGE</th>
                                        <th class="t_head">TWITTER</th>
                                        <th class="t_head">INSTERGRAM</th>
                                        <th class="t_head">SNAPCHAT</th>
                                        <th class="t_head">DETAILS</th>
                                    </tr>

                                <!--Row 01 -->  
                                    <tr class="t_light">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                <!--Row 02 -->  
                                    <tr class="t_dark">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                <!--Row 03 -->  
                                    <tr class="t_light">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                <!--Row 04 -->  
                                    <tr class="t_dark">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                <!--Row 05 -->  
                                    <tr class="t_light">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                </table>

A part of css file;

.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th
{
    background: #e0dfdf;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td
{
    background: #f7f7f7;
}

Answer 1

You can do it as follows

<table align="center" width="1200" height="370" cellpadding="7">
    <tr>
        <th class="t_head">ID</th>
        <th class="t_head">NAME</th>
        <th class="t_head">SEX</th>
        <th class="t_head">COUNTRY</th>
        <th class="t_head">AGE</th>
        <th class="t_head">TWITTER</th>
        <th class="t_head">INSTERGRAM</th>
        <th class="t_head">SNAPCHAT</th>
        <th class="t_head">DETAILS</th>
    </tr>
    <?php
    $i=1;
    foreach($db->query('SELECT * FROM uyeler ORDER BY RAND()LIMIT 20') as $row) {
        if ($i%2!=0)
            $class="t_light";
        else
            $class="t_dark";
        echo "<tr class='".$class."'><td>" .$row['id'] . "</td>";
        echo "<td>" .$row['fname'] . "</td>";
        echo "<td>" .$row['sex'] . "</td>";
        echo "<td>" .$row['country'] . "</td>";
        echo "<td>" .$row['age'] . "</td>";
        echo "<td>" .$row['twitter'] . "</td>";
        echo "<td>" .$row['instagram'] . "</td>";
        echo "<td>" .$row['snapchat'] . "</td>";
        echo ('<td><a href="details.php?id=' .$row['id'] . '" title="Panel">Details</a></td>');
        echo "</tr>";
        $i++;
    }
    ?>
</table>

What I have done is that, inside the for each loop I checks whether each of the iteration is wwhether odd or even and applies the class appropriately.

I think, you are using such a code to style alternate rows differently. This can be done with CSS selectors. No need for adding separate classes for rach rows.

In pure CSS you can do the following:

//for even
tr:nth-child(even) {
    background-color: #000000;
}
//for odd
tr:nth-child(odd) {
    background-color: #FFFFFF;
}