HTML标簽之table

對于table來說，在一些小的子產品中進行表格布局是非常好用的。我們可以這樣來了解table，主要分成table部分和td部分。

table部分：

主要是來控制外邊框的（就是最外面一層邊框，不包括裡面部分），它擁有的屬性為：margin屬性，border屬性，cellspacing屬性，規定單元格之間的空白cellpadding屬性，規定單元邊沿與其内容之間的空白。

tr部分：

主要來分割有幾行，一般隻需要用來設定heigth。

td部分：

用來控制每個單元格的屬性，可是分别控制每個單元格的上下左右邊框，其中也包含padding屬性。

th部分：

用法和td相同，隻是用來區分表頭的。

注意：

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

以下用執行個體來說明table的一些常用布局手法：

<code>&lt;</code><code>table</code> <code>bordercolor</code><code>=</code><code>"red"</code> <code>border</code><code>=</code><code>"1"</code> <code>class</code><code>=</code><code>"table_3"</code> <code>cellpadding</code><code>=</code><code>"10"</code><code>&gt;</code>

<code>&lt;</code><code>tr</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;11111111111111111111111&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;2&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;3&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;/</code><code>tr</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;4&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;5&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;6&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;7&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;8&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;9&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;10&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;11&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;</code><code>td</code><code>&gt;12&lt;/</code><code>td</code><code>&gt;</code>

<code>&lt;/</code><code>table</code><code>&gt;</code>

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

注釋:

border  設定所有邊框的屬性值 border=1 數值越小邊框越細

bordercolor =”red”  指的是邊框顔色為10

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

(圖1)

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

th:定義表頭,可以用來合并單元格 比如把第二行,第二三列合并.

<code>    </code><code>&lt;</code><code>table</code> <code>bordercolor</code><code>=</code><code>"red"</code> <code>border</code><code>=</code><code>"1"</code> <code>cellpadding</code><code>=</code><code>"1"</code> <code>cellspacing</code><code>=</code><code>"0"</code><code>&gt;</code>

<code>        </code> 

<code>        </code><code>&lt;</code><code>tr</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>td</code><code>&gt;11111111111111111111111&lt;/</code><code>td</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>td</code><code>&gt;2&lt;/</code><code>td</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>td</code><code>&gt;3&lt;/</code><code>td</code><code>&gt;</code>

<code>            </code> 

<code>        </code><code>&lt;/</code><code>tr</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>tr</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;4&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>span</code> <code>style</code><code>=</code><code>"color: #ff0000;"</code><code>&gt;&lt;</code><code>th</code> <code>colspan</code><code>=</code><code>"2"</code><code>&gt;合并單元格&lt;/</code><code>th</code><code>&gt;&lt;/</code><code>span</code><code>&gt;</code>

<code>            </code><code>&lt;/</code><code>tr</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>tr</code><code>&gt;</code>

<code>                    </code><code>&lt;</code><code>td</code><code>&gt;7&lt;/</code><code>td</code><code>&gt;</code>

<code>                    </code><code>&lt;</code><code>td</code><code>&gt;8&lt;/</code><code>td</code><code>&gt;</code>

<code>                    </code><code>&lt;</code><code>td</code><code>&gt;9&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;/</code><code>tr</code><code>&gt;</code>

<code>                    </code><code>&lt;</code><code>tr</code><code>&gt;</code>

<code>                        </code><code>&lt;</code><code>td</code><code>&gt;10&lt;/</code><code>td</code><code>&gt;</code>

<code>                        </code><code>&lt;</code><code>td</code><code>&gt;11&lt;/</code><code>td</code><code>&gt;</code>

<code>                        </code><code>&lt;</code><code>td</code><code>&gt;12&lt;/</code><code>td</code><code>&gt;</code>

<code>                    </code><code>&lt;/</code><code>tr</code><code>&gt;</code>

如上所示:假設rowspan=2 合并兩行的同時,不删除&lt;td&gt;10&lt;/td&gt;  那最後一列就由3列變為4列

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

colspan  是列合并  colspan=”2″ 就是合并兩列

rowspan是行合并

&lt;tr&gt; &lt;td&gt;11111111111111111111111&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;4&lt;/td&gt; &lt;th colspan="2"&gt;合并單元格&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;&lt;th rowspan="2"&gt;合并列&lt;/th&gt; &lt;td&gt;8&lt;/td&gt; &lt;td&gt;9&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;11&lt;/td&gt; &lt;td&gt;12&lt;/td&gt; &lt;/tr&gt;

<code>                </code><code>&lt;</code><code>th</code> <code>colspan</code><code>=</code><code>"2"</code><code>&gt;合并單元格&lt;/</code><code>th</code><code>&gt;</code>

<code>                    </code><code>&lt;&lt;</code><code>th</code> <code>rowspan</code><code>=</code><code>"2"</code><code>&gt;合并列&lt;/</code><code>th</code><code>&gt;</code>

<code>                        </code> 

合并行之後,把&lt;td&gt;10&lt;/td&gt; 删掉的情況

本文轉自 次元2018 51CTO部落格，原文連結：http://blog.51cto.com/xinsz08/1946636，如需轉載請自行聯系原作者