表格介绍
表格由一行或者多行单元格组成，能够友好的对数据进行整理归类，以便对数据进行分析。
一个表格结构由以下标签组成：<table> | table标签可定义表格。在table标签内部可以放置表格的标题、行、列<caption> | caption可以定义一个表格标题。该标签紧跟在table标签后，每个表格只能定义一个标题。标题通常会显示在表格最上方<th> | 定义表格内的表头单元格 文本会显示为粗体居中<tr> | 在表格中定义行<td> | 在表格中定义列<thead> | 定义表格的表头<tbody> | 定义表格的主题<tfoo> | 定义表格的页脚
表格修饰
首先创建一个table的框架
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格内容A</td>
<td>表格内容B</td>
</tr>
<tr>
<td>表格内容C</td>
<td>表格内容D</td>
</tr>
<tr>
<td>表格内容E</td>
<td>表格内容F</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">这里是tfoot</td>
</tr>
</tfoot>
</table>
默认的表格样式如下：
惨不忍睹，下面就给表格添加样式
<style type="text/css">
table{
width:300px;
border:1px solid #E8E8E8;
font:normal 15px/1.5 Arial;
text-align: center;
}
caption{
font-size: 20px;
}
tfoot{
text-align: right;
font:15px/1.5 "楷体";
}
th{
background-color:#CDCDCD;
}
tbody td{
background-color:#E8E8E8;
}
</style>
刷新下页面 美观多了
这里还可以利用之前说到的子选择器与相邻选择器的方式进行样式调整，比如将第一列字体设置为绿色，第二列为红色。
tr>td{
color: green;
}
tr>td+td{
color: red;
}
非常容易实现我们想要的效果
下面把单元格的背景色去掉 给单元格添加边框：
<style type="text/css">
table{
width:300px;
border:1px solid #E8E8E8;
font:normal 15px/1.5 Arial;
text-align: center;
}
caption{
font-size: 20px;
}
tfoot{
text-align: right;
font:15px/1.5 "楷体";
}
th{
border:1px solid #E8E8E8;
}
td{
border:1px solid #E8E8E8;
}
tr>td{
color: green;
}
tr>td+td{
color: red;
}
</style>
效果如下：
但是表格单元格之间的空白并不是想要的。
可以在table中设置border-collapse: collapse;使边框合并
隔行换色表格
有时候由于表格行数太多，为了增加表格数据的可视性，可以让表格隔行换色
使用相邻选择器
首先把HTML框架搭好,在原来的基础上复制几行
然后先使用相邻选择器的方式实现隔行换色：
<style type="text/css">
table{
width:300px;
border:1px solid #000;
font:normal 15px/1.5 Arial;
text-align: center;
border-collapse: collapse;
}
caption{
font-size: 20px;
}
tfoot{
text-align: right;
font:15px/1.5 "楷体";
}
th{
border:1px solid #000;
}
td{
border:1px solid #000;
background-color: #CDCDCD;
}
tr+tr td{
background-color: #E8E8E8;
}
tr+tr+tr td{
background-color: #CDCDCD;
}
tr+tr+tr+tr td{
background-color: #E8E8E8;
}
tr+tr+tr+tr+tr td{
background-color: #CDCDCD;
}
tr+tr+tr+tr+tr+tr td{
background-color: #E8E8E8;
}
</style>
效果是实现了，但是行数过多的情况下要添加很多CSS样式代码，此时这种方式是行不通的
使用类选择器
可以给tr添加类选择器，这样就很简单了。
<tbody>
<tr class="tr_bg1">
<td>表格内容A</td>
<td>表格内容B</td>
</tr>
<tr>
<td>表格内容C</td>
<td>表格内容D</td>
</tr>
<tr class="tr_bg1">
<td>表格内容E</td>
<td>表格内容F</td>
</tr>
<tr>
<td>表格内容G</td>
<td>表格内容H</td>
</tr>
<tr class="tr_bg1">
<td>表格内容I</td>
<td>表格内容J</td>
</tr>
<tr>
<td>表格内容K</td>
<td>表格内容L</td>
</tr>
</tbody>
CSS就少多了
<style type="text/css">
table{
width:300px;
border:1px solid #000;
font:normal 15px/1.5 Arial;
text-align: center;
border-collapse: collapse;
}
caption{
font-size: 20px;
}
tfoot{
text-align: right;
font:15px/1.5 "楷体";
}
th{
border:1px solid #000;
}
td{
border:1px solid #000;
background-color: #E8E8E8;
}
.tr_bg1 td{
background-color: #CDCDCD;
}
</style>
这时候效果跟刚才是一样的。但是如果要修改为隔N行换色就需要修改HTML了，当然也可以在类选择器的基础上添加相邻选择器来修改样式。具体用哪种方式要根据具体的条件背景和要求了。
使用背景图片
要使用背景图片，首先要准备一张平铺图 如下：
修改CSS代码如下：
<style type="text/css">
table{
width:300px;
border:1px solid #000;
font:normal 12px/1.5 Arial;
text-align: center;
border-collapse: collapse;
background:url(images/td_bg.gif) repeat 0 0;
}
caption{
font-size: 20px;
}
tfoot{
text-align: right;
font:12px/1.5 "楷体";
}
th{
height: 20px;
border-right:1px solid #000;
}
td{
height: 20px;
border-right:1px solid #000;
}
</style>
效果如下：
但是这种方式需要精确计算图片大小、行高以及字体大小。比如我们将字体调大为26px 这是就会发生错位现象
除了隔行换色的方式，其实还可以给tr添加hover来增加表格的可视性，在一些炫酷的表格中还可以使用box-shadow来增加立体效果，当然这些都是CSS3的属性。这里就不展示了，以后应该会专门写一些CSS的学习笔记来展示