W3School-CSS 表格实例

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 表格实例总结

posted @ 2016-01-02 13:25  IamHoey  阅读(539)  评论(0)  编辑  收藏  举报