表格制作

最新推荐文章于 2023-03-15 14:02:05 发布

一切会更好

最新推荐文章于 2023-03-15 14:02:05 发布

阅读量173

点赞数

分类专栏： java前端文章标签：简单表格的制作

本文链接：https://blog.csdn.net/weixin_45165848/article/details/96623270

版权

java前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

表格不能用来做页面布局只能做报表
border:控制边框
cellspacing：单元格之间的间距
cellpadding：单元格的内边距
thead是表头
tbody是表格的主体部分
tr是行
td th都是单元格 th同时默认字体加粗
colspan：合并行
rowspan：合并列
colgroup ：控制列宽
代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table {
				border-collapse: collapse;
				边线合并 border: 1px solid #FFFFFF;
			}
			
			thead tr th,
			tbody tr td,
			tbody tr th {
				border: 1px solid#FFFFFF;
				text-align: center;
			}
			.header{
				background: blue;
			}
			tbody{
				background: blueviolet;
			}
		</style>
	</head>

	<body>
		<table class="table" border="1" cellspacing="0" cellpadding="0">
			<colgroup>
				<!-- 控制列宽-->
				<col width="5%" />
				<col />
				<col />
				<col />
				<col />
			</colgroup>
			<thead>
				<tr class="header">
				
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>

				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Data</td>
					<td>Data</td>
					<td rowspan="2">Data</td>
					<td>Data</td>

				</tr>
				<tr>			
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
					<tr>	
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					
					<td>Data</td>
					<td>Data</td>
					<td colspan="2">Data</td>

			</tbody>

		</table>
	</body>

</html>

运行截图

在这里插入图片描述