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选择框、下拉列表、文本域、表格

1.文件选择框 input type="file" accept="image/*> accept:指定可选择文件的类型。 上传的头像需指定对应表单的属性 form enctype="multi...

CSS声明之文本格式化、表格样式、定位、列表样式、显示方式、鼠标形状

文本格式化控制字体控制文本格式 表格样式表格常用样式属性 表格特有样式属性定位定位简介流定位浮动定位 相对定位 绝对定位 定位属性 堆叠顺序 ...

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

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

css学习笔记20160120链接列表表格

链接的css样式的选择器根据链接的四种状态有四种分别为a:link正常状态,a:visited访问过的状态,a:hover鼠标悬停状态,a:active鼠标点击状态.可以分别用color属性和text...

HTML、CSS和JavaScript学习五(案例分析二表格、项目列表和超链接)

二.表格、列表和链接的结合使用,实现的功能是将数据进行表格的格式化,在表格的每一项中有一个链接,点击链接有两种效果:1.可以打开所有的列表项2.只能打开一个列表项。先看效果图 无标题文档...

JavaWeb - HTML,字体/列表/图形/超链接/表格/表单/其它(标签),CSS,CSS与HTML结合方式,CSS选择器,CSS扩展选择器

JavaWeb - HTML,字体/列表/图形/超链接/表格/表单/其它(标签),CSS,CSS与HTML结合方式,CSS选择器,CSS扩展选择器...

div+css之CSS 文本设置 CSS 字体设置 CSS 列表设置 CSS 表格设置 css outline轮廓

1、CSS 文本设置: CSS 文本属性    属性             描述 color          设置文本颜色 direction      设置文本方向。 line-hei...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 表格和列表(20160823-0023)
举报原因:
原因补充:

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