前端必知必会-html表格行列样式

编程流年

于 2024-07-25 09:00:00 发布

阅读量458

点赞数 8

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_24018193/article/details/140573138

版权

文章目录

HTML 表格列组
HTML 表格列组
多个 Col 元素
空 Colgroups
隐藏列
HTML 列表
HTML 描述列表
总结

HTML 表格列组

<colgroup> 元素用于设置表格中特定列的样式。

HTML 表格列组

如果要设置表格前两列的样式，请使用 <colgroup> 和 <col> 元素。

星期一星期二星期三星期四星期五星期六星期日
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

<colgroup> 元素应用于列规范的容器。

每个组都使用 <col> 元素指定。

span 属性指定获得样式的列数。

style 属性指定要赋予列的样式。

注意：colgroups 的合法 CSS 属性选择非常有限。

示例

<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

注意：<colgroup> 标签必须是 <table> 元素的子元素，并且应放置在任何其他表元素（如 <thead>、<tr>、<td> 等）之前，但应放置在 <caption> 元素（如果存在）之后。

只有非常有限的 CSS 属性可用于 colgroup：

width 属性
visibility 属性
background 属性
border 属性

所有其他 CSS 属性都不会对您的表产生影响。

多个 Col 元素

如果您想要使用不同样式来设置更多列的样式，请在 <colgroup> 中使用更多 <col> 元素：

示例

<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

空 Colgroups

如果您想要设置表格中间列的样式，请在之前的列中插入一个“空”<col>元素（无样式）：

示例

<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

隐藏列

您可以使用visibility:collapse属性隐藏列：

示例

<table>
<colgroup>
<col span="2">
<col span="3" style="visibility:collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

HTML 列表

HTML 列表允许 Web 开发人员将一组相关项目分组到列表中。

无序 HTML 列表

无序列表以 <ul> 标签开头。每个列表项都以 <li> 标签开头。

默认情况下，列表项将以项目符号（小黑圈）标记：

咖啡
茶
牛奶

示例

<ul>
	<li>咖啡</li>
	<li>茶</li>
	<li>牛奶</li>
</ul>

选择列表项标记

CSS list-style-type 属性用于定义列表项标记的样式。它可以具有以下值之一：

值	描述
disc	将列表项标记设置为项目符号（默认）
circle	将列表项标记设置为圆形
square	将列表项标记设置为方形
none	列表项不会被标记

咖啡
茶
牛奶

示例 - 圆形

<ul style="list-style-type:disc;">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

示例 - 方形

<ul style="list-style-type:square;">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

示例 - 无

<ul style="list-style-type:none;">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

嵌套 HTML 列表
列表可以嵌套（列表内有列表）：

示例

<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>

注意：列表项 (<li>) 可以包含新列表和其他 HTML 元素，如图像和链接等。

使用 CSS 的水平列表
可以使用 CSS 以多种不同方式设置 HTML 列表的样式。

一种流行的方法是水平设置列表的样式，以创建导航菜单：

示例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系方式</a></li>
<li><a href="#about">关于</a></li>
</ul>

</body>
</html>

有序 HTML 列表

有序列表以 <ol> 标签开头。每个列表项都以 <li> 标签开头。

列表项默认会用数字标记：

咖啡
茶
牛奶

示例

<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

HTML 描述列表

HTML 还支持描述列表。

描述列表是术语列表，每个术语都有描述。

<dl> 标签定义描述列表，<dt> 标签定义术语（名称），<dd> 标签描述每个术语：

咖啡

- 黑色热饮

牛奶

- 白色冷饮

示例

<dl>
<dt>咖啡</dt>
<dd>- 黑色热饮</dd>
<dt>牛奶</dt>
<dd>- 白色冷饮</dd>
</dl>

总结

本文介绍了的html列表的使用使用，如有问题欢迎私信和评论

编程流年

关注

8
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必知必会-html表格行列样式

本文介绍了的html列表的使用使用，如有问题欢迎私信和评论。
复制链接

扫一扫