Blogger Information
Blog 55
fans 0
comment 1
visits 42239
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
普通表格的制作之top50排行-2018年3月16日零点
旺小舞的博客
Original
822 people have browsed it

效果图1:

QQ截图20180318165009.jpg

注意点:

   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>

运行实例 »

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


手稿:

QQ图片20180319150645.jpg

效果图2:

QQ截图20180319150432.jpg

代码:

实例

<!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>

运行实例 »

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

手抄份:

QQ图片20180319150656.jpg

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post