<!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>
博客列表 >3-3css对表格样式精准控制技术
3-3css对表格样式精准控制技术
- PHP全栈60天VIP大牛作业题原创转载
- 2018年04月15日 19:44:27700浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
