現在的WEB前端都是DIV+CSS布局,很少有使用表格的了(是不是爆露了年齡?),不過后臺也有很多使用表格布局的,表格布局可以很方便的勾畫出一個直見的數據展示區域。今天就有做后端的小伙伴問關于HTML中表格的合并問題

HTML表格的行合并

HTML表格合并多行或合并多列

HTML table標簽的td可以橫行合并的,只需要添加一個“colspan”即可,值就是你要合并單元格的個數

HTML代碼
<table>
    <tr>
        <td></td>
        <td ></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
        <td></td>
    </tr>
</table>

HTML表格的列合并

HTML表格合并多行或合并多列

HTML table標簽的td可以橫行合并的,當然也可以豎向合并的,我們只要添加一個rowspan屬性,然后把它的值設成你要合并的單元格個數

<table>
    <tr>
        <td rowspan="3"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
     <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

演示代碼下載:

表格合并演示平臺 : 所有平臺  |  分類 : 編程開發  |  大小 : 0.01 MB