html合并單元格怎么弄?

Table合并單元格2種方式

·跨行合并：rowspan="合并單元格的個(gè)數(shù)"

·跨列合并：colspan="合并單元格的個(gè)數(shù)"

下面通過(guò)一個(gè)案例來(lái)演示Table合并單元格

待合并表格

合并前代碼

<table border="1" cellspacing="0" cellpadding="0" width="600" height="300" align="center">
    <caption>個(gè)人信息表</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>個(gè)人簡(jiǎn)介</strong></td>
            <td>個(gè)人簡(jiǎn)介</td>
            <td>個(gè)人簡(jiǎn)介</td>
            <td>個(gè)人簡(jiǎn)介</td>
        </tr>
        <tr>
            <td><strong>個(gè)人作品</strong></td>
            <td>個(gè)人作品</td>
            <td>個(gè)人作品</td>
            <td>個(gè)人作品</td>
        </tr>
    </tbody>
</table>

合并后代碼

<table border="1" cellspacing="0" cellpadding="0" width="600" height="300" align="center">
    <caption>個(gè)人信息表</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>個(gè)人簡(jiǎn)介</strong></td>
            <!-- 合并列 -->
            <td colspan="3">個(gè)人簡(jiǎn)介</td>
        </tr>
        <tr>
            <td><strong>個(gè)人作品</strong></td>
            <!-- 合并列 -->
            <td colspan="3">個(gè)人作品</td>
        </tr>
    </tbody>
</table>

上面案例通過(guò)rowspan和colspan實(shí)現(xiàn)合并效果，你學(xué)會(huì)了嗎?加QQ：435946716免費(fèi)獲取Html5+CSS+Javascript教程。

猜你喜歡：

HTML5新增的結(jié)構(gòu)標(biāo)簽有哪些？

Html5 aside標(biāo)簽的用法和作用

什么是HTML語(yǔ)義化？HTML語(yǔ)義化有哪些好處？

Html5是什么?HTML5的發(fā)展歷程介紹

黑馬程序員web前端開發(fā)培訓(xùn)課程