程序员经验分享-hwhale

CSS列表与表格

2023-10-28

目录

​编辑

HTML 列表和 CSS 列表属性

不同的列表项目标记

实例

图像作为列表项标记

实例

定位列表项标记

实例

删除默认设置

实例

列表 - 简写属性

实例

设置列表的颜色样式

实例

更多实例

所有 CSS 列表属性

表格边框

实例

全宽表格

实例

双边框

合并表格边框

实例

实例

表格宽度和高度

实例

实例

水平对齐

实例

实例

垂直对齐

实例

表格内边距

实例

水平分隔线

实例

可悬停表格

实例

条状表格

实例

表格颜色

实例

响应式表格

实例

更多实例

CSS 表格属性

HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

  • 无序列表（<ul>）- 列表项用的是项目符号标记
  • 有序列表（<ol>）- 列表项用的是数字或字母标记

CSS 列表属性可以：

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图像设置为列表项标记
  • 为列表和列表项添加背景色

不同的列表项目标记

list-style-type 属性指定列表项标记的类型。

下例显示了一些可用的列表项标记：

实例

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

亲自试一试

注释：有些值用于无序列表，而有些值用于有序列表。

图像作为列表项标记

list-style-image 属性将图像指定为列表项标记：

实例

ul {
  list-style-image: url('sqpurple.gif');
}

亲自试一试

定位列表项标记

list-style-position 属性指定列表项标记（项目符号）的位置。

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的：

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：

实例

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

亲自试一试

删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 ：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

亲自试一试

列表 - 简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

实例

ul {
  list-style: square inside url("sqpurple.gif");
}

亲自试一试

在使用简写属性时，属性值的顺序为：

  • list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
  • list-style-position（指定列表项标记应显示在内容流的内部还是外部）
  • list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

设置列表的颜色样式

我们还可以使用颜色设置列表样式，使它们看起来更有趣。

添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项：

实例

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

结果：

亲自试一试

更多实例

带红色左边框的自定义列表

本例演示如何创建带有红色左边框的列表。

全屏宽度的边框列表

本例演示如何创建没有项目符号的带边框列表。

列表的所有不同列表项标记

本例演示了 CSS 中所有不同的列表项标记。

所有 CSS 列表属性

属性 描述
list-style 简写属性。在一条声明中设置列表的所有属性。
list-style-image 指定图像作为列表项标记。
list-style-position 规定列表项标记（项目符号）的位置。
list-style-type 规定列表项标记的类型。

使用 CSS 可以极大地改善 HTML 表格的外观：

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha,No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

亲自试一试

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为 <table>、<th> 和 <td> 元素规定了黑色边框：

Firstname Lastname
Bill Gates
Steve Jobs

实例

table, th, td {
  border: 1px solid black;
}

亲自试一试

注意：上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。

全宽表格

在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：

实例

table {
  width: 100%;
}

亲自试一试

双边框

请注意上面的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。

如需删除双边框，请看下面的例子。

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框：

Firstname Lastname
Bill Gates
Steve Jobs

实例

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

亲自试一试

如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：

Firstname Lastname
Bill Gates
Steve Jobs

实例

table {
  border: 1px solid black;
}

亲自试一试

表格宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

下例将表的宽度设置为 100％，将 <th> 元素的高度设置为 50px：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

table {
  width: 100%;
}

th {
  height: 50px;
}

亲自试一试

要创建仅占页面一半的表，请使用 width: 50%：

实例

table {
  width: 50%;
}

th {
  height: 70px;
}

亲自试一试

水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。

要使 <td> 元素的内容也居中对齐，请使用 text-align: center：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th {
  text-align: center;
}

亲自试一试

下例使 <th> 元素中的文本左对齐：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th {
  text-align: left;
}

亲自试一试

垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。

下例将 <td> 元素的垂直文本对齐方式设置为下对齐：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

td {
  height: 50px;
  vertical-align: bottom;
}

亲自试一试

表格内边距

如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th, td {
  padding: 15px;
  text-align: left;
}

亲自试一试

水平分隔线

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：

实例

th, td {
  border-bottom: 1px solid #ddd;
}

亲自试一试

可悬停表格

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

tr:hover {background-color: #f5f5f5;}

亲自试一试

条状表格

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

实例

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

亲自试一试

表格颜色

下例指定了 <th> 元素的背景颜色和文本颜色：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th {
  background-color: #4CAF50;
  color: white;
}

亲自试一试

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

实例

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

亲自试一试

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。

更多实例

做一张花式表格

本例演示如何创建花式表格。

设置表格标题的位置

本例演示了如何放置表格标题。

CSS 表格属性

属性 描述
border 简写属性。在一条声明中设置所有边框属性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
table-layout 设置用于表格的布局算法。

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CSS入门进阶与实战

css

javascript

前端

html5

CSS列表与表格 的相关文章

  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前

  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者：基于设备像素比和基于视口的选择一起？

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io

  • 如何针对 Node.js 中发生的每个错误发送电子邮件？

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no

  • 使用 dc.js 按条形值对条形图中的条形进行排序（排序）

    如何通过维度的计算值而不是维度本身的名称对 dc js 示例中的 x 轴 维度 进行排序 例如 请考虑序数条形图的 dc js 示例 https github com dc js dc js blob master web examples

  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va

  • React-Redux：state.setIn() 和 state.set() 有什么区别？

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo

  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我

  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好

  • 如何选择具有“A”类但不具有“B”类的 div？

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di

  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre

  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j

  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定

  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco

  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional

  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区

  • 日期出现奇怪的错误，“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2

  • 如何创建适合屏幕宽度的等宽/高框？ [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理

  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0

  • Jquery - 选择选项后如何获取选项的特定数据类型？

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项

  • 如何在执行新操作时取消先前操作的执行？

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

随机推荐

  • NOIP中的数学---第1课 位运算

    位运算常用运算 位操作是一种速度非常快的基本运算 有左移 右移 与 或 非 异或等运算 左移 左移一位 相当于某数乘以2 比如110左移1位变为1100 右边的空位补0 6变为12 表示为 110 lt lt 1 因此左移x位 相当于该数乘

  • 计算机网络02（交换机，路由器原理）

    目录 一 交换机与路由器 了解交换机 路由器 二 交换机详解 1 交换机 2 交换机类型 3 vpn 4 网络拓扑结构 5 数据链路层 6 交换机的原理和配置 7 VLAN 8 trunk 9 tcpdump抓包工具的安装和使用

  • 【AI人工智能】 你如果要使用最强大的语言模型，你还要有最精美的浏览器标签页iTab (2)

    个人主页 极客小俊 作者简介 web开发者 设计师 技术分享博主 希望大家多多支持一下 我们一起进步 如果文章对你有帮助的话 欢迎评论 点赞 收藏 加关注 iTab 安装插件 这也是一款很不错的标签页插件 我使用过一段时间 很不错 并且里面

  • ideal使用maven将源码包和jar一起打包并上传到私服

    在公司中同事将代码提交到私服 下载jar包后却看不到注释 此时是因为同事没有将源码打包并上传到私服 配置方法如下

  • 在CentOS 7上安装Caffe

    简介 Caffe 是一个广泛使用的清晰 高效 模块化的深度学习框架 是贾扬清 Yangqing Jia 在UC Berkeley 读博期间建立的项目 由伯克利AI实验室 Berkeley AI Research BAIR 及社区贡献者开发

  • DC基础学习（六）Verilog语言结构到门级的映射2

    Design Compiler 以下简称DC 是Synopsys公司用于做电路综合的核心工具 可以将HDL描述的电路转换为基于工艺库的门级网表 本系列主要介绍综合相关的知识以及DC工具的使用 Verilog编码效率的高低是综合后电路性能高低

  • 微信网页开发：微信内h5使用wx-open-launch-weapp打开小程序，微信内h5使用wx-open-launch-app打开App的方案

    需求场景 当我们需要使用在微信客户端打开的h5页面 在页面上打开微信小程序或者唤起App时 我们需要使用微信js sdk提供的开放标签能力 这其中 使用wx open launch weapp标签打开微信小程序 使用wx open laun

  • 将“Encountered an improper argument“ 问题有效解决

    其错误提示为 Encountered an improper argument 错误原因 错误原因其实是因为我们在调试完结束时候 有断点 红色圆点 还没有去掉 所以我们一点击停止调试之后 keil就会马上弹出这个错误 然后你就会发现你的ke

  • 夏普ar2048s打印机驱动安装_驱动人生 下载安装打印机驱动的方法

    驱动人生 安装打印驱动的方法 支持USB 网络 注 电脑需要连接互联网 某些新款机型或可能不支持 不支持的型号请用自带驱动安装 或者到品牌官网下载驱动 注 下载 驱动人生 请到官网下载 请不要在第三方下载 第三方可能绑定有应用程序 安装时可

  • Sqlilabs-26

    来到了 Sqlilabs 大魔王的第 26 关关卡 来到页面就看到大大的 你的所有空格和过滤符都属于我们 这难得到机智的你吗 在此说下常见的绕过方法有 本来这应该在 25 关卡就说的 忘了 双写绕过 大小写绕过 编码绕过 如 hex URL

  • 通过这12张手绘图，搞懂什么是微服务架构

    点击上方 阿拉奇学Java 选择 置顶或者星标 优质文章第一时间送达 来源 juejin im post 5c0ba2bef265da614d08fefe 推荐阅读 SpringBoot中异步请求和异步调用 看这一篇就够了 下文 你将看到业

  • 【Linux成长史】Linux权限的详细讲解

    博客主页 博主链接 本文由 M malloc 原创 首发于 CSDN 学习专栏推荐 LeetCode刷题集 数据库专栏 初阶数据结构 欢迎点赞 收藏 留言 如有错误敬请指正 未来很长 值得我们全力奔赴更美好的生活 文章目录 本章详情 Lin

  • 算法效率分析基础-算法四

    主要内容 介绍研究算法效率的通用框架 介绍三种符号 O 读作O 读作omega 和 读作theta 这些数学借来的符号已经成为讨论算法效率的特定语言 使用通用框架系统对非递归算法进行分析 这种分析主要的工具是先定义一个代表算法运行时间的求和

  • QT信号槽的5种连接方式Qt::ConnectionType

    参考 QT信号槽的5种连接方式 非常溜 Qt QueuedConnection例子 666 Qt信号槽的五种连接方式 简洁清晰 Qt UniqueConnection 防止重复连接 综合 例子 updatethread h ifndef U

  • Python入门

    一 进制 1 什么是进制 进制就是进位的制度 一种进位的方式 2 常见的进制 二进制 0和1 0 1 十进制 0 9的整数 0 1 2 3 4 5 6 7 8 9 八进制 0 7的整数 用数字0开头 0 1 2 3 4 5 6 7 十六进制

  • ipconfig不是内部或外部命令

    错误背景 windows r 输入cmd dos命令输入ipconfig 出现不是内部或外部命令 解决方案 1 电脑 系统属性 环境变量 找到path 在末尾处 如没有分号就添加c windows system32 确定 windows r

  • Qt5 信号槽连接 函数重载、参数不一致问题

    Qt5中使用以下方式代替Qt4的信号槽连接 在编译时即对连接的函数指针进行检测 提高了安全性 而Qt4的连接方式是基于字符串的 只能在运行时进行检测 在Qt4的connect方法上右键 Refactor gt Convert connect

  • [数据库系统]第7讲 关系模式的优化知识点整理

    第1节 关系模型的好坏 ER模型转换的关系是否就是最优的关系 不一定 关系模型潜在的问题 添加异常 修改异常 删除异常 数据冗余 冗余 当数据的某些部分能由其他部分推导出来 就意味着存在冗余 冗余的存在是因为存在完整性约束 如何解决冗余问题

  • Transformer学习笔记

    The Illustrated Transformer Jay Alammar Visualizing machine learning one concept at a time jalammar github io 上面是图片出处 是否

  • CSS列表与表格

    目录 编辑 HTML 列表和 CSS 列表属性 不同的列表项目标记 实例 图像作为列表项标记 实例 定位列表项标记 实例 删除默认设置 实例 列表 简写属性 实例 设置列表的颜色样式 实例 更多实例 所有 CSS 列表属性 表格边框 实例

热门标签