当前位置：首页 > 源码资料 > 正文内容

html表格制作及实例，HTML表格制作入门与实例解析

wzgly2个月前 (06-25)源码资料1

本文介绍了HTML表格的制作方法，包括表格的基本结构、标签的使用以及如何添加行和列，通过实例演示了如何创建一个简单的表格，并展示了如何使用CSS样式美化表格，还介绍了如何使用表格进行数据排序和筛选，以及如何处理表格中的数据，通过学习本文，读者可以掌握HTML表格的制作技巧，为网页设计和数据展示提供便利。

HTML表格制作及实例详解

用户解答： 嗨，大家好！最近我在学习HTML，遇到了一个挺有意思的问题——如何制作HTML表格，我查了一些资料，但还是不太明白，表格的基本结构是什么？如何添加行和列？还有，表格的样式该如何设置呢？希望有大神能帮我解答一下，谢谢！

我将从以下几个方面为大家地讲解HTML表格的制作及实例。

一：表格的基本结构

表格标签：使用<table>标签来创建一个表格。
行标签：使用<tr>标签来创建表格的行。
单元格标签：使用<td>标签来创建表格的单元格。
表头标签：使用<th>标签来创建表格的表头单元格，通常用于显示标题信息。

二：添加行和列

添加行：在<table>标签内部，使用多个<tr>标签来创建多行。
添加列：在每行<tr>标签内部，使用多个<td>或<th>标签来创建多列。
跨行和跨列：使用rowspan和colspan属性来设置单元格的跨行和跨列。
合并单元格：使用rowspan和colspan属性可以实现单元格的合并。

三：表格样式设置

表格宽度：使用width属性来设置表格的宽度，可以是像素值或百分比。
表格边框：使用border属性来设置表格的边框宽度。
单元格间距：使用cellspacing属性来设置单元格之间的间距。
单元格边距：使用cellpadding属性来设置单元格内的边距。

四：表格实例

简单表格：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>程序员</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>设计师</td>
    </tr>
</table>

跨行和跨列表格：

<table border="1">
    <tr>
        <th rowspan="2">姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <th>籍贯</th>
        <th colspan="2">联系方式</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
        <td>电话：138xxxx1234</td>
        <td>邮箱：zhangsan@example.com</td>
    </tr>
</table>

带样式的表格：

<style>
    table {
        width: 50%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>程序员</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>设计师</td>
    </tr>
</table>

通过以上讲解,相信大家对HTML表格的制作及实例有了更深入的了解，希望这篇文章能帮助到正在学习HTML的你！

其他相关扩展阅读资料参考文献：

表格基础结构

基本标签使用：HTML表格由、、

、

等标签组成，其中定义表格，定义行，标签在

定义数据单元格，	定义表头单元格。必须注意：表格结构需遵循“行内单元格”原则，避免直接嵌套

中。

表格结构设计：合理使用

、、划分表头、主体和页脚。表格的结构设计直接影响可读性和SEO优化，尤其在数据量较大时，分段展示能提升用户体验。

合并单元格技巧：通过和实现单元格合并。合并单元格需确保相邻单元格内容逻辑连贯，避免因合并导致数据错位，表头合并需在

中使用colspan属性。

表格样式美化

内联样式与CSS类：直接使用style属性或CSS类定义表格样式。内联样式虽可快速生效，但不利于维护；推荐通过CSS类统一管理样式，如.table-style { border: 1px solid #000; }。
表格边框与背景颜色：通过CSS设置表格边框（border-collapse: collapse）和背景色（background-color）。边框合并能消除多余边框线，使表格更整洁。
单元格对齐方式：使用text-align和vertical-align属性控制文本和垂直对齐。对齐方式类型匹配，如文本居中对齐适合表头,左对齐适合数据列。

表格布局技巧

宽度与高度设置：通过width属性定义列宽，或使用百分比实现自适应布局。宽度设置需避免固定值导致的移动端显示异常，建议结合min-width和max-width。
表格的边框合并：使用border-collapse: collapse属性合并相邻边框。边框合并能减少视觉干扰，但需注意与border属性的兼容性问题。
表格的嵌套：在复杂场景中使用嵌套表格划分区域。嵌套表格需控制外层表格的border-spacing属性，避免内层表格错位,将表头作为嵌套表格嵌入主体中。

表格交互功能

表格排序功能：通过JavaScript实现点击表头排序。排序功能需为

绑定事件，利用sort()方法对数据进行重新排列，使用数组存储数据并动态更新tbody内容。

表格筛选功能：通过input框和filter方法实现数据筛选。筛选功能需为表头添加搜索框，并用querySelectorAll获取数据行，再根据条件隐藏或显示行。

表格数据绑定：使用JavaScript动态绑定数据，避免手动写入标签。数据绑定需将数据转换为HTML元素，如用map()遍历数组生成和

,结合AJAX获取数据后实时渲染表格。

表格响应式设计

媒体查询适配：通过@media规则调整表格布局。媒体查询需设置最大宽度（如max-width: 600px），将表格转换为垂直列表，使用display: block和width: 100%实现自适应。
表格自适应布局：使用CSS表格属性（table-layout: fixed）控制列宽。自适应布局需为列设置width百分比，确保在不同屏幕尺寸下内容不溢出。
移动端优化技巧：使用flex布局或grid布局替代传统表格。移动端优化需隐藏复杂列，用按钮展开，或通过滚动条控制横向内容，用overflow-x: auto实现横向滚动。

表格实例应用

基础表格实例：创建包含表头、行和数据的简单表格。基础实例需确保数据与表头一一对应，避免列数不匹配导致错位。
```
<table>
  <tr><th>姓名</th><th>年龄</th></tr>
  <tr><td>张三</td><td>25</td></tr>
</table>
```
样式与布局结合实例：为表格添加边框、背景色和响应式设计。结合实例需在CSS中定义样式，并测试不同设备下的显示效果。
```
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
```
交互功能增强实例：实现点击排序和筛选功能。增强实例需编写JavaScript代码，为表头绑定点击事件并动态更新数据。
```
document.querySelectorAll('th').forEach(header => {
  header.addEventListener('click', () => {
    // 排序逻辑
  });
});
```
复杂表格实例：嵌套表格与分页功能结合。复杂实例需设计多层结构，并用分页插件（如Bootstrap）控制数据展示。
```
<div class="pagination">
  <button onclick="loadPage(1)">1</button>
  <button onclick="loadPage(2)">2</button>
</div>
```
数据动态绑定实例：通过AJAX获取数据并渲染表格。动态绑定实例需在JavaScript中处理异步请求，将数据转换为HTML元素。
```
fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 动态生成表格
  });
```