淺談html table 標籤 _HTML/Xhtml_網頁製作

主要討論它的結構和一些重要的屬性。我將使用一種慢慢改善的方式來介紹它。
1）基本的架構如下：

表示表格中的一行，表示一行中的一列。說一列，其實可以
把它想像成word中的單元格。 實際上也是單元格，只不過它用作表格標題。從語意上來
說： 標示表格中的資料單元， 表示表格中一列或是一行的標題。

複製程式碼

程式碼如下:

2)一個標題，可能是行標題，也可能是列標題，如何區分？需使用scope屬性scope=row/col。

複製程式碼

程式碼如下:

程式碼如下:

3)表格也有自己的標題

複製代碼

代碼如下:

表格標題

4)新增簡介summary屬性

複製程式碼

複製程式碼



複製程式碼

複製程式碼


程式碼如下:

表格標題

5）表格邊框模型和儲存格預設padding。 表格邊框有兩種顯示方式：分離和合併。 border-collapse: separate/collapse IE6預設的樣式是

分離的，看起來像立體的。實際上，不過是每個單元格都有自己獨立的邊框。合併則是共享邊框。
table { border-collapse: collapse; }
單元格之間預設是有空白的，可以用border-spacing控制它，因為IE6不支持，所以很少用到。 IE6
使用cellspacing。

複製程式碼

程式碼如下:

表格標題

6）增加一些行和列。並給每一個加一個id。 複製程式碼程式碼如下:

表格標題

姓名	地址	出生日期
ewee		hubei		19870102
rewe		wuhan		419880103
ertww		yichang		19870205

7）對表格進行邏輯劃分 ，把表格分成多個邏輯區域後，可以用CSS更好
的控製表現。

複製程式碼

程式碼如下:

表格標題

姓名	地址	出生日期
ewee		hubei		19870102
rewe		wuhan		419880103
ertww		yichang		19870205

我的這篇隨筆只簡單講一講表格的結構，希望有用。