css3-表格

使用CSS3设置表格的边框及颜色：

在< body >里 < table id=”tb”>

CSS3文件里：

th是用来设置内边框的，还有tr,td

tb,th{

text-align: center; //居中
background-color: cyan;//整个表格的背景颜色
border: 1px solid blue;//边框的宽度和颜色

}

这样的边框是双条的,如果不需要这样的，可以使其折叠：（合并边框）

tb{

width: 400px;//边框的宽高
height:400px;
border-collapse: collapse;//合并边框

}

示例：

< html lang=”en”>

< head>

< meta charset=”UTF-8”>

< title>Title

< link rel=”stylesheet” type=”text/css” href=”MyCss.css” >

< /head>

< body>

< table id=”tb”>

< tr>

< th>姓名

< th>年龄

< th>性别

< /tr>

< tr>

< td>小王

< td>20

< td>男

< /tr>

< tr class=”alt”>

< td>小李

< td>24

< td>男

< /tr>

< tr>

< td>小花

< td>20

< td>女

< /tr>

< /table>

< /body>

< /html>

CSS3文件：

tb{

border-collapse:collapse;
width:500px;

}

tb td,#tb th{

border: 1px solid bisque;
padding: 5px;

}

tb th{

text-align: center;
background-color: aqua;
color: #FFFFFF;

}

tb tr.alt td{

color: black;
background-color: aqua;

}

效果图：