DIV CSS 佈局教程網

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

一、colspan屬性簡介

上一節課,我們介紹了HTML表格中的合並行rowspan屬性,這一節課我們接著學習表格中的合並列:colspan屬性。

語法:

<td colspan="跨度的列數">

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>合並列colspan</title>
</head>
<body>
    <table>
        <!--第1行-->
        <tr>
            <td colspan="2"> 學習網精品教程</td>
        </tr>
        <!--第2行-->
        <tr>
            <td>HTML教程</td>
            <td>CSS教程</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>jQuery教程</td>
            <td>SEO教程</td>
        </tr>
    </table>
</body>
</html>

在浏覽器預覽效果如下:

分析:

對於單元格“<td> 學習網精品教程</td>”,如果我們沒有加上colspan="2",在浏覽器預覽效果就變成下面那樣:

大家仔細琢磨代碼中,合並行是怎麼實現的。

【小技巧】:表格合並行和表格合並列在內容不能完全放於一個單元格內時非常有用。通過跨越許多單元格,不需要改變表格就能將更多的文字放入單元格。

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