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. Shp数据批量导入Postgresql工具的原理和设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在制作整体的开源工具箱产品中,数据入库是一个重要的环节.虽然 ...

  2. 将Json数据转换为ADO.NET DataSet对象

    Json数据转换为ADO.NET DataSet其实方法有很多,Newtonsoft.Json也提供了DataSet的Converter用以转换Json数据.但是有些情况下DataSet Conver ...

  3. Windows Phone 8 开发系列（持续更新中）

    1. 从应用列表再次点击应用,如何恢复到上次浏览的页面呢? 2. Windows Phone 文本框的 UpdateSourceTrigger 属性不支持 PropertyChanged 怎么办? 3 ...

  4. 【十大经典数据挖掘算法】CART

    [十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 1. 前言 分类与回归树(Class ...

  5. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

  6. WebView JS与RN进行通讯

    RN0.37终于官方增加了WebView与React Native的通讯,之前一真使用的是第三方控件React-Native-WebView-Bridge,但不是知道怎么回事这个第三方控件喊了很长时间 ...

  7. JAVA调用 keytool 生成keystore 和 cer 证书

    keytool是一个Java数据证书的管理工具, keytool将密钥(key)和证书(certificates)存在一个称为keystore的文件中在keystore里, 包含两种数据: 密钥实体( ...

  8. 【原创】kafka server源代码分析(一)

    这个是Kafka server的核心包,里面的类也很多,我们还是一个一个分析 一.BrokerStates.scala 定义了目前一个kafka broker的7中状态 ——  1. NotRunni ...

  9. .Net语言 APP开发平台——Smobiler学习日志：实现在手机上调用摄像头进行扫描

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...

  10. 基于DevExpress的Winform程序安装包的制作

    在我们做系统开发的时候,都会面临一个安装包制作的问题,如何把我们做好的系统,通过安装包工具整合成一个安装包给客户进行安装.安装包的优势就是一步步安装就可以了,不用复制一大堆文件给客户,还怕缺少那个文件 ...