HTML5 表格

表格 <table>

代码

<table border="1"> <!-- border="1" 显示边框  -->
 <!-- 表格头部 -->
 <thead> 
  <tr> <!-- 行 -->
   <th>性别</th><th>年龄</th> <!-- 列 -->
  </tr>
 </thead>

 <!-- 表格主体 -->
 <tbody>
  <tr>
   <td>男</td><td>21</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>女</td><td>35</td>
  </tr>
 </tbody>
</table>

效果

性别年龄
21
35

行合并 colspan

代码

<tr>
 <th colspan="2">数字</th> <!-- colspan="2" 2行合并 -->
</tr> 
<tr>
 <td>233</td> <td>666</td>
</tr>

效果

数字
233666

列合并 rowspan

代码

<tr>
 <td rowspan ="2">数字</td> <td>233</td> <!-- rowspan="2" 2列合并-->
</tr> 
<tr>
 <td>666</td>
</tr>

效果

数字233
666
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程