CSS 表格实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓（Outline） 实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例

01设置表格的布局

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>01设置表格的布局</title>

		<style type="text/css">

		    body {background-color: #FF7070;}

			table.one {

				table-layout: automatic;

			}

			table.two {

				table-layout: fixed;

			}

		</style>

	</head>

	<body>

		<table class="one" border="1" width="100%">

			<tr>

				<td width="20%">1000000000000000000000</td>

				<td width="40%">1000</td>

				<td width="40%">1000</td>

			</tr>

		</table>

		<table class="two" border="1" width="100%">

			<tr>

				<td width="20%">1000000000000000000000</td>

				<td width="40%">1000</td>

				<td width="40%">1000</td>

			</tr>

		</table>

	</body>

</html>

02显示表格中的空单元

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>02显示表格中的空单元</title>

		<style type="text/css">

		    body {

		    	background-color: #FF7070;

		    }

			table {

				border-collapse: separate;

				empty-cells: hide;

			}

		</style>

	</head>

	<body>

		<table border="1">

			<tr>

				<td>我老大</td>

				<td>我老二</td>

			</tr>

			<tr>

				<td>我老三</td>

				<td></td>

			</tr>

		</table>

	</body>

</html>

03合并表格边框

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>03合并表格边框</title>

		<style type="text/css">

			table {

				border-collapse: collapse;

			}

			table,

			td,

			th {

				border: 1px solid black;

			}

		</style>

	</head>

	<body>

		<table>

			<tr>

				<th>老几</th>

				<th>老几</th>

			</tr>

			<tr>

				<td>我老大</td>

				<td>我老二</td>

			</tr>

			<tr>

				<td>我老三</td>

				<td>我老四</td>

			</tr>

		</table>

	</body>

</html>

04设置表格边框之间的空白

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>04设置表格边框之间的空白</title>

		<style type="text/css">

			table.one {

				border-collapse: separate;

				border-spacing: 10px;

			}

			table.two {

				border-collapse: separate;

				border-spacing: 10px 50px;

			}

		</style>

	</head>

	<body>

		<table class="one" border="1">

			<tr>

				<td>A1</td>

				<td>A2</td>

			</tr>

			<tr>

				<td>B1</td>

				<td>B2</td>

			</tr>

		</table>

		<table class="two" border="1">

			<tr>

				<td>A1</td>

				<td>A2</td>

			</tr>

			<tr>

				<td>B1</td>

				<td>B2</td>

			</tr>

		</table>

	</body>

</html>

05设置表格标题的位置

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>05设置表格标题的位置</title>

		<style type="text/css">

			caption {

				caption-side: bottom;

			}

		</style>

	</head>

	<body>

		<table border="1">

			<caption>我是标题</caption>

			<tr>

				<td>111</td>

				<td>222</td>

			</tr>

			<tr>

				<td>333</td>

				<td>444</td>

			</tr>

		</table>

	</body>

</html>

06制作一个表格

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>制作一个表格</title>

		<style type="text/css">

			#customers {

				font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

				width: 100%;

				border-collapse: collapse;

			}

			#customers td,

			#customers th {

				border: 1px solid #98bf21;

			}

			#customers th {

				text-align: left;

				background-color: #A7C942;

				color: #ffffff;

			}

			#customers tr.alt td {

				color: #000000;

				background-color: #EAF2D3;

			}

		</style>

	</head>

	<body>

		<table id="customers">

			<tr>

				<th>Company</th>

				<th>Contact</th>

				<th>Country</th>

			</tr>

			<tr>

				<td>Apple</td>

				<td>Steven Jobs</td>

				<td>USA</td>

			</tr>

			<tr class="alt">

				<td>Baidu</td>

				<td>Li YanHong</td>

				<td>China</td>

			</tr>

			<tr>

				<td>Google</td>

				<td>Larry Page</td>

				<td>USA</td>

			</tr>

			<tr class="alt">

				<td>Lenovo</td>

				<td>Liu Chuanzhi</td>

				<td>China</td>

			</tr>

			<tr>

				<td>Microsoft</td>

				<td>Bill Gates</td>

				<td>USA</td>

			</tr>

			<tr class="alt">

				<td>Nokia</td>

				<td>Stephen Elop</td>

				<td>Finland</td>

			</tr>

		</table>

	</body>

</html>

CSS 表格实例总结

W3School-CSS 表格实例的更多相关文章

  1. CSS 表格实例

    CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...

  2. HTML 学习笔记 CSS(表格)

    CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...

  3. CSS：CSS 表格

    ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...

  4. 第 18 章 CSS 表格与列表

    学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...

  5. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  6. 第七十五节，CSS表格与列表

    CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下:             属性               值           ...

  7. CSS表格(未完成)

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:

  8. css sprite实例

    css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...

  9. CSS 分页实例

    CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...

随机推荐

  1. Google数据中心B4网络具体实现

    ① 背景介绍 Google的网络有两种,一种是数据中心内部网络,另外一种是WAN网,其中WAN网又分为两种:一是数据中心之间的互联网络,属于内部网络(G-Scale Network),另外一种是面向I ...

  2. C#对SQL Server数据库的备份与还原

    备份数据库: string connectionString = "server=服务器名称;database=数据库名;uid=登入名;pwd=登入密码";         // ...

  3. 关于SQL储存过程中输出多行数据

    declare @num1 int           --为符合条件的总行数 select @num1=COUNT(1) from cardInfo where openDate between @ ...

  4. jQuery对话框右上角带关闭×

    jQuery弹出可关闭遮罩层:http://hovertree.com/texiao/layer/1/ 代码如下: <!DOCTYPE html> <html> <hea ...

  5. Suggestion(搜索建议)产品和技术

    今天来简单聊聊Suggestion产品 什么是Suggestion服务? 一图胜千言: 当你想要搜索某个长词语或者一句话输入部分时,Suggestion服务预测你极大可能的候选项,并罗列出来,供你选择 ...

  6. C#之tcp自动更新程序

    .NETTCP自动更新程序有如下几步骤: 第一步:服务端开启监听 ServiceHost host; private void button1_Click(object sender, EventAr ...

  7. sql 中的Bulk和C# 中的SqlBulkCopy批量插入数据 （ 回顾 and 粗谈 ）

    通常,我们会对于一个文本文件数据导入到数据库中,不多说,上代码. 首先,表结构如下.   其次,在我当前D盘中有个文本文件名为2.txt的文件. 在数据库中,可以这样通过一句代码插入. Bulk in ...

  8. 使用T4模板合并js文件

    不知道该怎么表达,或许直接贴图贴代码更好 前因:在第一个使用angularjs的项目中我将所有的controller写到一个文件里面,深知维护起来那滋味,所以再次使用angularjs的时候,我便把所 ...

  9. [moka同学笔记]关于api-ms-win-crt-runtimel1-1-0.dll缺失

    在搞mongodb时候,碰到了这个坑.[api-ms-win-crt-runtimel1-1-0.dll缺失],懵逼不知道怎么改,从同事电脑里拷贝了这个文件,也按照网上的办法改了,改了半天还是不行.最 ...

  10. Quartz.net配置文件实例及cron表达式详解

    从XML文件创建作业 最新版本的quartz.net支持直接从xml文件创建作业,使用起来很方便.配置文件的格式可以参考下面的例子 <?xml version="1.0" e ...