html表格的常用样式

最新推荐文章于 2024-06-18 18:28:04 发布

志男

最新推荐文章于 2024-06-18 18:28:04 发布

阅读量1.4w

点赞数 11

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_39612654/article/details/106625947

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

行跟列背景颜色的选择，合并等

列的颜色选择代码

	<colgroup span="1" bgcolor="lightgreen"></colgroup>
	<colgroup span="1" bgcolor="lightyellow"></colgroup>
	<colgroup span="2" bgcolor="lightgreen">
		<col bgcolor="lightgray">
		<col>
	</colgroup>
	<colgroup span="1" bgcolor="cyan"></colgroup>

在这里插入图片描述
行跟列的合并代码

<th colspan="2" rowspan="2">操作</th>
<td colspan="2">平均:</td>

在这里插入图片描述

<!DOCTYPE html>
<html>
<style type="text/css">
	td{
		text-align:center;
	}
	a{
		text-decoration: none;
	}
	img{
		width: 25px;height:25px;
		border-radius: 50%;
		align="left";
	}
</style>
<head>
	<meta charset="utf-8">
	<title>demo</title>
</head>
<body>
<!-- <strong></strong>
<em></em>
<pre></pre>格式化原样式输出 -->
<br><br>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="40%">
	<caption><strong>明星排行榜</strong> <a href="">添加</a></caption>
	<!-- <colgroup span="1" bgcolor="lightgreen"></colgroup>
	<colgroup span="1" bgcolor="lightyellow"></colgroup>
	<colgroup span="2" bgcolor="lightgreen">
		<col bgcolor="lightgray">
		<col>
	</colgroup>
	<colgroup span="1" bgcolor="cyan"></colgroup> -->
	<!-- thead,tbody,tfoot表格的分区 -->
	<tr bgcolor="skyblue">
		<th colspan="2">信息</th>
		<th colspan="3">三围</th>
		<th colspan="2" rowspan="2">操作</th>
	</tr>
	<tr bgcolor="skyblue">
		<th>ID</th>
		<th>姓名</th>
		<th>腰围</th>
		<th>胸围</th>
		<th>臀围</th>
	</tr>
	<tr>
		<td>01</td>
		<td><img src="./images/3.png" align="left">波多</td>
		<td>88</td>
		<td>59</td>
		<td>85</td>
		<td><a href="">编辑</a></td>
		<td><a href="">删除</a></td>
	</tr>
	<tr>
		<td>02</td>
		<td ><img src="./images/3.png" align="left">玛利亚</td>
		<td>88</td>
		<td>59</td>
		<td>85</td>
		<td><a href="">编辑</a></td>
		<td><a href="">删除</a></td>
	</tr>
	<tr>
		<td>03</td>
		<td><img src="./images/3.png" align="left">浅川梨奈</td>
		<td>88</td>
		<td>59</td>
		<td>85</td>
		<td><a href="">编辑</a></td>
		<td><a href="">删除</a></td>
	</tr>
	<tr>
		<td>04</td>
		<td><img src="./images/3.png" align="left">苍老师</td>
		<td>88</td>
		<td>59</td>
		<td>85</td>
		<td><a href="">编辑</a></td>
		<td><a href="">删除</a></td>
	</tr>
<!-- 	<tbody>
		<tr bgcolor="lightyellow">
			<td colspan="2">平均:</td>
			<td>88</td>
			<td>59</td>
			<td>85</td>
		</tr>
	</tbody> -->
</table>
<p align="center">
	<a href="">首页</a>
	<a href="">上一页</a>
	<a href="">...</a>
	<a href="">下一页</a>
	<a href="">尾页</a>
</p>

</body>
</html>

志男

关注

11
点赞
踩
66

收藏

觉得还不错? 一键收藏
5
评论
html表格的常用样式

行跟列背景颜色的选择，合并等列的颜色选择代码 <colgroup span="1" bgcolor="lightgreen"></colgroup> <colgroup span="1" bgcolor="lightyellow"></colgroup> <colgroup span="2" bgcolor="lightgreen"> <col bgcolor="lightgray"> <col> <
复制链接

扫一扫

专栏目录