Web前端第一天作業
阿新 • • 發佈：2017-07-31
cin border 下午 char highlight aps html標簽 cell 花椒
本次作業中關鍵用到的幾個html標簽：
colspan="列數" 單元格橫跨的列數
rowspan="行數" 單元格豎跨的行數
border 表格邊框
cellpadding 內邊距
cellspacing 外邊距
align="center" 字體居中
題目一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星期一菜譜</title>
</head>
<body>
<table border="1" cellspacing="0" style="border-color:#fd7bd7" cellpadding="5">
<tr>
<td colspan="3" align="center"> 星期一菜譜</td>
</tr>
<tr align="center">
<td rowspan="2">素菜</td>
<td>青炒茄子</td>
<td>花椒扁豆</td>
</tr>
<tr align="center">
<td>小蔥豆腐</td>
<td>炒白菜</td>
</tr>
<tr align="center">
<td rowspan="2"> 葷菜</td>
<td>油燜大蝦</td>
<td>海參魚翅</td>
</tr>
<tr align="center">
<td> 紅燒肉<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2846773786,1909168706&fm=58"></td>
<td>烤全羊</td>
</tr>
</table>
</body>
</html>
效果如下：
題目二：課程表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>課程表</title>
</head>
<body>
<p align="center">課程表</p>
<table align="center" border="1" style="border-color:#362ae1">
<tr align="center" >
<th>項目</th>
<th colspan="5">上課</th>
<th colspan="2">休息</th>
</tr>
<tr align="center" >
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr align="center" >
<td rowspan="4">上午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
<td rowspan="4">休息</td>
</tr>
<tr align="center" >
<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
</tr>
<tr align="center" >
<td>化學</td>
<td>語文</td>
<td>體育</td>
<td>計算機</td>
<td>英語</td>
<td>計算機</td>
</tr>
<tr align="center" >
<td>政治</td>
<td>英語</td>
<td>體育</td>
<td>歷史</td>
<td>地理</td>
<td>計算機</td>
</tr>
<tr align="center" >
<td rowspan="2">下午</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>英語</td>
<td>物理</td>
<td>計算機</td>
<td rowspan="2">休息</td>
</tr>
<tr align="center" >
<td>數學</td>
<td>數學</td>
<td>地理</td>
<td>歷史</td>
<td>化學</td>
<td>計算機</td>
</tr>
</table>
</body>
</html>
效果如下：
Web前端第一天作業