[英]HTML, CSS - Display table
我正在使用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.' '.$value2['easy'].'<br>';
echo $key.' '.$value2['normal'].'<br>';
echo $key.' '.$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
任何想法都將非常感激。
您可以使用colspan
將表標題跨越兩列以獲取它們下面的信息,然后在單元格中echo
顯相應的變量和信息:
嘗試以這種方式修改您的代碼:
<?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>';
正如在接受的答案中建議的那樣你應該使用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>';
}
?>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.