收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS对于表格的档式控制</title>
<style>
table,th,td{
border:2px solid #333;
}
table{
border-collapse: collapse;/*表格线拆叠*/
width:70%;/*表格宽度*/
margin: auto;/*表格居中*/
}
th,td{
padding:10px;/*设置表格大小*/
}
table caption{
font-size:1.5em;/*字体大小*/
font-weight:bolder;/*字体加粗*/
}
tr.title{
background-color: skyblue;
font-style: italic;/*倾斜*/
}
td.time{
background-color: lightgreen;
font-size: italic;
}
td.warning{
background-color: darkorange;
}
</style>
</head>
<body>
<table>
<caption>百度推广</caption>
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>php</td>
<td>html</td>
<td>javascript</td>
<td>mysql</td>
<td>1234564</td>
</tr>
<tr>
<td>php</td>
<td>html</td>
<td>javascript</td>
<td>mysql</td>
<td>1234564</td>
</tr>
<tr>
<td>php</td>
<td>html</td>
<td>javascript</td>
<td>mysql</td>
<td>1234564</td>
</tr>
<tr>
<td>php</td>
<td>html</td>
<td>javascript</td>
<td>mysql</td>
<td>1234564</td>
</tr>
<td rowspan="4">下午</td>
<tr>
<td>php</td>
<td>html</td>
<td>javascript</td>
<td>mysql</td>
<td>1234564</td>
</tr>
<tr>
<td>php</td>
<td>html</td>
<td>javascript</td>
<td>mysql</td>
<td>1234564</td>
</tr>
<tr>
<td colspan="2" align="center">重要通知</td>/*跨二列*/
<td colspan="4" align="center">周五放学后打扫卫生</td>/*跨四列*/
</tr>
</body>
</table>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
