HTML table表格的简单实现 行列合并

先看代码

                <table style="width:80%;height:80%;margin:20px">
                  <caption>这是表格的标题</caption>
                  <!-- 表格头 -->
                  <thead>
                    <tr >
                      <th>你的ID：{{}}</th><th>房间号：{{}}</th>
                    </tr>
                  </thead>
                  <!-- 表格体 -->
                  <tbody> 
                    <tr>
                      <td>输入房间号：</td><td><input type="number" ></td>
                    </tr>
                    <tr>
                      <td>进入房间</td><td>退出房间</td>
                    </tr>
                    <tr>
                      <td  colspan="2">获取好友列表</td>
                    </tr>
                    
                    <tr >
                      <td>好友1</td><td>ID：{{}}</td>
                    </tr>

                    <tr >
                      <td>呼叫好友</td><td>取消呼叫</td>
                    </tr>
                    <tr >
                      <td>接受呼叫</td><td>拒绝呼叫</td>
                    </tr>
                    <tr>
                      <td>打开摄像头</td><td>打开麦克风</td>
                    </tr>
                    <tr>
                      <td>关闭摄像头</td><td>关闭麦克风</td>
                    </tr>
                    <tr>
                      <td rowspan="2">结束录制</td>
                      <td>位置：</td>
                    </tr>
                    <tr>
                      <td >获取版本号</td>
                    </tr>
                  </tbody>
                </table>

效果：

 

 

详细介绍地址：http://c.biancheng.net/view/7540.html