HTML表格布局

最新推荐文章于 2024-02-16 23:45:17 发布

m123456.

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量3.5k

点赞数

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

本文链接：https://blog.csdn.net/m0_64482760/article/details/125964991

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML中可以在网页上制作表格

表格标签

<table> ------- 用于定义一个表格；

<thead> ---- 定义表头；

<tr> ---- 行；

<td> ---- 列单元格必须放在 tr；

<tbody> --- 主干；

<tfoot>----- 尾；

表格属性

width---宽度（单位：像素px，百分比%）；

height---高度（单位：像素px，百分比%）；

border---边框（取值是数字，单位是像素，取值为零是没有边框，注意：取值必须为整数）

cellpadding --- 表格边距（单元格内元素距离单元格边缘的距离）

cellspacing --- 表示表格间距（单元格与单元格之间的距离）

效果展示：

在表格的上下方，文字的布局，我用到了CSS技术，用它来修饰<body>标签内的内容。

标签选择器（根据标签的名称获取），例如：

h1{
     	font-family: "宋体";
     	text-align:center;
     	color: red;
     }

ID 选择器（根据 id 为 XXX 的标签），例如：

#box1{
     	left:150px;
     	position: absolute;
     }

类选择器 ( 根据 class 为 XXX 的标签 )，例如：

.one{
     	left:150px;
     	position: absolute;
     }

注意：在使用left和right属性时可以用QQ自带的截屏功能来查看像素值：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>物资验收入库单</title>
	<style type="text/css">
     h1{
     	font-family: "宋体";
     	text-align:center;
     	color: red;
     }
     td{
     	text-align:center;
     }
     #box1{
     	left:150px;
     	position: absolute;
     }
     #box2{
     	right:205px;
     	position: absolute;

     }
     #box3{
     	left:150px;
     	position: absolute;
     }
     #box4{
     	right:150px;
     	position: absolute;
     }
     .one{
     	left:150px;
     	position: absolute;
     }
     .two{
     	left:458px;
     	position: absolute;
     }
     .three{
     	left:722px;
     	position: absolute;
     }
     .four{
     	left:150px;
     	position: absolute;
     }
     .five{
     	left:150px;
     	position: absolute;
     }
	</style>
</head>
<body>
	<h1>物资验收入库表</h1>
    <div id="box1">物资编号:</div> <div id="box2">NO:</div><br>
    <div id="box3">合同编号:</div> <div id="box4">年&nbsp&nbsp&nbsp&nbsp月&nbsp&nbsp&nbsp&nbsp日</div><br>
	<table  align="center" width="80%" border="1px" cellspacing="0">
	<thead>
		<tr>
			<th align="center">物资名称</th>
			<th >规格型号</th>
			<th >单位</th>
			<th colspan="2">数     量</th>
			<th colspan="2">计划 价格</th>
			<th colspan="2">实际 价格</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>&nbsp</td>
			<td>&nbsp</td>					
			<td>&nbsp</td>
			
				<td>采购数</td>
				<td>实收数</td>

				<td>单价</td>
				<td>金额</td>
		
				<td>单价</td>
				<td>金额</td>
		
		</tr>
		<tr>
			<td>&nbsp</td>
			<td>&nbsp</td>					
			<td>&nbsp</td>
			
				<td></td>
				<td></td>
			
				<td></td>
				<td></td>
		
				<td></td>
				<td></td>
		
		</tr>
		<tr>
			<td>&nbsp</td>
			<td>&nbsp</td>					
			<td>&nbsp</td>
			
				<td></td>
				<td></td>
			
				<td></td>
				<td></td>
		
				<td></td>
				<td></td>
		
		</tr>
		<tr>
			<td>&nbsp</td>
			<td>&nbsp</td>					
			<td>&nbsp</td>
			
				<td></td>
				<td></td>
			
				<td></td>
				<td></td>
		
				<td></td>
				<td></td>
		
		</tr>
		<tr>
			<td>&nbsp</td>
			<td>&nbsp</td>					
			<td>&nbsp</td>
			
				<td></td>
				<td></td>
			
				<td></td>
				<td></td>
		
				<td></td>
				<td></td>
		
		</tr>
		<tr>
			<td>供应单位</td>
			<td colspan="4"></td>
			<td>运杂费</td>
			<td colsspan="3"></td>
		</tr>
		<tr>
			<td  align="center" ><br><br>备<br>注<br><br><br><br></td>
			<td colspan="8"></td>
		</tr>
	</tbody>
	</table>
	<p class="one">部门经理:</p><p class="two">验收:</p><p class="three">保管:</p><br>
	<p class="four">尺寸:11CM*18CM</p><br>
	<p class="five">比例:1:1&nbsp&nbsp&nbsp&nbsp一式四联，一联采购，一联仓库，一联财务报销，一联仓库转财务，每联用颜色区分。</p>
</body>
</html>