HTML, CSS - Display table - php

Question

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.' '.$value2['easy'].'<br>';
echo $key.' '.$value2['normal'].'<br>';
echo $key.' '.$value2['hard'].'<br>';
}
}
echo '</table>';
For now I have this type of display.
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.

Answer 1

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/

Answer 2

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>';

Answer 3

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>';
}
?>