html牛刀小试

表格图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
            ul {
                list-style: none;
            }
    </style>
</head>
<body>
<table border="1px" align="center"  style="border-collapse: collapse; border:1px solid blue">
    <tr>
        <td colspan="3" align="center">星期一菜谱</td>
    </tr>
    <tr>
       <td rowspan="2">素菜</td>
        <td>情操茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
       <td rowspan="2">荤菜</td>
        <td>油焖大虾</td>
        <td>海参鱼刺</td>
    </tr>
    <tr>
        <td>
            红烧肉
            <img src="rourou.png" alt="">
        </td>
        <td>烤全羊</td>

    </tr>
</table>

<hr>

<table border="1px" align="center" width="500px" style="border-collapse: collapse;border:1px solid blueviolet">
    <caption align="center">课程表</caption>
    <tr align="center">
        <td>项目</td>
        <td colspan="6">上课</td>
        <td>休息</td>
    </tr>
    <tr align="center">
        <td>星期</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
        <td>星期日</td>
    </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>

图片实例:

posted @ 2020-09-15 19:14  Lance_王  阅读(137)  评论(0编辑  收藏  举报