电脑故障

table标签的结构与合并单元格的实现方法

发布日期：2019/5/10

以下是对table标签的结构与合并单元格的实现方法进行了详细的分析介绍需要的朋友可以过来参考下

<table>标签的结构
示例代码

复制代码代码如下:
<table border="">
<caption>信息统计表</caption>
<thead>
<tr >
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>

一个完整的例子

复制代码代码如下:
<table border="">
<caption class="textcenter">信息统计表</caption>
<thead>
<tr >
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr>
<tr class="warning">
<td></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr>
<tr class="info"> <td></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr>
<tr class="success">
<td></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

合并上下的单元格（rowspan）
示例代码

复制代码代码如下:
<table border="">
<caption class="textcenter">信息统计表</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=""></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr> <tr class="warning">
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr> <tr class="info"> <td></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr> <tr class="success"> <td></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

合并左右的单元格（colspan）
示例代码

复制代码代码如下:
<table class="table tablecondensed tablebordered">
<caption class="textcenter">信息统计表</caption>
<thead>
<tr >
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td></td>
<td colspan=""><p class="textcenter">这是合并了四个单元格</p></td>
</tr>
<tr class="warning">
<td></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr>
<tr class="info">
<td></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr>
<tr class="success">
<td></td>
<td>qian</td>
<td>shou</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

上一篇：执行、获取远程代码返回:file

下一篇：如何解决CI框架的Disallowed Key Characters错误提示