請建立一份HTML文件,檔名為member.html
。請用VS Code編輯。
請在文件中建立如下的個人資料表填寫表格。
現有的CSS internal style sheet如下。
table {
border-collapse: collapse;
width: 40%;
}
table, th, td {
border: solid 1px;
}
th, td {
padding: 3px;
}
規格說明
表格標題,輸入欄位,下拉選單的標題背景為橘色(orange)
輸入標題請使用<label>
並與右方的輸入欄位或下拉選單關聯。也就是用滑鼠點擊選輸入標題則右方的輸入欄位必須被focus並顯示輸入游標,如上例圖所示。
地址輸入欄位的長度為60。
下拉選單的值與顯示內容的關係如下:
值 |
文字內容 |
1 |
A |
2 |
B |
3 |
AB |
4 |
O |
5 |
其他 |
提示:
HTML <label> 標籤元素。
HTML 使用colspan屬性合併表格欄位。
HTML <input> size屬性。
HTML <select> 選單元素。
解答:
<!DOCTYPE html>
<html>
<head>
</head>
<style>
table {
border-collapse: collapse;
width: 40%;
}
table, th, td {
border: solid 1px;
}
th, td {
padding: 3px;
}
.caption {
background-color: orange;
}
</style>
<body>
<table>
<thead>
<tr>
<th colspan="4" class="caption">會員資料</th>
</tr>
</thead>
<tbody>
<tr>
<td class="caption"><label for="name">姓名:</label></td>
<td><input id="name" type="text"></td>
<td class="caption"><label for="blood">血型:</label></td>
<td><select id="blood">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">AB</option>
<option value="4">O</option>
<option value="5">其他</option>
</select></td>
</tr>
<td class="caption"><label for="addr">地址:</label></td>
<td colspan="3"><input id="addr" type="text" size="60"></td>
</tbody>
</table>
</body>
</html>
沒有留言:
張貼留言