css构造表格

最新推荐文章于 2023-10-09 09:49:31 发布
最新推荐文章于 2023-10-09 09:49:31 发布
阅读量218 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanjin1988/article/details/42775711
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表格</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			table
			{
				/*
					border-collapse:separate|collapse
					设置或检索表格的行和单元格的边是否合并在一起
					还是按照标准的HTML样式分开。
					
					separate : 默认值。边框独立(标准HTML)
					collapse : 相邻边被合并
					就是将单元格和单元格之间的空隙合并起来
				*/
				
				width:auto;
				border:1px solid black;
				/*border-collapse:collapse可以代替cellspacing = "0" 并不是完全一样*/
				border-collapse:collapse;
				
			}
			th,td
			{
				background:gold;
				width:50px;
				border:1px solid black;
				padding:5px;
				text-align:center;
				/*垂直居中*/
				vertical-align:middle;
			}
		</style>
	</head>
	
	<body>
		<!-- 简单表格 -->
		<table>
			<tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
			<tr><th>5</th><td>6</td><td>7</td><td>8</td></tr>
		</table>
		<br />
		<table>
			<tr><th rowspan = "2">1</th><th colspan = "2">2</th></tr>
			<tr><td>8</td><td>6</td><td>7</td><td>8</td></tr>
		</table>
	</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表格</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			table
			{
				/*
					border-collapse:separate|collapse
					设置或检索表格的行和单元格的边是否合并在一起
					还是按照标准的HTML样式分开。
					
					separate : 默认值。边框独立(标准HTML)
					collapse : 相邻边被合并
					就是将单元格和单元格之间的空隙合并起来
				*/
				
				width:auto;
				border:1px solid black;
				/*border-collapse:collapse可以代替cellspacing = "0" 并不是完全一样*/
				border-collapse:collapse;
				
			}
			th,td
			{
				width:50px;
				border:1px solid black;
				padding:5px;
				text-align:center;
				/*垂直居中*/
				vertical-align:middle;
			}
			
			table.ex thead
			{
				background:orange;
				color:black;
			}
			
			table.ex tbody
			{
				background:gold;
				color:black;
			}
			
			table.ex tfoot
			{
				background:firebrick;
				color:white;
			}
			
			table col.col1
			{
				background:wheat;
			}
			
			table col.col2
			{
				background:gold;
			}
			
			table col.col3
			{
				background:orange;
			}
			
			table col.col4
			{
				background:tomato;
			}
		</style>
	</head>
	
	<body>
		<!-- 行组列组 -->
		<table class = "ex">
			<thead>
				<tr><th>1</th><th> 2</th><th> 3</th><th> 4</th></tr>
			</thead>
			<tbody>
				<tr><th>5</th><td> 6</td><td> 7</td><td> 8</td></tr>
			</tbody>
			<tfoot>
				<tr><th>9</th><td>10</td><td>11</td><td>12</td></tr>
			</tfoot>
		</table>
		
		<br />
		<br />
		
		<table>
			<colgroup>
				<col class = "col1" />
				<col class = "col2" />
				<col class = "col3" />
				<col class = "col4" />
			</colgroup>
			<tr><th>1</th><th> 2</th><th> 3</th><th> 4</th></tr>
			<tr><th>5</th><td> 6</td><td> 7</td><td> 8</td></tr>
			<tr><th>9</th><td>10</td><td>11</td><td>12</td></tr>
			
		</table>	
	</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表格</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			table
			{
				/*
					border-collapse:separate|collapse
					设置或检索表格的行和单元格的边是否合并在一起
					还是按照标准的HTML样式分开。
					
					separate : 默认值。边框独立(标准HTML)
					collapse : 相邻边被合并
					就是将单元格和单元格之间的空隙合并起来
				*/
				
				width:auto;
				border:1px solid black;
				/*border-collapse:collapse可以代替cellspacing = "0" 并不是完全一样*/
				border-collapse:collapse;
				
			}
			th,td
			{
				width:50px;
				border:1px solid black;
				padding:5px;
				text-align:center;
				/*垂直居中*/
				vertical-align:middle;
			}
			
			table.ex thead
			{
				background:orange;
				color:black;
			}
			
			table.ex tbody
			{
				background:gold;
				color:black;
			}
			
			table.ex tfoot
			{
				background:firebrick;
				color:white;
			}
			
			table col.col1
			{
				background:wheat;
			}
			
			table col.col2
			{
				background:gold;
			}
			
			table col.col3
			{
				background:orange;
			}
			
			table col.col4
			{
				background:tomato;
			}
			
			table td.x
			{
				background:green;
			}
		</style>
	</head>
	
	<body>
		<!-- 表格选择符 -->
		<table class = "ex">
			<thead>
				<tr><th>1</th><th> 2</th><th> 3</th><th> 4</th></tr>
			</thead>
			<tbody>
				<tr><th>5</th><td> 6</td><td> 7</td><td> 8</td></tr>
			</tbody>
			<tfoot>
				<tr><th>9</th><td>10</td><td>11</td><td>12</td></tr>
			</tfoot>
		</table>
		
		<br />
		<br />
		
		<table>
			<colgroup>
				<col class = "col1" />
				<col class = "col2" />
				<col class = "col3" />
				<col class = "col4" />
			</colgroup>
			<tr><th>1</th><th> 2</th><th> 3</th><th> 4</th></tr>
			<tr><th>5</th><td class = "x"> 6</td><td> 7</td><td> 8</td></tr>
			<tr><th>9</th><td>10</td><td>11</td><td>12</td></tr>
			
		</table>	
	</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表格</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			table
			{
				/*
					border-collapse:separate|collapse
					设置或检索表格的行和单元格的边是否合并在一起
					还是按照标准的HTML样式分开。
					
					separate : 默认值。边框独立(标准HTML)
					collapse : 相邻边被合并
					就是将单元格和单元格之间的空隙合并起来
				*/
				
				width:auto;
				border:1px solid black;
				/*border-collapse:collapse可以代替cellspacing = "0" 并不是完全一样*/
				border-collapse:separate;
				
			}
			th,td
			{
				width:50px;
				border:1px solid black;
				padding:5px;
				text-align:center;
				/*垂直居中*/
				vertical-align:middle;
			}
			
			table.ex thead
			{
				background:orange;
				color:black;
			}
			
			table.ex tbody
			{
				background:gold;
				color:black;
			}
			
			table.ex tfoot
			{
				background:firebrick;
				color:white;
			}
		</style>
	</head>
	
	<body>
		<!-- 分隔边框 -->
		<table class = "ex">
			<thead>
				<tr><th>1</th><th> 2</th><th> 3</th><th> 4</th></tr>
			</thead>
			<tbody>
				<tr><th>5</th><td> 6</td><td> 7</td><td> 8</td></tr>
			</tbody>
			<tfoot>
				<tr><th>9</th><td>10</td><td>11</td><td>12</td></tr>
			</tfoot>
		</table>
	</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表格</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			table
			{
				/*
					border-collapse:separate|collapse
					设置或检索表格的行和单元格的边是否合并在一起
					还是按照标准的HTML样式分开。
					
					separate : 默认值。边框独立(标准HTML)
					collapse : 相邻边被合并
					就是将单元格和单元格之间的空隙合并起来
				*/
				
				width:auto;
				
				/*border-collapse:collapse可以代替cellspacing = "0" 并不是完全一样*/
				border-collapse:separate;
				
			}
			th,td
			{
				width:50px;
				border:1px solid black;
				padding:5px;
				text-align:center;
				/*垂直居中*/
				vertical-align:middle;
			}
			
			table.ex thead
			{
				background:orange;
				color:black;
			}
			
			table.ex tbody
			{
				background:gold;
				color:black;
			}
			
			table.ex tfoot
			{
				background:firebrick;
				color:white;
			}
			table *.hidden
			{
				/*隐藏后位置还在*/
				visibility:hidden;
				
			}
			
			table *.delete
			{
				/*删除后位置没有*/
				display:none;
			}
		</style>
	</head>
	
	<body>
		<!-- 隐藏和删除单元格、行、列 -->
		<table class = "ex">
			<tr><th class = "delete">1</th><th class = "delete"> 2</th><th> 3</th><th> 4</th></tr>
			<tr><th>5</th><td> 6</td><td> 7</td><td> 8</td></tr>
			<tr><th class = "hidden">9</th><td>10</td><td>11</td><td class = "hidden">12</td></tr>
		</table>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表格</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			table
			{
				/*
					border-collapse:separate|collapse
					设置或检索表格的行和单元格的边是否合并在一起
					还是按照标准的HTML样式分开。
					
					separate : 默认值。边框独立(标准HTML)
					collapse : 相邻边被合并
					就是将单元格和单元格之间的空隙合并起来
				*/
				
				width:auto;
				
				/*border-collapse:collapse可以代替cellspacing = "0" 并不是完全一样*/
				border-collapse:separate;
				
			}
			th,td
			{
				width:150px;
				height:200px;
				border:1px solid black;
				padding:5px;
				text-align:center;
				/*垂直居中*/
				vertical-align:middle;
			}
			
			table.ex thead
			{
				background:orange;
				color:black;
			}
			
			table.ex tbody
			{
				background:gold;
				color:black;
			}
			
			table.ex tfoot
			{
				background:firebrick;
				color:white;
			}
			table *.hidden
			{
				/*隐藏后位置还在*/
				visibility:hidden;
				
			}
			
			table *.delete
			{
				/*删除后位置没有*/
				display:none;
			}
			table *.x
			{
				vertical-align:middle;
			}
			
			table th:hover
			{
				background:green;
			}
			table td:hover 
			{
				background:blue;
			}
		</style>
	</head>
	
	<body>
		<!-- 垂直对齐数据 -->
		<table class = "ex">
			<tr><th class = "delete">1</th><th class = "delete"> 2</th><th class = "x"> 3</th><th> 4</th></tr>
			<tr><th>5</th><td> 6</td><td> 7</td><td> 8</td></tr>
			<tr><th class = "hidden">9</th><td>10</td><td>11</td><td class = "hidden">12</td></tr>
		</table>
	</body>
</html>


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<title>css构造表格</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			table
			{
				/*
					border-collapse:separate|collapse
					设置或检索表格的行和单元格的边是否合并在一起
					还是按照标准的HTML样式分开。
					
					separate : 默认值。边框独立(标准HTML)
					collapse : 相邻边被合并
					就是将单元格和单元格之间的空隙合并起来
				*/
				
				width:auto;
				
				/*border-collapse:collapse可以代替cellspacing = "0" 并不是完全一样*/
				border-collapse:separate;
				
			}
			th,td
			{
				width:150px;
				height:200px;
				border:1px solid black;
				padding:5px;
				text-align:center;
				/*垂直居中*/
				vertical-align:middle;
			}
			
			table.ex thead
			{
				background:orange;
				color:black;
			}
			
			table.ex tbody
			{
				background:gold;
				color:black;
			}
			
			table.ex tfoot
			{
				background:firebrick;
				color:white;
			}
			table *.hidden
			{
				/*隐藏后位置还在*/
				visibility:hidden;
				
			}
			
			table *.delete
			{
				/*删除后位置没有*/
				display:none;
			}
			table *.x
			{
				vertical-align:middle;
			}
			
			
			<!--  以下IE5.5 IE6不支持 -->
			table th:hover
			{
				background:green;
			}
			table td:hover 
			{
				background:blue;
			}
		</style>
	</head>
	
	<body>
		<!-- 垂直对齐数据 -->
		<table class = "ex">
			<tr><th class = "delete">1</th><th class = "delete"> 2</th><th class = "x"> 3</th><th> 4</th></tr>
			<tr><th>5</th><td> 6</td><td> 7</td><td> 8</td></tr>
			<tr><th class = "hidden">9</th><td>10</td><td>11</td><td class = "hidden">12</td></tr>
		</table>
	</body>
</html>


 

 

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python如何解析css样式
zhangzhechun的专栏
07-24 428
与其他 CSS 解析库相比，tinycss2 具有更快的解析速度和更低的内存占用，同时支持 CSS3 和 CSS4 标准中的大多数特性。需要注意的是，tinycss2 库虽然支持大多数 CSS3 和 CSS4 标准中的特性，但仍有一些未实现的功能，例如某些伪元素和伪类。该代码使用 parse_stylesheet() 函数解析 CSS 样式表，并遍历解析结果打印出每个选择器和声明的内容。该代码使用 parse_declaration_list() 函数解析 CSS 声明列表，并打印出每个声明的名称和值。
CSS 表格常识（一）
怀公子的博客
01-03 878
表格边框 如需在 CSS 中设置表格边框，请使用 border 属性。 下面的例子为 table、th 以及 td 设置了蓝色边框： table, th, td { border: 1px solid blue; } 请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。 如果需要把表格显示为单线条边框，请使用 border-c...
CSS——表格结构
mintsolace的博客
04-05 966
使用表格布局时，可将表格划分为头部、主体和页脚（页脚有兼容性问题）。 创建表格的基本格式： <table> <tr> <td>单元格内的文字</td> … </tr> … </table> table用于定义一个表格。 tr用于定义表格中的一行，必须嵌套在table标签中，在table中包含几对tr，就有几...
CSS 构造表格
dbp5156的博客
06-02 82
表格边框 CSS 中设置表格边框，请使用 border 属性: <style type="text/css"> table{ border:1px solid red; } th,td{ border:1px solid red; } </style> </h...
25 ,CSS 构造表格
lzjgame的博客
03-31 147
表格的基础构造 边距和边线应用 隐藏和删除应用 简单表格 table { width:auto; border-collapse:collapse; margin-left:20px; border:1px solid black; } td,th { width:50px; border:1px solid black; padding:5px; background:gol...
CSS构造表格
weixin_30621919的博客
08-02 74
表格的基础构造 边距和边线应用 隐藏和删除应用 简单表格 table { width:auto; border-collapse:collapse;（把单元格空隙合并起来） margin-left:20px; border:1px solid black; } td,th { width:50px; border...
CSS表格
bwf_erg的博客
05-02 733
表格采用行列格式的简单结构，以及生活中广泛应用，对于他的理解和代码编写都很方便。表格的每行的列数通常一致，同行单元格高度一致且水平对齐，同列单元格宽度一致并且垂直对齐。这种严格的约束成了一个不易变形的矩形盒子结构，堆叠排列起来结构很稳定。 一、 表格的基本结构   1，单元格 单元格为表格的最小单位，一个或者多个单元格纵横排列组成表格。 2，表格行 一个或者多个单元格横向堆叠形成行
cssc构造表格
12-15
根据提供的信息，我们可以总结出以下关于“CSS构造表格”的详细知识点： ### 1. 表单标签的使用 在HTML中，表单是用于收集用户输入的重要元素之一。要创建一个表单，需要使用`<form>`标签。此外，表单中的各个元素...
DIV+CSS+JS在HTML页面制作表格的思想
weixin_40726526的博客
04-13 1947
DIV+CSS+JS在HTML页面制作表格的思想 1.介绍 在如今的前后端分离的开发当中，前端页面技术要求也越来越高了。 因此就在这对自己对前端技术的理解做个简单的整理，方便日后查阅。本文章主要是介绍了如何制作表格的思想。阅读这文章，至少得了解div标签的特性，特别是可以抽象理解div标签的——块思想。还有选择器的知识也是很重要。 2.表格的结构拆分 首先，我的认为。一张基本的表格主要有俩个...
使用Layui动态构造表格数据
无
06-17 1004
使用Layui动态构造表格数据 如何根据服务端返回的数据动态的显示按钮 javax.el.PropertyNotFoundException: 类型[com.demo.entity.XXX]上找不到属性[YYY] Layui的table的返回json格式是什么
CSS 之 table 表格布局
最新发布
weixin_45092437的博客
10-09 9712
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
HTML之完整的table结构
皮一下很开心的猴头
07-30 7945
&lt;table border="1" cellpadding="0" cellspacing="0" width="200"&gt; &lt;thead&gt; &lt;tr style="background-color: gray;"&gt; &lt;th&gt;Month&lt;/th&g
html的表格结构以及如何使用CSS控制表格的样式/学习笔记
No1banana的博客
02-10 1289
了解表格结构标签的用法，能够使表给结构标签进行网页布局 一、表格的结构 表格的划分： 头部：定义表格的头部，包含网页logo和导航等信息<thead></thead> 主体：定义表格的主体，包含网页的主要内容<tbody></tbody> 页脚：定义表格的页脚，包含网页中底部的企业、日期等信息<tfoot></tfoot> 以上的标签都要写在<table>表格标签内。 注意事项 1、一个table表格只能定义一对&lt.
css2: 详解css的表格
qq_59076775的博客
10-19 721
一.定义css中的表格元素有那些 1.table 作用范围：定义一个大表格 2.thead 作用:为了更更好的区分结构，列如th 3.tbody 作用:为了更更好的区分结构，列如td 4.tofoot 作用:为了更好的区分结构 5.tr 作用:表示表格中的行 6.th 作用:表格中的表头,能使字体加粗,还能够居中 7.td 作用：表示一个单元格； 图片详解: 二,表格中的一些css修饰 1.合并边框 表格边框合并属性(border-collapse)用来定...
CSS笔记（美化表格）
APieceOfBullshit
02-08 1211
一、表格的基本结构 表格由行、列、单元格三部分组成，单元格是行与列交叉的部分，可以拆分和合并。 表格&lt;table&gt;，行&lt;tr&gt;，单元格&lt;td&gt; 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。 1、标准化的表格结构 *&lt;table&gt;定义表格 *&lt;caption&gt;定义表格标题&lt;caption&gt;必须紧随&l...
CSS表格及表单美化
Super_Robot的博客
06-09 8553
CSS表格及表单美化 有效的传递页面信息 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容 具有良好的用户体验 <span> 标签的作用 能让某几个文字或者某个词语凸显出来 <span>字体</span> <p>凸显<span class="show">“字体”&l...
CSS（引入方式、选择器）基础知识
weixin_72553821的博客
07-14 265
全面的CSS、引入方式、选择器的基础知识
CSS样式与HTML元素详解
HTML（HyperText Markup Language）是网页内容的基础构造语言，而CSS（Cascading Style Sheets）则用于控制网页的样式和布局。在`DIV+CSS`布局中，`<div>`元素作为容器，可以用来组织和分组HTML内容，实现更灵活的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值