普通表格的制作之top50排行-2018年3月16日零点

程序员文章站 2024-04-04 22:21:24

...

效果图1：

注意点：

1，cellspadding="0" cellspacing="0" 可以让表格边框成为一条线，相当于css中表单的border-collapse:collapse属性

2，表格组颜色的选择，colgroup span="2" bgcolor="lightgreen" 表示选择两竖列背景颜色

3，small属性可以让<a>标签变小一号

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="岛国女星排行榜">
<meta name="description" content="岛国女星排名">
<link ="stylesheet" type="text/css" href=".css">
<script type="text/javascript" src=".js"></script>
<title>岛国女星排行榜TOP50 </title>
</head>
<body>
<table border="1"  cellpadding="0" cellspacing="0" width="400" height="150">
<caption>岛国明星TOP50排行榜<small><a href="">添加</a></small></caption>
<colgroup span="2" bgcolor="lightgreen"></colgroup>
<colgroup span="1" bgcolor="#D2D2D2"></colgroup>
<col bgcolor="#FFFDDB">
<col bgcolor="#00FDFC">

<tr bgcolor="#8ECBE9">
<th colspan="2"> 信息</th>
<th colspan="3"> 三围(cm)</th>
<th colspan="2" rowspan="2">操作</th>
</tr>
<tr bgcolor="#8ECBE9"  align="center">
<th>ID</th>
<th>姓名</th>
<th>腰围</th>
<th>胸围</th>
<th>臀围</th>s

</tr>
<tr>
<td>01</td>
<td><img src="images/bdyjy.jpg" width="30" height="30" alt="">羽野由井</td>
<td>88</td>
<td>59</td>
<td>85</td>
<td><small><a href="">编辑</a></small></td>
<td><small><a href="">删除</a></small></td>
</tr>
<tr>
<td>02</td>
<td><img src="images/xzmly.jpg" width="30" height="30" alt="">小沢マリア</td>
<td>90</td>
<td>60</td>
<td>85</td>
<td><small><a href="">编辑</a></small></td>
<td><small><a href="">删除</a></small></td>
</tr>
<tr>
<td>03</td>
<td><img src="images/qcll.jpg" width="30" height="30" alt="">朝川</td>
<td>87</td>
<td>61</td>
<td>88</td>
<td><small><a href="">编辑</a></small></td>
<td><small><a href="">删除</a></small></td>
</tr>
<tr>
<td>04</td>
<td><img src="images/stgz.jpg" width="30" height="30" alt="">深田恭子</td>
<td>87</td>
<td>61</td>
<td>88</td>
<td><small><a href="">编辑</a></small></td>
<td><small><a href="">删除</a></small></td>
</tr>
<tr>
<td>05</td>
<td><img src="images/sjk.jpg" width="30" height="30" alt="">葵</td>
<td>88</td>
<td>68</td>
<td>90</td>
<td><small><a href="">编辑</a></small></td>
<td><small><a href="">删除</a></small></td>
</tr>

</table>
<p>
<a href="" title="">首页</a>
<a href="" title="">上一页</a>
<a href="" title="">1</a>
<a href="" title="">2</a>
<a href="" title="">3</a>s
<a href="" title="">...</a>
<a href="" title="">10</a>
<a href="" title="">下一页</a>
<a href="" title="">尾页</a>
</p>
</html>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手稿：

普通表格的制作之top50排行-2018年3月16日零点

效果图2：

普通表格的制作之top50排行-2018年3月16日零点

代码：

实例

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="keywords" content="菜单">
<meta name="description"	content="办公区域规划">
<link rel="stylesheet" type="text/css" href="">
<head>
	<title>办公区域规划</title>
</head>
<body>
	<table  border="1" cellpadding="20" cellspacing="10" width="30%" bgcolor="silver">
		 <caption>办公区域规划</caption> 
		<tr>
			<th colspan="3"><a href="">外宾体验区</a></th>
			<th rowspan="6">走<br/>廊</th>
		</tr>
		<tr>
			<th rowspan="2">财务室</th>
			<td><img src="images/1.jpg" width="30"  height="30">销售组1</td>
			<td><img src="images/2.jpg" width="30" height="30" >销售组2</td>
		</tr>
		<tr>
			<td><img src="images/3.jpg" width="30"  height="30">销售组3</td>
			<td><img src="images/4.jpg" width="30"  height="30">销售组4</td>
		</tr>
		<tr></tr>
		<tr align="center">
			<th rowspan="2">微波炉室</th>
			<td>运维1</td>
			<td>运维2</td>
		</tr>
		<tr align="center">
			<td>售后1</td>
			<td>售后2</td>
		</tr>

	</table>
	
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄份：

普通表格的制作之top50排行-2018年3月16日零点

上一篇：标签元素选择器的使用-2018年3月21日零点

下一篇： fieldset 边框框架