CSS 表格和列表(20160823-0023)

原创 2016年08月31日 15:23:53

通过表格和列表的样式设置,让表格和列表显示更加多元化。

一、表格样式

属性 说明 CSS 版本
border-collapse 边框样式 相邻单元格的边框样式 2
border-spacing 长度值 相邻单元格边框的间距 2
border-side 位置名称 表格标题的位置 2
border-cells 显示值 空单元格是否显示边框 2
border-layout 布局样式 指定表格的布局样式 2
1、border-collapse

说明
separate 默认值,单元格边框独立
collapse 单元格相邻边框被合并
2、border-spacing

说明
长度值 表示间距
3、caption-side

说明
top 默认值,标题在上方
bottom 标题在下方
4、empty-cells

说明
show 默认值,显示边框
hide 不显示边框
5、table-layout

说明
auto 默认值,内容过长时,拉伸整个单元格
fixed 内容过长时,不拉伸整个单元格
/**************** border-collapse ****************/
table{
	/* 单元格边框独立,默认值 */
	/*border-collapse: separate;*/

	/* 单元格相邻边框被合并 */
	/*border-collapse: collapse;*/
}
/**************** border-spacing ****************/
table{
	/* border-collapse: separate;的状态下才有效,要设置间距,不能合并 */
	/*border-collapse: separate;
	border-spacing: 10px;*/
}

/**************** caption-side ****************/
table{
	/* 默认值,标题在上方 */
	/*caption-side: top;*/

	/* 设置标题在下方 */
	/*caption-side: bottom;*/

	/* 不能设置为左右 */
}
/**************** empty-cells ****************/
table{
	/* 设置 border-spacing 让显示比较明显 */
	/*border-spacing: 10px;*/
	/* 默认值,显示边框 */
	/*empty-cells: show;*/

	/* 不显示边框,单元格内容为空时隐藏边框 */
	/*empty-cells: hide;*/
}
/**************** table-layout ****************/
table{
	/* 给 table 设置宽度才能看到效果 */
	/*width: 300px;*/

	/* 默认值,内容过长时,拉伸整个单元格 */
	/*table-layout: auto;*/

	/* 内容过长时,不拉伸整个单元格,但高度有变化 */
	/*table-layout: fixed;*/
}
二、列表样式

属性 说明 CSS 版本
list-style-type 类型值 列表中的标记类型 1,2
list-style-image none 或 URL 图像作为列表标记 1
list-style-position 位置值 排列的相对位置 1
list-style 简写属性 列表的简写形式 1

1、list-style-type

说明
none 没有标记
disc 实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
2、list-style-position

说明
outside 默认值,标记位于内容框外部
inside 标记位于内容框内部
3、list-style-image

说明
none 不使用图像
url 通过 url 使用图像

/**************** list-style-type ****************/
ul{
	/* none 没有标记,将默认的标记去掉 */
	/*list-style-type:none; */

	/* disc 实心圆,默认标记 */
	/*list-style-type:disc; */

	/* circle 空心圆 */
	/*list-style-type:circle; */

	/* square 实心方块 */
	/*list-style-type:square; */

	/* decimal 阿拉伯数字 */
	/*list-style-type:decimal; */

	/* lower-roman 小写罗马数字 */
	/*list-style-type:lower-roman; */

	/* upper-roman 大写罗马数字 */
	/*list-style-type:upper-roman; */

	/* lower-alpha 小写英文字母 */
	/*list-style-type:lower-alpha; */

	/* upper-alpha 大写英文字母 */
	/*list-style-type:upper-alpha; */

	/* 提示:上边的标记类型,是 CSS1 版本的。CSS2 版本还包含比如日文、希腊文等前缀 */
}

/**************** list-style-position ****************/
ul{
	/* 设置宽度,方便观察 */
	/*width: 100px;*/

	/* outside,默认值,标记位于内容框外部 */
	/*list-style-position:outside; */

	/* inside,标记位于内容框内部 */
	/*list-style-position:inside;*/
}

/**************** list-style-image ****************/
ul{
	/* 使用图片作为前缀的标记 */
	/*list-style-image: url(../img/point.png);*/
}
/**************** list-style ****************/
ul{
	/*list-style: upper-roman inside url(../img/point.png);*/
}
三、其他功能

1、在 <table> 中 <td> 单元格,可以使用 text-align 属性水平对齐,但是垂直对齐就无法操作了。CSS 提供了 vertical-align 属性用于垂直对齐

说明 CSS 版本
baseline 内容对象与基线对齐 1
top 内容对象与顶端对齐 1
middle 内容对象与中部对齐 1
bottom 内容对象与底部对齐 1

table{
	/* 设置宽高,用于观察垂直对齐方式 */
	width: 300px;
	height: 200px;
}

table tr th,table tr td{
	/* 将单元格的内容对象与基线对齐 */
	/*vertical-align: baseline;*/

	/* 将单元格的内容对象与顶部对齐 */
	/*vertical-align: top;*/

	/* 将单元格的内容对象与中部对齐 */
	/*vertical-align: middle;*/

	/* 将单元格的内容对象与底部对齐 */
	/*vertical-align: bottom;*/
}
2、文本上下标设置
说明
sub 垂直对齐文本的下标
super 垂直对齐文本的上标

/* 文本上下标设置 */
strong{
	vertical-align: sub;
}
b{
	vertical-align: super;
}
3、对 vertical-align 设置值

说明
长度值 设置上下的偏移量,可以是负值
百分比 设置上下的偏移量,可以是负值
/* 对 vertical-align 设置值 */
#a{
	/*width: 100%;
	height: 300px;
	border:solid 1px black;
	text-align: center;*/
}
#a span{
	/* 直接设置属性值没用 */
	/*vertical-align: middle;*/

	/* 负值往下,正值往上。如果默认基线在上面,用负数,如果默认基线在下面,用正数 */
	/* 直接设置正数也没用,因为此时基线在上面 */
	/*vertical-align: 100px;*/
	
	/*vertical-align: -100px;*/
}
#b{
	/* 上移。基线在下面,用正数 */
	vertical-align: 50px;
}
四、HMTL 代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> 表格和列表 </title>
	<link rel="stylesheet" style="text/css" href="style.css">
</head>
<body>

	<table border="1">
		<caption> 这是表格的标题 </caption>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>籍贯</th>
		</tr>
		<tr>
			<th>张三,这是一个有故事的人呐</th>
			<th>男</th>
			<th>20</th>
			<th>北京</th>
		</tr>
		<tr>
			<th>李四</th>
			<th>女</th>
			<th>18</th>
			<th>上海</th>
		</tr>
		<tr>
			<th>王五</th>
			<th>男</th>
			<th></th>
			<th>广东</th>
		</tr>
		<tr>
			<th>老六</th>
			<th>女</th>
			<th>38</th>
			<th>深圳</th>
		</tr>
	</table>


	<ul>
		<li> 第一项 </li>
		<li> 第二项,这一项变得好长啦,用于测试。 </li>
		<li> 第三项 </li>
		<li> 第四项 </li>
		<li> 第五项 </li>
	</ul>

	<div>这是一个段落<strong>12</strong>有下标 </div>
	<div>这是一个段落<b>12</b>有上标 </div>


	<div id="a">  <span>这个是个句子 </span> </div>

	<span id="b">这是一个多行输入框</span><textarea cols="100" rows="10"></textarea>
</body>
</html>



示例代码地址

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS设置无需表格的菜单

CSS设置无需表格的菜单           项目列表的符号可以设置list-style-type属性值为none,然后,制作各种各样的菜单和导航条,来显示项目的列表。           首先,...
  • nangeali
  • nangeali
  • 2016年10月30日 16:22
  • 541

CSS表格和列表

index.html: CSS表格和列表 人员档案 姓名 性别 年龄 张三,是一个好青年 男 李四 女 35 ...
  • a716121
  • a716121
  • 2016年08月06日 16:51
  • 177

javascript+css简单实现树形结构列表

最近应公司要求要设计一个全国地区列表的页面于是想到了用树形列表来实现该功能,由于以前潜心研究过css所以对css比较熟悉,而javascript也经常接触,所以也还过得去,于是想到了结合javascr...
  • fableking
  • fableking
  • 2007年04月03日 10:06
  • 3902

CSS列表、表格、表单、高级选择器以及框模型

学习记录
  • liul99
  • liul99
  • 2017年06月02日 18:34
  • 357

div+css普通表格样式

无标题文档 body,td,th {font-size: 12px; font-family:"新宋体";} img{ border:0;} ul ,li{ margin:0; padding:0;...
  • bonlog
  • bonlog
  • 2012年05月07日 09:56
  • 9904

(1)一些css样式—链接、列表、表格、轮廓、字体

一、链接: 1.css连接到的四种状态 a:link    普通的、未被访问的连接 a:visited   用户已访问的链接 a:hover   鼠标指针位于链接的上方,就是准备点击时候的链接...
  • biandous
  • biandous
  • 2016年11月21日 21:45
  • 397

css表格间隙,分割线

祛除表格中间的间隙: table{ border-collapse:collapse; } 虚线: 1. hr { border:1px dotted #5B5B5B; } ...
  • Abenazhan
  • Abenazhan
  • 2017年08月12日 14:26
  • 289

CSS样式(链接、列表、表格、轮廓)学习笔记

仅仅是自己对着W3CSchool整理的一些 CSS 基础知识点,敲一遍加深下印象也方便以后复习。 CSS链接 设置链接的样式 链接样式可用属性:color.f...
  • kuyeluofan
  • kuyeluofan
  • 2014年12月01日 21:56
  • 334

8款设计师常用漂亮的HTML CSS表格样式

原来的地址: http://www.laozuo.org/2040.html 我们在布局网站的时候以前都可能直接用TABLE设计,如今都更流行使用CSS设计,这样对于网站结构更加友好和轻便。...
  • bigtree_3721
  • bigtree_3721
  • 2016年03月05日 09:37
  • 3513

css表格中设置两行中间的空白间距

css设置两行中间的空白间距: border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。border-collapse: separate; border-spa...
  • erciyuan_nuonuo
  • erciyuan_nuonuo
  • 2017年05月10日 21:23
  • 1344
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 表格和列表(20160823-0023)
举报原因:
原因补充:

(最多只允许输入30个字)