HTML——表格 ※学习【头歌educoder】

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

表格的基本构成与常用属性详解

一、创建基础表格结构

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

编程任务二：设定宽高并规范属性顺序

在代码区域内创建一个表格，要求如下：

• 边框为1px；
• 宽度设置为100%；
• 高度为200px；
• 属性书写顺序为：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 属性增加单元格内容与边框之间的空白区域。

该属性值决定了单元格内部留白的宽度，图示如下：

其中灰色区域即为 cellpadding 所控制的部分。

示例代码：

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

编程任务三：配置cellpadding属性

在指定区域完成以下任务：

• 创建一个表格；
• 设置边框为2px；
• 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 属性支持以下几个常用值：

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

你可以尝试在表格中应用这些不同的值，观察其呈现效果的差异。

编程要求

在指定的 Begin-End 区域内完成以下表格的创建，具体要求如下：

• 边框宽度为 2px；
• 表格宽度设置为 100%；
• cellspacing 设置为 0；
• cellpadding 设置为 6；
• 表格标题内容为“本周财政计划”；

注意：在编写表格属性时，请严格按照上述顺序书写属性，以确保结构规范。

以下是实现样式的参考代码：

<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标签内。特别提醒：所有引导关注、添加私人联系方式、索取资源等具有引流性质的内容将被直接清除，不予保留。

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：code HTML htm der COD