头歌：HTML——表格：第4关：表格的属性——cellspacing

最新推荐文章于 2024-10-21 15:11:01 发布

原创最新推荐文章于 2024-10-21 15:11:01 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #java

本文介绍如何使用HTML创建一个带有特定边框、间距和填充的表格，并通过设置cellspacing为0来实现整洁的单边框效果。

任务描述

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

实现的效果如下：

相关知识

前面表格看起来就好像有两个边框一样，怎么让它变成一条边框呢？

这里用到了表格的另一个属性cellspacing，它规定了单元格之间的空间。

这里用图来说明，如图所示：

双箭头的大小表示cellspacing属性的值。

只需把cellspacing的值设为0就可以实现上面的效果。

代码如下：

<table border="2" cellspacing="0" cellpadding="10">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
</table>

效果如下：

编程要求

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

测试说明

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

赶快试一下吧！！！

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