HTML——表格

第1关：表格的基本构成本关任务：创建你的第一个表格，它的边框宽度为5px，内容和效果图展示的一样。实现的效果如下：<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><t

Meropidae

11096人浏览 · 2021-11-29 17:43:25

Meropidae · 2021-11-29 17:43:25 发布

第1关：表格的基本构成

本关任务：创建你的第一个表格，它的边框宽度为5px，内容和效果图展示的一样。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
        <table border="5">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
        </tr>
    </table>
    <!-- ********* End ********* -->
</body>
</html>

第2关：表格的属性——宽、高

本关任务：创建一个表格，设置它的宽为100%，高为200px，边框为1px，内容和效果图展示的一样。

设置属性的先后顺序为border -- width -- height。

这里统一不加单位，后面的关卡不需要加的也不加。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <table border="1" width="100%" height="200">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
        </tr>
    </table>
        
    <!-- ********* End ********* -->
</body>
</html>

第3关：表格的属性——cellpadding

本关任务：创建一个表格，它的边框宽度为2px， cellpadding值为6，内容和效果图展示的一样

属性的先后顺序为：border -- cellpadding。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <table border="2" cellpadding="6">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
        </tr>
    </table>
    <!-- ********* End ********* -->
</body>
</html>

第4关：表格的属性——cellspacing

本关任务：创建一个表格，它的边框宽度为1px，cellpadding值为10，cellspacing值为0，内容和效果图展示的一样。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <table border="1" cellspacing="0" cellpadding="10">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
        </tr>
    </table>     
    <!-- ********* End ********* -->
</body>
</html>

第5关：表格的标题

本关任务：添加一个表格标题，内容为科目成绩。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="0">
        <!-- ********* Begin ********* -->
        <caption>科目成绩</caption>
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
        </tr>
    </table>
        <!-- ********* End ********* -->
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>合计</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>95</td>
            <td>80</td>
            <td>265</td>
       </tr>
    </table>
</body>
</html>

第6关：表格——<td> 标签的 rowspan 属性

本关任务：在前几关的基础上，完成下面的表格创建任务。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
        <table border="2" cellspacing="0" width="200">
    <!-- ********* Begin ********* -->
        <tr>
            <td>商品 </td>
            <td>数量</td>
            <td>单价</td>
            
            <td>备注</td>
        </tr>
        <tr>
            <td>短袖</td>
            <td>70</td>
            <td>30</td>
            <td rowspan="2">无</td>
        </tr>
        <tr>
            <td>裤子</td>
            <td>50</td>
            <td>30</td>
        </tr>
    </table>        
    <!-- ********* End ********* -->
    </table>
</body>
</html>

第7关：表格——<td>标签的colspan属性

本关任务：结合前几关的知识，完成以下表格的创建任务。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="2" cellspacing="0" width="200">
    <!-- ********* Begin ********* -->
        <tr>
            <td>商品 </td>
            <td>数量</td>
            <td>单价</td>         
        </tr>
        <tr>
            <td>短袖</td>
            <td>70</td>
            <td>30</td>            
        </tr>
        <tr>
            <td>裤子</td>
            <td>50</td>
            <td>30</td>
        </tr>
        <tr>
            <td>合计</td>
            <td colspan="2">3600 </td>
        </tr>
    <!-- ********* End ********* -->
    </table>
</body>
</html>

第8关：表格的综合案例

本关任务：按照以下要求，完成一个复杂的表格创建任务。

创建表格的要求如下：

边框为2px；
宽为100%；
cellspacing为0；
cellpadding为6；
标题内容为本周财政计划；
在 <style> 标签里设置文本为居中对齐。

其它内容和效果图展示的一样。

注意：表格属性的顺序按照创建表格的要求的顺序来写。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <style>
    body{
       margin:30px;
    }
    table{
       /*居中对齐*/
        text-align: center;     
    }
    </style>
    <!--设置表格-->
    <caption>本周财政计划</caption>
    <table border="2" cellspacing="0" cellpadding="6" width="100%">
        <caption>本周财政计划</caption>
    <tr>
        <td rowspan="2"colspan="2">项目 </td>
        <td colspan="2">本周发生</td>
        <td rowspan="2">备注</td>
    </tr>
    <tr>
        <td>收入</td>
        <td>支出</td>
    </tr>
    <tr>
        <td rowspan="3">收入</td>
        <td>贷款收回</td>
        <td>8700</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td>内部转款</td>
        <td>6000</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td>收入合计</td>
        <td>14700</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="3">支出</td>
        <td>采购支出</td>
        <td>0</td>
        <td>5000</td>
        <td></td>
    </tr>
    <tr>
        <td>工资支出</td>
        <td>0</td>
        <td>7000</td>
        <td></td>
    </tr>
    <tr>
        <td>支出合计</td>
        <td>0</td>
        <td>12000</td>
        <td></td>
    </tr>         
    <!-- ********* End ********* -->
</body>
</html>

求求三连。。