表格及表单:
语法:<th></th>
<caption></caption>
th标记表格内表头单元格,是单元格标题
caption标记表示鸟哥的名称,也叫表格标题
caption-side:top/right/bottom/left
定义表格的caption对象放于表格二的哪个位置,与caption对象一起作用。
top为默认
left、right位置只有火狐识别
top、bottom IE6以上版本支持,IE6一下版本只识别top
隔行变色设置:
语法:双数行:tr:nth-child(2n){}
单数行:tr:nth-chiled(2n+1){}说明:设置单数(odd)单元格的样式和双数(even)单元格的样式
tr:nth-child(2n){ background: #008000; }
重要的功能表格的合并:
表格html重要属性:
1、colspan="value" 合并列2、rowspan=“value”合并行
3、valign=“top/bottom/middle/baseline(基线)”垂直对齐方式
4、rules=“group/rows/cols/all/none”添加分割线
说明:rows:位于行之间的线条
cols:位于列之间的线条
all:位于行和列之间的线条
none:没有线条
group:位于行组合列组之间的线条(行数据分组:
thead:表头
tbody:表体
tfoot:表尾)说明一个表格只可以包含一个thead,一个tfoot,可以包含多个tbody
数据列分组(添加组分割线(rules))
<colgroup span="value"></colgroup>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> caption{ font-size: 20px; } tr:nth-child(even){ background: #008000; } td{ border: 1px solid red; text-align: center; } </style> </head> <body> <table border="1px" cellspacing="0" cellpadding="0" rules="groups"> <caption>表格标题</caption> <thead> <tr> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <td colspan="4">伟大的马克思主义 </td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody> <tbody> <tr> <td colspan="4">中国伟大 </td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody> <tfoot> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tfoot> </table> </body> </html>