首頁技術文章正文

html合并單元格怎么弄?

更新時間:2021-07-26 來源:黑馬程序員 瀏覽量:

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

Table合并單元格2種方式

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

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

下面通過一個案例來演示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實現(xiàn)合并效果,你學會了嗎?加QQ:435946716免費獲取Html5+CSS+Javascript教程。



猜你喜歡:

HTML5新增的結構標簽有哪些?

Html5 aside標簽的用法和作用

什么是HTML語義化?HTML語義化有哪些好處?

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!