本系列博客汇总在这里:JavaWeb_CSS 汇总
目录
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.weiyuxuan.cn</title>
</head>
<style type="text/css">
.mytable
{
border:1px solid #A6C1E4;
font-family: Arial;
border-collapse: collapse;
}
table th/*设置表头属性*/
{
border:1px solid black;
background-color: #71C1FB;
width: 100px;
height: 20px;
font-size: 15px;
}
table td/*设置行属性*/
{
font-size: 12px;
border:1px solid #A6C1E4;
text-align: center;
height: 15px;
padding-top: 5px;
}
.double /*隔行变色*/
{
background-color: orange;
}
</style>
<body>
<h1> 表格样式 </h1>
<hr/>
<table class="mytable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
<th>生日</th>
<th>工资</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>男</td>
<td>昆明</td>
<td>1995-07-7</td>
<td>12000</td>
<tr class="double">
<td>张三</td>
<td>3</td>
<td>男</td>
<td>昆明</td>
<td>1955-07-7</td>
<td>12000</td>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>男</td>
<td>昆明</td>
<td>1955-07-7</td>
<td>12000</td>
</tr>
<tr class="double">
<td>张三</td>
<td>3</td>
<td>男</td>
<td>昆明</td>
<td>1955-07-7</td>
<td>12000</td>
</tr>
</table>
</body>
</html>
如有错误,欢迎指正!