【html】用html+css实现银行的账户信息表格

我们先来看一看某银行的账户信息表格

我们自己也可以实现类似的效果

效果图:

大家可以看到，其实效果差不多

接下来看看我们实现的代码

源码：

html 复制代码

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>模拟银行</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				color: #3f3f3f;
			}
			
			.container {
				padding-left: 10px !important;
				padding-right: 10px !important;
			}
			
			table {
				border: 1px solid #dedede;
				display: table;
				box-sizing: border-box;
				text-indent: initial;
				border-spacing: 2px;
				border-collapse: collapse;
				width: 898px;
				height: 80px;
			}
			
			
			tr {
				
				height: 40px;
				width: 10%;
				border: none;
				background: #dddddd;
				font-size: 14px;
				color: #3f3f3f;
				font-weight: normal;
				text-align: center;
			
			}
			
			th{		
				    padding-right: 36px;
				    width: 9%;
				    height: 40px;
				    border: none;
					
			}
			tbody td{
				background-color: #fff;
			}
			tbody  td{
			    font: 14px/1.5 '微软雅黑',Arial,Helvetica,Tahoma,sans-serif;
			    border-collapse: collapse;
			    border-spacing: 0;
			    padding: 0;
			    font-size: 14px;
			    color: #3f3f3f;
			    text-align: center;
			    height: 40px;
			    border: none;	
			}
			
			tbody .tar{
				text-align: right !important;
			}
			
			.table_th_money {
			    padding-right: 36px;
			    width: 9%;
			}
			.font_money {
			    font-family: Arial;
			    font-weight: bold;
			    color: #d62f2f;
			}
			
			a{
				text-decoration: none;
			}
			a:link,a:visited
			{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<table class="one_lines_table" width="100%">
				<thead>
					<tr>
						<th>开户日期</th>
						<th>类型</th>
						<th>币种</th>
						<th class="tar table_th_money">账户余额</th>
						<th class="tar table_th_money">可用余额</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<script>
								formatDate('20230925')
							</script>2023-09-25
						</td>
						<td> 活期储蓄 </td>
						<td>人民币</td>
						<td class="tar"> <span class="font_money table_th_money">
								<script>
									formatAmt('629.28')
								</script>629.28
							</span> </td>
						<td class="tar"> <span class="font_money table_th_money">
								<script>
									formatAmt('629.28')
								</script>629.28
							</span> </td>
						<td> <a href="#" class="detail pr_5">明细</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

建议和优化：

表格宽度 : 你设置了table的width为898px，但这可能不是最灵活的解决方案，特别是当考虑到不同屏幕尺寸的响应式设计时。一个更好的做法可能是使用百分比或max-width来限制表格的最大宽度，同时允许它在较小的屏幕上缩小。
行和列的宽度 : 你为每个<tr>元素设置了width: 10%;，但实际上<tr>元素不控制列的宽度，而是<th>和<td>元素控制列的宽度。对于<tr>元素，你其实只需要设置height。
使用border-collapse : 你已经设置了border-collapse: collapse;在table元素上，这是正确的，因为它会合并相邻的单元格边框。
内边距和外边距 : .container中的padding-left和padding-right被设置为10px，这是可以的，但请确保这符合你的整体布局和设计需求。
字体设置 : 你已经在tbody td中设置了字体相关的样式，但.font_money类也定义了字体样式。确保这些样式不会相互冲突，并且你确实需要这些额外的类。
JavaScript函数 : 你需要确保formatDate和formatAmt这两个JavaScript函数已经在页面的某个地方被正确定义。例如，你可能需要在<script>标签内或在外部JavaScript文件中定义它们。
表格标题的对齐 : 你已经使用.tar类来将某些列的文本对齐到右侧，这是通过text-align: right;实现的。这是正确的做法。
响应式设计: 考虑添加媒体查询（Media Queries）来优化不同屏幕尺寸下的表格布局。例如，在小屏幕上，你可能希望表格的列堆叠起来而不是水平排列。
代码组织 : 为了提高代码的可读性和可维护性，建议将CSS规则分组到更具体的类或ID下，而不是使用通配符*。此外，考虑将CSS代码移到单独的.css文件中，并链接到HTML文件。
语义化HTML : 你的HTML结构看起来是合理的，但请确保你使用的是语义化的HTML元素。例如，<thead>, <tbody>, <th>, 和 <td> 是正确的表格元素。