头歌：HTML——表格：第6关：表格——＜td＞标签的 rowspan 属性

我的水卡丢了

于 2022-11-03 16:29:02 发布

阅读量1.3k

点赞数 1

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_61690708/article/details/127673132

版权

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

相关知识

先看一个例子。如下所示：

<table border="2" cellspacing="0" width="200">
<tr>
<td>科目</td>
<td>语文</td>
<td>80</td>
</tr>
<tr>
<td>科目</td>
<td>数学</td>
<td>70</td>
</tr>
<tr>
<td>科目</td>
<td>英语</td>
<td>75</td>
</tr>
</table>

效果如下：

很明显，科目是包括语文、数学、英语的，这个在表格中怎么表示呢？

你可以用<td>标签的rowspan属性来实现，它规定了单元格可横跨的行数。

代码如下：

<table border="2" cellspacing="0" width="200" >
<tr>
<td rowspan="3">科目</td>
<td>语文 </td>
<td>80</td>
</tr>
<tr>
<td>数学</td>
<td>70</td>
</tr>
<tr>
<td>英语</td>
<td>75</td>
</tr>
</table>

效果如下：

这里分析一下代码，第一行第一列的 <td rowspan="3">科目</td>表示科目横跨了3行，所以第二行和第三行的第一列就不写了，第二列和第三列不变。

编程要求

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

测试说明

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

赶快试一下吧！！！

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


        
    <!-- ********* End ********* -->
    </table>
</body>
</html>

我的水卡丢了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
头歌：HTML——表格：第6关：表格——＜td＞标签的 rowspan 属性

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；很明显，科目是包括语文、数学、英语的，这个在表格中怎么表示呢？行，所以第二行和第三行的第一列就不写了，第二列和第三列不变。本关任务：在前几关的基础上，完成下面的表格创建任务。区域内进行代码补充，完成一个表格的创建任务。属性来实现，它规定了单元格可横跨的行数。请仔细阅读右侧代码，结合相关知识，在。这里分析一下代码，第一行第一列的。
复制链接

扫一扫