HTML標籤之table

對於table來講,在一些小的模塊中進行表格佈局是很是好用的。咱們能夠這樣來理解table,主要分紅table部分和td部分。ide

table部分:佈局

主要是來控制外邊框的(就是最外面一層邊框,不包括裏面部分),它擁有的屬性爲:margin屬性,border屬性,cellspacing屬性,規定單元格之間的空白cellpadding屬性,規定單元邊沿與其內容之間的空白。spa

tr部分:xml

主要來分割有幾行,通常只須要用來設定heigth。ci

td部分:it

用來控制每一個單元格的屬性,但是分別控制每一個單元格的上下左右邊框,其中也包含padding屬性。io

th部分:table

用法和td相同,只是用來區分表頭的。class

注意:並行

用百分比和用像素點是相同的。在table中,width指的是整個表格的寬度,而td的width值得指內部不包括內容content的寬度,這個同盒子模型。

如下用實例來講明table的一些經常使用佈局手法:

<table bordercolor="red" border="1" class="table_3" cellpadding="10">

<tr>
<td>11111111111111111111111</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>


<table bordercolor="red" border="1" class="table_3" cellpadding="10"> <tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr> </table>

 

註釋:

border  設置全部邊框的屬性值 border=1 數值越小邊框越細

bordercolor =」red」  指的是邊框顏色爲10

cellpadding :規定單元邊沿與其內容之間的空白.,數值越大表格越大. (表格填充,用於隔開單元格與單元格的空間)

(圖1)

cellspacing=8  單元格與單元格之間的空隙距離.把表格想象成用鐵絲作的一個框,cellspacing的屬性值就至關因而用8格像素的厚度作的表格.(如圖1)

 

 

 

th:定義表頭,能夠用來合併單元格 好比把第二行,第二三列合併.

 

    <table bordercolor="red" border="1" cellpadding="1" cellspacing="0">
        
        <tr>
            <td>11111111111111111111111</td>
            <td>2</td>
            <td>3</td>
            
        </tr>
            <tr>
                <td>4</td>
                <span style="color: #ff0000;"><th colspan="2">合併單元格</th></span>
            </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                </tr>
                    <tr>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>


如上所示:假設rowspan=2 合併兩行的同時,不刪除<td>10</td>  那最後一列就由3列變爲4列

<table bordercolor="red" border="1" cellpadding="1" cellspacing="0"> <tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <span style="color: #ff0000;"><th colspan="2">合併單元格</th></span> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr>

colspan  是列合併  colspan=」2″ 就是合併兩列

rowspan是行合併


<tr> <td>11111111111111111111111</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <th colspan="2">合併單元格</th> </tr> <tr> <<th rowspan="2">合併列</th> <td>8</td> <td>9</td> </tr> <tr> <td>11</td> <td>12</td> </tr>

<tr>
            <td>11111111111111111111111</td>
            <td>2</td>
            <td>3</td>
            
            
            
        </tr>
            <tr>
                <td>4</td>
                <th colspan="2">合併單元格</th>
            </tr>
                <tr>
                    <<th rowspan="2">合併列</th>
                    <td>8</td>
                    <td>9</td>
                </tr>
                    <tr>
                        
                        <td>11</td>
                        <td>12</td>
                    </tr>

合併行以後,把<td>10</td> 刪掉的狀況

相關文章
相關標籤/搜索