一,html之表格
1,一个完整的html表格所包含的元素
<!--一个完整的html表格--> <!--cellpadding代表单元格内的文字和单元格边框之间的间距--> <!--cellspacing代表单元格和单元格之间的间距--> <!--caption可以不是table的第一个子元素,但总是显示在表格最上方--> <!--表格结构:thead / tbody / tfoot--> <table border="1" cellpadding="1" cellspacing="1"> <caption>我是表格的说明文字</caption> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>位置</th> </tr> </thead> <tbody> <tr> <th>马内</th> <td>25</td> <td>左边锋</td> </tr> <tr> <th>萨拉赫</th> <td>25</td> <td>右边锋</td> </tr> <tr> <th>库蒂尼奥</th> <td>25</td> <td>攻击型中场</td> </tr> </tbody> <tfoot> <tr> <th colspan="3">©2017利物浦球员欧冠大名单</th> </tr> </tfoot> </table>
2,单独用于处理列的元素
上述表格中的元素都是按行排列的,想对某一行应用某种css样式很容易,但是如果想对某一列应用某种css样式就不方便了。html表格元素中专门定义了一些标签元素用于处理列,如下所示:
<table border="1" cellpadding="1" cellspacing="1"> <caption>我是表格的说明文字</caption> <!--单独处理列有两种方法:--> <!--1,colgroup标签,其span属性指定处理几列;--> <!--2,位于colgroup标签中的col标签,其span属性同样是指定处理几列,如果没有span属性则col代表一列--> <!--另外,跨列的不规则单元格被计入其起始列--> <colgroup span="2" style="background-color: red"></colgroup> <colgroup > <col style="background-color: blue" /> <col span="2" style="background-color: green" /> </colgroup> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>位置</th> <th>国籍</th> <th>原俱乐部</th> </tr> </thead> <tbody> <tr> <th>马内</th> <td>25</td> <td>左边锋</td> <td>塞内加尔</td> <td>南安普顿</td> </tr> <tr> <th>萨拉赫</th> <td>25</td> <td>右边锋</td> <td>埃及</td> <td>罗马</td> </tr> <tr> <th>库蒂尼奥</th> <td>25</td> <td>攻击型中场</td> <td>巴西</td> <td>国际米兰</td> </tr> </tbody> <tfoot> <tr> <th colspan="5">©2017利物浦球员欧冠大名单</th> </tr> </tfoot> </table>
二,css之表格布局(实际上,HTML Table使用标签<table>
、<tr>
、<td>
等标签,就是使用CSS Table的相关属性来实现的)
1,http://www.css88.com/archives/6308