HTML，CSS - 显示表

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.'&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.

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