DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 6.5 合並行rowspan
6.5 合並行rowspan
編輯:HTML入門知識     

一、rowspan屬性簡介

在設計表格時,有時需要將兩個或更多的相鄰單元格組合成一個單元格,經常使用word的人都會操作過。在HTML中,這就需要用到“表格合並行”和“表格合並列”。

合並行使用td標簽的rowspan屬性,而合並列則用到td標簽的colspan屬性。在這一節,我們先來學習合並行rowspan屬性。

語法:

<td rowspan="跨度的行數">

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>合並行rowspan</title>
</head>
<body>
    <table>
        <!--第1行-->
        <tr>
            <td>姓名:</td>
            <td>小明</td>
        </tr>
        <!--第2行-->
        <tr>
            <td rowspan="2">喜歡水果:</td>
            <td>蘋果</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>香蕉</td>
        </tr>
    </table>
</body>
</html>

在浏覽器預覽效果如下:

分析:

對於單元格“<td>喜歡水果:</td>”,如果我們沒有加上rowspan="2",在浏覽器預覽效果就變成下面那樣:

可能大家一時半會沒有琢磨透合並行rowspan是怎麼實現的,沒關系,自己在在線代碼測試工具中多嘗試自己寫幾下就會了。不會也沒關系,以後回來這裡查看就行。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved