经管之家App
让优质教育人人可得
立即打开
在HTML中，表格由行和列共同组成。通过使用特定标签可以实现表格的构建：
全部版块
我的主页
收藏
<table> 标签用于定义整个表格；<tr> 标签表示表格中的一行；<td> 标签代表单元格，即列的内容。下面是一个包含两行两列的简单表格示例代码：
<table border="2"> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>18</td> </tr> </table>
请在指定区域（Begin-End之间）编写代码，创建一个边框宽度为5px的表格，内容需与效果图一致。
预期效果如下：
<table border="5"> <tr> <td>姓名</td> <td>语文</td> <td>数学</td> </tr> <tr> <td>李四</td> <td>90</td> <td>95</td> </tr> </table>
为了使表格更美观且适应页面布局，可使用 width 和 height 属性来控制其尺寸。
例如，以下代码将表格宽度设为200像素，高度设为100像素：
<table border="2" width="200" height="100"> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>18</td> </tr> </table>
在代码区域内创建一个表格，要求如下：
border – width – height；最终展示内容应为：
| 姓名 | 语文 | 数学 | 英语 | 合计 |
| 李四 | 90 | 95 | 80 | 265 |
<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>
尽管已设置了表格的大小，但内容紧贴边框会影响视觉体验。此时可通过 cellpadding 属性增加单元格内容与边框之间的空白区域。
该属性值决定了单元格内部留白的宽度，图示如下：
其中灰色区域即为 cellpadding 所控制的部分。
示例代码：
<table border="2" cellpadding="20"> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>18</td> </tr> </table>
在指定区域完成以下任务：
cellpadding 值为6；border – cellpadding。显示内容需与下表相同：
| 姓名 | 语文 | 数学 | 英语 | 合计 |
| 李四 | 90 | 95 | 80 | 265 |
<!-- ********* Begin ********* -->
除了基本结构和样式外，HTML还支持更多高级特性：
<caption> 可以为表格添加标题；rowspan 属性让一个单元格跨越多行；colspan 实现单元格横向扩展至多个列。结合上述知识点，可以设计出结构清晰、布局合理的复杂表格。建议在实际练习中尝试组合使用宽度、高度、cellpadding、rowspan、colspan等属性，以掌握完整的表格构建技巧。
在HTML中，表格的呈现效果可以通过多种属性进行调整。为了优化视觉效果，常常需要对单元格间距进行控制。其中，cellspacing 属性用于设置单元格之间的空白距离。当该值较大时，表格看起来会显得松散，甚至出现“双层边框”的错觉；而将其设为0，则可使边框合并为单一线条，提升整体紧凑感。
如下图所示，双箭头所指的距离即为 cellspacing 的设定值：
通过将 cellspacing="0" 应用于表格标签，即可实现边框合一的效果。示例代码如下：
<table border="2" cellspacing="0" cellpadding="10"> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>18</td> </tr> </table>
实际渲染效果如下：
接下来，在指定区域创建一个符合要求的表格：边框宽度为1px，内边距（cellpadding）为10，单元格间距（cellspacing）为0，并包含相应的学生成绩数据。
| 姓名 | 语文 | 数学 | 英语 | 合计 |
| 李四 | 90 | 95 | 80 | 265 |
此外，为了增强表格的可读性与语义化表达，通常会在表格上方添加标题。HTML提供了 <caption> 标签专门用于定义表格标题，且该标签必须紧跟在 <table> 开始标签之后。
例如：
<table border="2" cellspacing="0" cellpadding="10"> <caption>班级成绩</caption> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>18</td> </tr> </table>
其显示效果如下：
现在，在已有表格结构中加入标题“科目成绩”，具体实现如下：
| 姓名 | 语文 | 数学 | 英语 | 合计 |
| 李四 | 90 | 95 | 80 | 265 |
6. 表格中 rowspan 属性的应用
在 HTML 表格中，可以通过使用 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>
显示效果如下：
代码解析：第一行第一列中的“科目”设置了 rowspan="3"，表示该单元格纵向跨越三行，因此接下来两行的第一列不再重复填写内容，而其余列正常显示对应数据。
编程任务说明：
请在指定区域内补全代码，以实现以下结构的表格展示。
预期效果如下：
<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>
7. 表格中 colspan 属性的使用
HTML 中的 colspan 属性用于定义单元格横向跨越的列数，使单个单元格能够覆盖多个相邻列，适用于标题合并等场景。
参考代码如下：
<table border="2" cellspacing="0" width="200">
<tr>
<td colspan="3">科目</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>75</td>
</tr>
</table>
呈现效果如下：
代码说明：首行的“科目”单元格通过 colspan="3" 实现跨三列显示，因此该行后续两个单元格无需再写入内容，其他行保持原有结构不变。
编程练习要求：
完善从 Begin 到 End 之间的代码部分，达到如下所示的视觉效果。
目标效果如下：
<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>
8. 表格的综合案例※
相关知识
本节内容旨在对之前所学的表格知识进行总结与延伸。通过前面的学习，相信大家已经具备了创建基本表格的能力。
这里将介绍一个用于控制表格内文本排列方向的CSS属性。虽然HTML中表格原本有align属性可用于设置对齐方式，但目前大多数浏览器已不再支持该属性，取而代之的是使用CSS中的text-align属性来实现文本对齐效果。
你可能已经注意到，在默认情况下，表格中的内容通常是左对齐的。当表格宽度较大时，这种左对齐现象尤为明显。这是因为表格元素默认采用了左对齐的文本布局方式。
为了让表格内容居中显示，可以使用如下CSS样式：
<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 属性详解
text-align 属性支持以下几个常用值：
你可以尝试在表格中应用这些不同的值，观察其呈现效果的差异。
编程要求
在指定的 Begin-End 区域内完成以下表格的创建，具体要求如下：
注意：在编写表格属性时，请严格按照上述顺序书写属性，以确保结构规范。
以下是实现样式的参考代码：
<style>
body {
margin: 30px;
}
table {
/* 文本居中对齐 */
text-align: center;
}
</style>
实际表格结构如下：
<!-- 设置表格 -->
<table border="2" width="100%" cellspacing="0" cellpadding="6">
<caption>本周财政计划</caption>
<tr>
<td colspan="2" rowspan="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>
</table>
在进行文章内容优化的过程中，重点在于保持原意不变的前提下，对文本进行有效的降重与伪原创处理。通过调整语序、替换同义词、重组段落结构等方式，可以显著降低重复率，同时确保信息传达的准确性和完整性。
为了达到理想的优化效果，需遵循一定的处理原则。首先，必须保证修改后的内容重复度控制在50%以下，尽可能实现内容的打乱与重构。其次，在语言表达上进行合理变换，但不得偏离原文的核心意思。任何可能导致语义偏差的改动都应避免。
在结构排版方面，应对文本进行清晰的段落划分与规整，提升整体可读性。同时，允许对段落顺序进行适当调整，以增强逻辑流畅度。需要注意的是，若原文中包含图片标记（如），其位置必须随所在段落同步移动，确保图文对应关系不被破坏。
最终输出结果将以HTML格式呈现，所有内容置于body标签内。特别提醒：所有引导关注、添加私人联系方式、索取资源等具有引流性质的内容将被直接清除，不予保留。
扫码加好友，拉您进群
