CSS与表格设计

在网页设计中,表格是一种不可或缺的元素,用于展示和组织数据。虽然HTML提供了基本的表格结构,但通过CSS(层叠样式表)的应用,我们可以极大地提升表格的外观和用户体验。本文将探讨如何利用CSS来设计既美观又实用的表格,包括响应式设计、美化样式、以及增强交互性。

 

## 1. 基本表格结构回顾

 

在深入CSS之前,先回顾一下HTML中表格的基本结构:

 

```html

<table>

  <thead>

    <tr>

      <th>标题1</th>

      <th>标题2</th>

      <th>标题3</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>数据1</td>

      <td>数据2</td>

      <td>数据3</td>

    </tr>

    <!-- 更多行数据 -->

  </tbody>

</table>

```

 

- `<table>`是表格的容器。

- `<thead>`定义表格的头部。

- `<tbody>`包含表格的主体内容。

- `<tfoot>`(可选)定义表格的底部,常用于汇总。

- `<tr>`代表表格中的行。

- `<th>`用于表头单元格,通常加粗显示。

- `<td>`用于普通数据单元格。

 

## 2. CSS美化表格

 

### 2.1 简单样式调整

 

基础的样式调整可以立即提升表格的视觉效果:

 

```css

table {

  border-collapse: collapse;

  width: 100%;

  margin: auto;

}

 

th, td {

  padding: 8px;

  text-align: left;

  border: 1px solid #ccc;

}

 

th {

  background-color: #f2f2f2;

  font-weight: bold;

}

```

 

- `border-collapse: collapse;`使表格边框合并,外观更整洁。

- 为所有单元格设置内边距、文本对齐和边框颜色。

- 表头背景色和字体加粗,以区分于数据行。

 

### 2.2 高级样式与效果

 

进一步提升,可以使用以下技巧:

 

- **斑马线效果**:交替行颜色,提升可读性。

  

  ```css

  tr:nth-child(even) {background-color: #f2f2f2;}

  ```

 

- **悬停效果**:增加鼠标悬停时的高亮,提升交互体验。

  

  ```css

  tbody tr:hover {background-color: #ddd;}

  ```

 

- **固定表头**:对于长表格,固定表头是一个非常实用的功能,但这需要一些高级CSS或JavaScript技术实现。

 

## 3. 响应式表格设计

 

随着移动设备的普及,响应式设计变得至关重要。对于表格,可以采用以下策略:

 

- **水平滚动**:当屏幕空间有限时,可以将表格放在一个具有水平滚动条的容器中,保持列宽不变。

 

  ```css

  @media screen and (max-width: 600px) {

    table {

      width: auto;

      overflow-x: auto;

    }

  }

  ```

 

- **堆叠列**:在极小的屏幕上,可以考虑将表格转换为堆叠式布局,每行显示一个标题-值对。

 

  这通常需要改变HTML结构或使用JavaScript辅助实现。

 

## 4. 结论

 

通过上述CSS技巧,我们不仅能创建出既美观又实用的表格,还能确保它们在不同设备上的良好表现。记住,设计时应始终考虑用户体验,确保数据的易读性和可访问性。随着CSS技术的发展,还有更多创新的方法等待我们去探索和应用,让数据的展现更加生动和高效。

 

 

当然,下面我将提供三个具体的CSS样式示例,分别展示不同的表格设计风格,以帮助您更好地理解和应用之前讨论的技巧。

### 示例1:简洁现代风表格

这个示例展示了一个简洁而现代的表格设计,适合大多数网站的数据展示需求。

```css
/* 简洁现代风 */
.table-modern {
  width: 100%;
  border-collapse: collapse;
}

.table-modern th,
.table-modern td {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: left;
}

.table-modern th {
  background-color: #f2f2f2;
  font-size: 18px;
  color: #333;
}

.table-modern tr:nth-child(even) {
  background-color: #f8f8f8;
}

.table-modern tr:hover {
  background-color: #eaeaea;
}
```

### 示例2:扁平化设计表格

扁平化设计强调简洁和色彩的使用,去除多余的装饰,使内容成为焦点。

```css
/* 扁平化设计 */
.table-flat {
  width: 100%;
  border-collapse: collapse;
}

.table-flat th,
.table-flat td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: center;
}

.table-flat th {
  background-color: #4CAF50;
  color: white;
  font-weight: normal;
}

.table-flat tr {
  transition: all 0.3s ease;
}

.table-flat tr:hover {
  background-color: rgba(76, 175, 80, 0.1);
}
```

### 示例3:深色主题表格

适用于夜间模式或偏好深色界面的用户,深色主题表格提供了一种对比鲜明的阅读体验。

```css
/* 深色主题 */
.table-dark {
  width: 100%;
  border-collapse: collapse;
  background-color: #333;
  color: #fff;
}

.table-dark th,
.table-dark td {
  border: 1px solid #444;
  padding: 12px;
  text-align: center;
}

.table-dark th {
  background-color: #4CAF50;
  color: #fff;
}

.table-dark tr:nth-child(even) {
  background-color: #222;
}

.table-dark tr:hover {
  background-color: #2c2c2c;
}
```

要应用这些样式,只需在HTML中为您的表格添加相应的类名,例如:

```html
<table class="table-modern">
  <!-- 表格内容 -->
</table>
```

每个示例都展示了不同的设计风格,您可以根据网站的整体设计和用户群体的需求选择合适的样式。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/14458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一般EI论文的格式是什么样的?

论文应该符合会议的提交要求和模板&#xff0c;包括页面格式、字体、字号、行距等。可以在特定会议的官方网站上找到详细的提交指南和模板。 EI会议论文的格式通常遵循以下基本结构&#xff1a; 标题和作者信息&#xff1a;论文标题应该简洁明了&#xff0c;能够准确概括您研究…

ubuntu_概念

su(switch user) wget(Web Get) cd(change directory) dpkg(Debian Packager)为 “Debian” 专门开发的套件管理系统&#xff0c;方便软件的安装、更新及移除。 chmod(Change Mode)用于改变文件或目录的权限 ps(Process Status)进程状态 grep(Global Regular Expression Print)…

OpenCV与AI深度学习 | 高效开源的OCR工具:Surya-OCR介绍与使用

本文来源公众号“OpenCV与AI深度学习”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;高效开源的OCR工具&#xff1a;Surya-OCR介绍与使用 1 背景 在众多企业应用中&#xff0c;光学字符识别 (OCR) 是一项基础技术。在本文中&…

qt for android 重新编译Qt6Android.jar

QT相关 编译Qt6Android.jarqt 6.7 WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES样式问题APP商店退回用户未点击《用户协议》就启动传感器 编译Qt6Android.jar qt版本&#xff1a;6.7 进入到Qt源码目录 <你的qt目录>\Src\qtbase\src\android\…

MySQL主从复制(二):高可用

正常情况下&#xff0c; 只要主库执行更新生成的所有binlog&#xff0c; 都可以传到备库并被正确地执行&#xff0c; 备库就能达到跟主库一致的状态&#xff0c; 这就是最终一致性。 但是&#xff0c; MySQL要提供高可用能力&#xff0c; 只有最终一致性是不够的。 双M结构的…

Golang:发起http请求-GET带参数、POST发送Form和JSON数据

文档 https://pkg.go.dev/net/httphttps://pkg.go.dev/net/url 目录 1、发起GET请求2、发起带参GET请求3、POST请求提交Form表单4、POST请求提交Json数据5、接收响应数据&#xff0c;json转为map6、自定义请求头 1、发起GET请求 使用net/http 可以很容易发起get请求 package…

python实现nacos服务注册和HTTP探活

如果使用nacos-sdk-python&#xff08;注意适用nacos版本&#xff09;&#xff0c;需要按照下面的链接修改源码的bug https://github.com/nacos-group/nacos-sdk-python/issues/135 代码如下&#xff1a; import nacos import threading import socket import requests impo…

大语言模型调优SFT RLHF

模型调优 大语言模型调优是通过准备训练数据&#xff0c;并在已有的预训练模型上进行调优&#xff0c;包括 llama、千问等模型&#xff0c;从而可以让模型学习到私有知识或者增强模型的已有知识。因此&#xff0c;如果要想训练一个效果好的模型&#xff0c;我们就需要提供大量…

【人工智能】模型性能评估

模型性能衡量介绍 混淆矩阵 混淆矩阵(Confusion Matrix&#xff09; TP(真阳性)&#xff1a;预测为阳性&#xff0c;且预测正确。 TN(真阴性)&#xff1a;预测为阴性&#xff0c;且预测正确。 FP(伪阳性)&#xff1a;预测为阳性&#xff0c;但预测错误&#xff0c;又称型一误…

json文件写操作-下文

接上文json文件写操作 2.4 控制函数长度代码规范版 #include <iostream> #include <string> #include "../3rd/cJSON/cJSON.h" #include "../test_memset/include/ArrayToZero.h"using namespace std;void AddLikeObject(cJSON* interest, c…

【NumPy】关于numpy.reshape()函数,看这一篇文章就够了

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

实时检测GPU使用率nvidia-smi

nvidia-smi --query-gpuutilization.gpu --formatcsv,noheader,nounits 为了判断所有 GPU 的利用率都小于阈值&#xff0c;可以循环检查每一个 GPU 的利用率。如果所有 GPU 的利用率都低于阈值&#xff0c;则增加空闲时间计数&#xff1b;否则&#xff0c;重置空闲时间计数。 …

python文件名通常以什么结尾

python文件后缀一般有两个&#xff0c;分别是.py和.pyw。视窗用 python.exe 运行 .py&#xff0c;用 pythonw.exe 运行 .pyw 。 这纯粹是因为安装视窗版Python时&#xff0c;扩展名 .py 自动被登记为用 python.exe 运行的文件&#xff0c;而 .pyw 则被登记为用 pythonw.exe 运…

信息系统项目管理师--八大绩效域-度量绩效域

信息系统工程师的八大绩效域包括&#xff1a;干系人、团队、开发方法和生命周期、规划、项目工作、交付、度量、不确定性。 度量绩效域涉及评估项目绩效和采取应对措施相关的活动和职能。 预期目标 对项目状况充分理解数据充分、可支持决策及时采取行动&#xff0c;确保项目最…

[程序员] 最近的感悟,错误处理占大头?

根据昨天分享的一个问题&#xff0c;想到的。 在代码里&#xff0c;异常处理的代码也算是占大头&#xff0c;扑面而来的就是发生错误时怎么处理的大片代码&#xff1b;而且出现问题的概率是绝对的占大头。所以&#xff0c;异常代码出现bug的概率也在不知不觉中增加&#xff01…

linux中使用yum下载对应软件包的离线安装包

方案一&#xff08;推荐&#xff09;&#xff1a;repotrack #安装yum-utils yum -y install yum-utils #下载 ansible 全量依赖包 -p 指定下载目录 -a 指定版本 repotrack -a x86_64 -p /tmp ansible 方法二&#xff1a;yumdownloader yumdownloader 命令在软件包 yum-utils…

LeetCode刷题之HOT100之汉明距离

大家晚上好啊&#xff0c;今天几乎啥也没干&#xff0c;上个课就耽误了一下午&#xff0c;晚上来了积极性也不高&#xff0c;先完成今天的题目吧&#xff0c;请看题&#xff1a; 1、题目描述 2、逻辑分析 没有遇到过这种题目&#xff0c;想不出来有什么解法&#xff0c;看题解…

【尚品汇】开发过程记录

Mybatis-Plus返回自增的主键Id OverrideTransactional(rollbackFor Exception.class)public void saveBaseAttrInfo(BaseAttrInfo baseAttrInfo) {//1&#xff0c;平台属性信息 判断是修改还是添加if(baseAttrInfo.getId() ! null){baseAttrInfoMapper.updateById(baseAttrInf…

跟TED演讲学英文:Do schools kill creativity by Sir Ken Robinson

Do schools kill creativity? Link: https://www.ted.com/talks/sir_ken_robinson_do_schools_kill_creativity Speaker: Sir Ken Robinson Date: February 2006 文章目录 Do schools kill creativity?IntroductionVocabularySummaryTranscriptAfterword Introduction Sir…

可转债日内自动T+0交易,行情推送+策略触发+交易接口

说明 目前这个项目已编译打包,下载即可测试,直接生成多平台可执行文件&#xff0c;详见运行方法。行情部分与策略弱相关&#xff0c;拆分解耦单独作为一个项目。行情项目请移步GitHub - freevolunteer/hangqing: A股行情订阅工具&#xff0c;支持股票/可转债level2/level2数据&…