css怎样设置每个单元格颜色不一样

html-css048

css怎样设置每个单元格颜色不一样,第1张

1、新建一个html文件，命名为test.html，用于讲解css如何定义表格内外边框颜色各不相同。

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表格