表格制作

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

原创最新推荐文章于 2023-03-15 14:02:05 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个带有交替行颜色、固定宽度、边框和内联样式的表格。通过设置表格的样式属性，如宽度、边框、高度、字体大小、背景颜色等，可以实现美观且功能性的表格布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作表格</title>
	<style>
		table{
			width:100%;
			border: 1px solid #676464;
			border-collapse: collapse;
		}
		tr{
			height:30px;
			border-bottom: 1px solid #676464;
			font-size: 12px;
		}
		th{
			font-weight:normal;
			color:#676464;
		}
		td{
			text-align:center;
		}
		.yichang{
			color:#158eee;
			cursor:pointer;
		}
		table tr:nth-of-type(2n){
			background-color:#A4A2A2;
		}
	</style>
</head>

<body>
	<table>
     <tr>
		 <th>员工姓名</th>
		 <th>OA账号</th>
		 <th>性别</th>
		 <th>员工星级</th>
		 <th>分配客户数</th>
		 <th>当前购买人数</th>
		 <th>购买人数占比例</th>
		 <th>当前销售额</th>
		 <th>产品标准销量</th>
		 <th></th>
		</tr>
		
		<tr>
		<td>张小黑</td>
	    <td>123456</td>
		<td>男</td>
		<td>5星级</td>
		<td>500</td>
		<td>500</td>
		<td>100%</td>
		<td>500</td>
		<td>300</td>
		<td class="yichang">异常处理</td>
		</tr>
		
		<tr>
		<td>张小黑</td>
	    <td>123456</td>
		<td>男</td>
		<td>5星级</td>
		<td>500</td>
		<td>500</td>
		<td>100%</td>
		<td>500</td>
		<td>300</td>
		<td class="yichang">异常处理</td>
		</tr>
		
		<tr>
		<td>张小黑</td>
	    <td>123456</td>
		<td>男</td>
		<td>5星级</td>
		<td>500</td>
		<td>500</td>
		<td>100%</td>
		<td>500</td>
		<td>300</td>
		<td class="yichang">异常处理</td>
		</tr>
		
		<tr>
		<td>张小黑</td>
	    <td>123456</td>
		<td>男</td>
		<td>5星级</td>
		<td>500</td>
		<td>500</td>
		<td>100%</td>
		<td>500</td>
		<td>300</td>
		<td class="yichang">异常处理</td>
		</tr>
		
		<tr>
		<td>张小黑</td>
	    <td>123456</td>
		<td>男</td>
		<td>5星级</td>
		<td>500</td>
		<td>500</td>
		<td>100%</td>
		<td>500</td>
		<td>300</td>
		<td class="yichang">异常处理</td>
		</tr>
	</table>
</body>
</html>