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