10.跨行跨列操作实战:具有信息管理功能的表格

BUG之神 264

在三围后面加操作选项,可以对明星信息进行编辑和删除操作

代码:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>7-4.简单的增删改查操作表格</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="5"
	align="center" width="80%">
			<caption><h3>国内明星TOP50排行榜</h3></caption>
			<thead>
				<tr  bgcolor="skyblue">
					<th colspan="2">基本信息</th>
					<th colspan="3">三维(CM)</th>
					<th>操作</th>
				</tr>
				<tr align="center"  bgcolor="skyblue">
					<!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 -->
					<th>ID</th>
					<th>姓名</th>
					<th>腰围</th>
					<th>胸围</th>
					<th>臀围</th>
				</tr>
			</thead>
			<tbody>
				<tr align="center" >
					<td>01</td>
					<td>高圆圆</td>
					<td>88</td>
					<td>59</td>
					<td>85</td>
					<td><a href="">编辑</a></td>
					<td><a href="">删除</a></td>
				</tr>
				<tr align="center" >
					<td>02</td>
					<td>赵丽颖</td>
					<td>90</td>
					<td>60</td>
					<td>85</td>
					<td><a href="">编辑</a></td>
					<td><a href="">删除</a></td>
				</tr>
				<tr align="center" >
					<td>03</td>
					<td>迪丽热巴</td>
					<td>87</td>
					<td>61</td>
					<td>88</td>
					<td><a href="">编辑</a></td>
					<td><a href="">删除</a></td>
				</tr>
				<tr align="center" >
					<td>04</td>
					<td>古力娜扎</td>
					<td>86</td>
					<td>62</td>
					<td>88</td>
					<td><a href="">编辑</a></td>
					<td><a href="">删除</a></td>
				</tr>
				<tr align="center" >
					<td>05</td>
					<td>毛晓彤</td>
					<td>88</td>
					<td>68</td>
					<td>90</td>
					<td><a href="">编辑</a></td>
					<td><a href="">删除</a></td>
				</tr>
			</tbody>
		</table>
		
		<!-- 添加分页-->
		<p align="center">
			<a href="">首页</a>
			<a href="">上一页</a>
			<a href="">1</a>
			<a href="">2</a>
			<a href="">3</a>
			<a href="">...</a>
			<a href="">下一页</a>
			<a href="">最后一页</a>
		</p>
		
</body>
</html>

执行:

10.跨行跨列操作实战:具有信息管理功能的表格 

此时既要跨行合并也要跨列合并

10.跨行跨列操作实战:具有信息管理功能的表格 

表格里面还可以添加图片

10.跨行跨列操作实战:具有信息管理功能的表格 

执行:

10.跨行跨列操作实战:具有信息管理功能的表格 

让图片居左显示

10.跨行跨列操作实战:具有信息管理功能的表格 

执行:

10.跨行跨列操作实战:具有信息管理功能的表格 

再在标题增加一个添加操作

10.跨行跨列操作实战:具有信息管理功能的表格 

至此,表格的增删改查页面完成

 


最终源码:第2章明星排行榜top50表格 

 

分享