1. 程式人生 > >Web前端第一天作業

Web前端第一天作業

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