<table>标签的结构和合并单元格的方法
1.<table>标签的结构
示例代码:
<table border="1"> <caption>信息统计表</caption> <thead> <tr > <th>#</th> </tr> </thead> <tbody> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> </tbody> </table>
一个完整的例子:
<table border="1"> <caption class="text-center">信息统计表</caption> <thead> <tr > <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Phone</th> <th>QQ</th> </tr> </thead> <tbody> <tr class="error"> <td>1</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> <tr class="warning"> <td>2</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> <tr class="info"> <td>3</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> <tr class="success"> <td>4</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> </tbody> </table>
2.合并上下的单元格(rowspan)
示例代码:
<table border="1"> <caption class="text-center">信息统计表</caption> <thead> <tr > <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Phone</th> <th>QQ</th> </tr> </thead> <tbody> <tr class="error"> <td rowspan="2">1</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> <tr class="warning"> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> <tr class="info"> <td>3</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> <tr class="success"> <td>4</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> </tbody> </table>
3.合并左右的单元格(colspan)
示例代码:
<table class="table table-condensed table-bordered"> <caption class="text-center">信息统计表</caption> <thead> <tr > <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Phone</th> <th>QQ</th> </tr> </thead> <tbody> <tr class="error"> <td>1</td> <td colspan="4"><p class="text-center">这是合并了四个单元格</p></td> </tr> <tr class="warning"> <td>2</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> <tr class="info"> <td>3</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> <tr class="success"> <td>4</td> <td>qian</td> <td>shou</td> <td>11111111111</td> <td>111111111</td> </tr> </tbody> </table>