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前端第一天作業