• <nav id="dstbx"></nav>

    <nav id="dstbx"></nav>
    1. <form id="dstbx"></form>
    2. <small id="dstbx"></small>

      教育行業A股IPO第一股(股票代碼 003032)

      全國咨詢/投訴熱線:400-618-4000

      table合并單元格怎么弄?

      更新時間:2021年07月26日13時42分 來源:傳智教育 瀏覽次數:

      Table標簽介紹
      標簽名 定義 說明
      <table></table> 表格標簽 就是一個四方的盒子
      <tr></tr> 表格行標簽 行標簽要再table標簽內部才有意義
      <td></td> 單元格標簽 單元格標簽是個容器級元素,可以放任何東西
      <th></th> 表頭單元格標簽 它還是一個單元格,但是里面的文字會居中且加粗
      <caption></caption> 表格標題標簽 表格的標題,跟著表格一起走,和表格居中對齊
      clospan 和 rowspan 合并屬性 用來合并單元格的

      Table合并單元格2種方式

      ·跨行合并:rowspan="合并單元格的個數"

      ·跨列合并:colspan="合并單元格的個數"

      下面通過一個案例來演示Table合并單元格

      合并單元格實例教程
      待合并表格

      合并前代碼

      <table border="1" cellspacing="0" cellpadding="0" width="600" height="300" align="center">
          <caption>個人信息表</caption>
          <tbody align="center">
              <tr>
                  <td><strong>姓名:</strong>劉德華</td>
                  <td><strong>性別:</strong></strong>男</td>
                  <td><strong>年齡:</strong></strong>18</td>
                  <td>照片</td>
              </tr>
              <tr>
                  <td><strong>身高:</strong>180</td>
                  <td><strong>民族:</strong>漢</td>
                  <td><strong>婚姻:</strong>未婚</td>
                  <td>照片</td>
              </tr>
              <tr>
                  <td><strong>個人簡介</strong></td>
                  <td>個人簡介</td>
                  <td>個人簡介</td>
                  <td>個人簡介</td>
              </tr>
              <tr>
                  <td><strong>個人作品</strong></td>
                  <td>個人作品</td>
                  <td>個人作品</td>
                  <td>個人作品</td>
              </tr>
          </tbody>
      </table>

      合并后代碼

      <table border="1" cellspacing="0" cellpadding="0" width="600" height="300" align="center">
          <caption>個人信息表</caption>
          <tbody align="center">
              <tr>
                  <td><strong>姓名:</strong>劉德華</td>
                  <td><strong>性別:</strong></strong>男</td>
                  <td><strong>年齡:</strong></strong>18</td>
                  <!-- 合并行 -->
                  <td rowspan="2">照片</td>
              </tr>
              <tr>
                  <td><strong>身高:</strong>180</td>
                  <td><strong>民族:</strong>漢</td>
                  <td><strong>婚姻:</strong>未婚</td>
              </tr>
              <tr>
                  <td><strong>個人簡介</strong></td>
                  <!-- 合并列 -->
                  <td colspan="3">個人簡介</td>
              </tr>
              <tr>
                  <td><strong>個人作品</strong></td>
                  <!-- 合并列 -->
                  <td colspan="3">個人作品</td>
              </tr>
          </tbody>
      </table>
      
      

      上面案例通過rowspan和colspan實現合并效果,你學會了嗎?加QQ:435946716免費獲取Html5+CSS+Javascript教程。



      猜你喜歡:

      如何在HTML5中嵌入視頻和音頻?

      HTML中img圖片標簽的用法?

      HTML5的優勢有哪些?

      什么是HTML,什么是H5?

      傳智教育web前端開發培訓課程

      0 分享到:
      神马影院我不卡