HTML，CSS - Display table

Question

我使用HTML表格来显示用户名，测验ID和分数。

这是我的代码。

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

现在我有这种类型的显示器。

我不知道该如何操作表，并得到这种结果。

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

任何想法将不胜感激。

Answer 1

您可以使用colspan表格标题跨越他们跨两个栏下面显示的信息，然后echo相应的变量和信息在细胞：

http://jsfiddle.net/omzc6211/

Answer 2

如建议在公认的答案你应该使用colspan，但这里的非常情况下，代码：

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

Answer 3

尝试修改你的代码是这样的：

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