2、在test.html文件内,使用table标签创建一个表格,用于测试。
3、在test.html文件内,设置table标签的class属性为otwo。
4、在css标签内,通过class定义表格的外边框的颜色,例如,这里使用border属性设置外边框颜色为红色。
5、在css标签内,再通过class定义表格内边框的颜色,即td单元格的颜色,例如,这里设置为蓝色。
用colspan="3"来制定某一列的跨度。示例代码:
======================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>上海********有限公司</title>
<style>
body{
background-color:#ffffff
}
#container
{
margin:0 auto
width:936px
}
.datalist{
text-align:center
border:1px solid #0058a3
font-family:宋体
border-collapse:collapse
background-color:#eaf5ff
font-size:16px
}
.datalist caption{
padding-bottom:7px
padding-top:10px
font-family:黑体
text-align:center
font-size:20px
}
.datalist th{
border:1px solid #0058a3/* 行名称边框 */
background-color:#4bacff/* 行名称背景色 */
color:#FFFFFF /* 行名称颜色 */
font-weight:normal
padding-top:9pxpadding-bottom:6px
padding-left:15pxpadding-right:15px
text-align:center
}
.datalist td{
border:1px solid #0058a3/* 单元格边框 */
text-align:center
padding-top:3pxpadding-bottom:3px
padding-left:7pxpadding-right:7px
}
.datalist tr.altrow{
background-color:#c7e5ff
}
</style>
</head>
<body>
<div id="container">
<table class="datalist" summary="净值和收益率表格">
<caption>净值和收益率表</caption>
<tr>
<th scope="col" >理财产品aaaaa</th>
<th scope="col" colspan="3">成立日期:2009年3月8日</th>
</tr>
<tr>
<th scope="col">公布日期</th>
<th scope="col">单位净值</th>
<th scope="col">单位累计净值</th>
<th scope="col">单位累计净值增长率</th>
</tr>
<tr><!-- 奇数行 -->
<td>2010年4月2日</td>
<td>1.04913</td>
<td>1.04913</td>
<td>4.913%</td>
</tr>
<tr class="altrow"> <!-- 偶数行 -->
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>50%</td>
</tr>
<tr><!-- 奇数行 -->
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
</tr>
</table>
<div>
</body>
</html>
CSS表格单元格占两行可以参考以下的代码:
<!-- 这是占两行的 -->
<table border=1>
<tr><td rowspan="2">单元格占两行的</td><td>......</td></tr>
<tr><td>....</td><tr>
</table>
<!-- 这是占两列的 -->
<table border=1>
<tr><td colspan="2">单元格占两列的</td></tr>
<tr><td>..........</td><td>..........</td><tr>
</table>
扩展资料:
CSS 表格属性
表格边框
如需在 CSS 中设置表格边框,请使用 border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框:
table, th, td
{
border: 1px solid blue
}
请注意,上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框,请使用 border-collapse 属性。
折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框:
table
{
border-collapse:collapse
}
table,th, td
{
border: 1px solid black
}
参考资料来源:百度百科-CSS表格