头歌：HTML——表格：第8关：表格的综合案例

最新推荐文章于 2025-11-29 21:32:25 发布

原创最新推荐文章于 2025-11-29 21:32:25 发布 · 8k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

本文介绍如何使用HTML和CSS创建一个居中对齐的复杂表格，并详细解释了表格属性如border、cellspacing、cellpadding等的使用方法。

任务描述

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

创建表格的要求如下：

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

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

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

实现的效果如下：

相关知识

这关是对大家前面所学知识的一个总结和拓展，通过前面的学习，做一个表格是没有问题的。

这里介绍一个控制表格内文本方向的属性，本来表格有自带的属性align也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性text-align来代替。

不知你们有没有发现，表格的内容都是靠左的，在表格宽度比较大的情况下是很明显的。这里因为表格默认的文本方向是向左。

现在让文本居中，例子如下：

<style>
table{
text-align: center;
}
</style>
<table border="2" cellspacing="0" width="300">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
</table>

效果图如下：

这样是不是效果要好一些。下面介绍一个这个属性。

text-align属性有下面的几个值：

left：左对齐；
center：居中对齐；
right：右对齐；
justify：两端对齐。

这几个值大家可以在表格里试一下，看看有什么不一样的。

编程要求

请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个表格的创建任务。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。

赶快试一下吧！！！

<!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>