對於table來說,在一些小的模塊中進行表格佈局是非常好用的。我們可以這樣來理解table,主要分成table部分和td部分。
table部分:
主要是來控制外邊框的(就是最外面一層邊框,不包括裏面部分),它擁有的屬性爲:margin屬性,border屬性,cellspacing屬性,規定單元格之間的空白cellpadding屬性,規定單元邊沿與其內容之間的空白。
tr部分:
主要來分割有幾行,一般只需要用來設定heigth。
td部分:
用來控制每個單元格的屬性,可是分別控制每個單元格的上下左右邊框,其中也包含padding屬性。
th部分:
用法和td相同,只是用來區分表頭的。
注意:
用百分比和用像素點是相同的。在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 :規定單元邊沿與其內容之間的空白.,數值越大表格越大. (表格填充,用於隔開單元格與單元格的空間)
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> 刪掉的情況