CODEWITHSUNDEEP
phphtmlcss
yowza
yowza

Reputation: 260

HTML, CSS - Display table

I'm using HTML tables to display the name of a user, quiz id, and score.

And this is my code.

<?php 
echo '<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
</style>';

$data = array();

$userid = 1;

$data[$userid] = array();

$name = 'Davy Jones';

$data[$userid]['name'] = $name;

$quiz = array(
            'Qz1' => array(
                    'easy' => 1,
                    'normal' => 2,
                    'hard' => 3,
                    ),
            'Qz2' => array(
                    'easy' => 4,
                    'normal' => 5,
                    'hard' => 6,
                    ),
            );

$data[$userid]['quizzes'] = $quiz;

echo '<table style="width: 40%">';

echo '<tr>
<td>Name</td>
<td>Easy</td>       
<td>Normal</td>
<td>Hard</td>
</tr>
<tr>
<td></td>
<td>Score</td>      
<td>Score</td>
<td>Score</td>
</tr>';

foreach ($data as $key => $value) {
    $quizzes = $value["quizzes"];

    echo $value['name'].'<br>';

    foreach ($quizzes as $key => $value2) {
        echo $key.'&nbsp;'.$value2['easy'].'<br>';
        echo $key.'&nbsp;'.$value2['normal'].'<br>';
        echo $key.'&nbsp;'.$value2['hard'].'<br>';
    }
}

echo '</table>';

For now I have this type of display.

html table data

I don't know how to manipulate the table and get this type of result.

Name                Easy                Normal              Hard
                    Score               Score               Score
                    Qz1 Qz2             Qz1 Qz2             Qz1 Qz2
Davy Jones          1   4               2   5               3   6

Any ideas would be most appreciated.

Upvotes: 2

Views: 384

Answers (3)

Konstantin Likhachev
Konstantin Likhachev

Reputation: 56

Try to modify your code this way:

<?php
echo '
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    th, td {
        padding: 5px;
    }
</style>';

$data = array();

$userid = 1;

$data[$userid] = array();

$name = 'Davy Jones';

$data[$userid]['name'] = $name;

$quiz = array(
    'Qz1' => array(
        'easy'   => 1,
        'normal' => 2,
        'hard'   => 3,
    ),
    'Qz2' => array(
        'easy'   => 4,
        'normal' => 5,
        'hard'   => 6,
    ),
);

$data[$userid]['quizzes'] = $quiz;

echo '<table style="width: 40%">';

$quizTypes = array(
    'easy',
    'normal',
    'hard'
);

$colspan = count($quiz);

echo '
    <tr>
        <td>Name</td>
        <td colspan=' . $colspan . '>Easy</td>
        <td colspan=' . $colspan . '>Normal</td>
        <td colspan=' . $colspan . '>Hard</td>
    </tr>
    <tr>
        <td></td>
        <td colspan=' . $colspan . '>Score</td>
        <td colspan=' . $colspan . '>Score</td>
        <td colspan=' . $colspan . '>Score</td>
    </tr>
    ';

foreach ($data as $user)
{
    echo '<tr>';
    echo '<td>' . $user['name'] . '</td>';


    foreach ($quizTypes as $quizType)
    {
        foreach ($user["quizzes"] as $quizData)
        {
            echo '<td>' . (array_key_exists($quizType, $quizData) ? $quizData[$quizType] : '-') . '</td>';
        }
    }

    echo '</tr>';
}

echo '</table>';

Upvotes: 3

Andre.IDK
Andre.IDK

Reputation: 2037

As suggested in the accepted answer you should use colspan, but here's the code for your very case:

<?php 
echo '<style>
table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}
th, td {
 padding: 5px;
}
</style>';

$data = array();
$userid = 1;
$data[$userid] = array();
$name = 'Davy Jones';
$data[$userid]['name'] = $name;
$quiz = array(
        'Qz1' => array(
                'easy' => 1,
                'normal' => 2,
                'hard' => 3,
                ),
        'Qz2' => array(
                'easy' => 4,
                'normal' => 5,
                'hard' => 6,
                ),
        );
$data[$userid]['quizzes'] = $quiz;
echo '<table style="width: 40%">';
echo '<tr>
<td>Name</td>
<td colspan="2">Easy</td>
<td colspan="2">Normal</td>
<td colspan="2">Hard</td>
</tr>
<tr>
<td></td>
<td colspan="2">SCORES</td>
<td colspan="2">SCORES</td>
<td colspan="2">SCORES</td>
</tr>';

foreach ($data as $key => $value) {
 $quizzes = $value["quizzes"];
 $keys = "";
 $easy = "";
 $normal = "";
 $hard = "";
 foreach ($quizzes as $key => $value2) {
    $keys .= '<td>'.$key.'</td>';
    $easy .= '<td>'.$value2['easy'].'</td>';
    $normal .= '<td>'.$value2['normal'].'</td>';
    $hard .= '<td>'.$value2['hard'].'</td>';
 }

 echo '<tr><td></td>' . $keys . $keys . $keys . '</tr>';
 echo '<tr><td>'.$value['name'].'</td>' . $easy . $normal . $hard . '</tr></table>';
}
?>

Upvotes: 1

Tom Nolan
Tom Nolan

Reputation: 1957

You could use colspan for the table headings to span them across two columns for the information below them and then echo the appropriate variables and information in the cells:

http://jsfiddle.net/omzc6211/

Upvotes: 3

Related Questions