Html+CSS - 1段CSS让表格更漂亮建议收藏

5行CSS样式码，让你的表格更加漂亮，先放最终效果：

最终样式

HTML表格代码如下：

<table class="style-table">
        <thead>
            <tr>
                <th>序号</th>
                <th>物品名称</th>
                <th>金额</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>洗衣粉</td>
                <td>15.00</td>
                <td>自己用</td>
            </tr>
            <tr class="active-row">
                <td>2</td>
                <td>洁尔阴</td>
                <td>25.00</td>
                <td>老婆用</td>
            </tr>
            <tr >
                <td>3</td>
                <td>搓衣板</td>
                <td>5.00</td>
                <td>自己用</td>
            </tr>
        </tbody>
    </table>

CSS代码如下：

现代网页设计中，表格依然扮演着不可或缺的角色。无论是数据展示、报表制作还是复杂布局，合理运用HTML中的<table>标签可以极大地提升网页的信息结构和用户体验。本文将详细解析HTML表格的高级技巧和创新应用，帮助开发者和设计师精确掌握使用HTML表格的最佳实践。

1. HTML表格基础

1.1 表格结构简介

HTML表格由<table>标签创建，基本结构包括<thead>、<tbody>、<tfoot>和<tr>（表格行），以及<th>（表头单元格）和<td>（表格单元格）。

1.2 创建一个简单的表格

<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

这个例子展示了一个包含标题和两行数据的基本表格。

2. 样式化表格

2.1 使用CSS增强表格视觉

为表格添加CSS样式可以提升其视觉效果。例如，可以通过以下CSS代码增加边框、调整文字对齐方式，以及改善表格的颜色和间隔。

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
thead {
    background-color: #f2f2f2;
}

2.2 响应式表格

在移动设备上查看时，表格应能自动调整以适应不同的屏幕尺寸。可以使用CSS的媒体查询来实现响应式表格，或者利用JavaScript进行更复杂的操作。

3. 高级技巧和应用

3.1 合并单元格

使用rowspan和colspan属性可以合并行或列，创建跨多个行或列的单元格，这对于汇总信息特别有用。

<tr>
    <td rowspan="2">合并行</td>
    <td>数据1</td>
    <td>数据2</td>
</tr>
<tr>
    <td>数据3</td>
    <td>数据4</td>
</tr>

3.2 交互式表格

通过JavaScript和AJAX，可以实现表格的动态数据加载和更新，这对于需要实时数据显示的应用尤为重要。

4. 结语

掌握HTML表格的使用和优化不仅能提升网页的功能性和美观，还能改善用户的浏览体验。随着技术的不断进步，我们预见表格在网页设计中的应用将更加灵活和强大。

结尾部分：
希望本文能为你在使用HTML表格时提供新的视角和方法。记得实践是检验真理的唯一标准，不断尝试和优化，是每个网页设计师和开发者成长的必经之路。

格元素详解与练习

提到表格，大家最先想到的就是EXCEL这款软件，实际上在对表格的操作上，HTML与EXCEL非常相似。

在展示数据，统计数据方面，表格比文字描述更具表达优势，在网页中，表格也经常被用来展示数据、计划日常安排等内容。如图所示：

今天我们就来学习一下如何向页面中添加表格元素。

首先来介绍一下表格元素中的基本标签。

NO.1：<table></table>

这个标签是书写表格的第一个标签，它本身在页面上看不出什么内容，但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头，结尾标签写在表格元素的结尾。

NO.2：<caption></caption>

这个标签是表格的标题标签。

NO.3：<tr></tr>

这个标签定义表格的列标签。

NO.4：<th></th>

这个标签是列表标题标签，例如，男生、女士、姓名等。

NO.5：<td></td>

这个标签定义表格的行标签。

OK，这些基本标签就可以构建一个基础的表格元素。示例代码如下：

页面效果如图所示：没有表格的外边框。

如何添加外边框呢？在<table>标签中修改border属性即可，示例代码如下：border="1"是给表格添加宽为1的边界线。

<table border = "1"><!-- border="1"是给表格添加宽为1的边界线 -->

效果如图所示：

这时，您会发现表格在页面上的尺寸非常小，可不可以按照页面尺寸来显示表格吗？当然可以，这就需要为<table>标签修改第二个属性width，示例代码如图所示：width = "100%"指的是表格宽度与平面宽度一致。

<table border = "1" width = "100%"><!-- width = "100%"指的是表格宽度与平面宽度一致 -->

效果如图所示：

ok！今天的讲解先到这里，明天我会继续为大家讲解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三个标签，以及合并单元格操作。

今天的完整代码示例如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body><h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
  <caption>表格标题</caption>
<tr>
  <th>姓名</th>
<th>年龄</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>

正所谓万丈高楼平地起，html技术虽然简单，但是内容相对繁琐，也是以后进一步学习网页制作的基础，希望大家动手写每一段代码，把每一步踩坚实。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：「HTML」操作表格
下一篇：web前端HTML教程-开发环境搭建下载和安装编辑器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Html+CSS - 1段CSS让表格更漂亮 建议收藏