- 表格的基本形式：table>tbody>tr>th*5^(tr*4>td*5)。
View Code<table><!-- 表格 --> <caption><!-- 表格标题 --> this is table title! </caption> <tbody> <tr><!-- 行 --> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> </table>
- 表格需要注意的几点：
1、不要给table,th,td以外的表格标签加样式；table 的标签基本特性是: display:table;
2、单元格默认平分table 的宽度；表格可以嵌套。
3、th里面的内容默认加粗并且左右上下居中显示
4、td里面的内容默认上下居中左右居左显示
5、 table 决定了整个表格的宽度；
6、table里面的单元格宽度会被转换成百分比；
7、 表格里面的每一列必须有宽度；
8、表格同一竖列继承最大宽度；
9、表格同行继承最大高度； - 表格css写法及说明。
View Code
th,td{padding:0;}/*表格其它无默认样式，只有单元格有padding*/ table{border-collapse:collapse;}/*合并边框间距*/ /* table css reset */ th,td{border:1px solid black; height:50px; 100px;} table{500px;} td{border-spacing: 10px 30px;} /*边框间距，10像素水平间距，30像素垂直边距，但不支持ie6*/ <td colspan="2" rowspan="2">单元格</td> /* colspan 属性规定单元格可横跨的列数。 rowspan 属性规定单元格可横跨的行数。*/ tr:nth-child(2n){background-color: #fff;} /*偶数行添加背景颜色，但只支持ie9+*/
- css创建表格显示：
View Code
<body> <div id="tablecontainer"><!-- 表格主体 --> <div id="tablerow"><!-- 行 --> <div id="main"><!-- 单元格 --> .... </div> <div id="sidebar"><!-- 单元格 --> .... </div> </div> </div> </body>
View Code#tablecontainer { display: table; border-spacing: 10px;/* 这和外边距创建的空间不会折叠 */ } #tablerow { display:table-row; } #main { display:table-cell; } #sidebar { display:table-cell; }2016-06-15 22:15:04
