表格標簽的應用
表格是XHTML中處境尷尬的一個標簽,本節只做了解即可.
關于表格
在CSS流行之前,table被廣泛應用于定位。在XHTML中,table不被推薦用來定位,W3C希望CSS可以取代< table>在定位方面的地位。不過事實上由于利用CSS布局常常需要大量的手寫代碼工作(常用的網頁設計軟件如Dreamweaver并不能完美支持P的顯示),<table>仍被許多網站用語首頁布局,例如Google的More products頁面就利用了table來定位。不過我個人推薦您開始使用CSS來定位網頁,因為這是Web發展的方向。當然了,在初期用CSS取代table可能使您遇上很多的麻煩。
表格標簽<table>
在XHTML中,創建表格的標簽是<table>,書寫代碼時,我們要先用<tr>標簽將表格分成一行一行,再用< td>標簽把每行分成一格一格。完全手寫代碼創建table是十分困難和低效的,而在網頁制作軟件中制作表格就如同Word一樣簡單,只需要選擇行列之類的簡單屬性即可。但是我們可能會遇到自動做出的表格不符合要求,而需要在代碼模式調整的可能,因此我們還是要大概了解XHTML表格標簽的具體寫法。
表格的邊框(border)屬性
<table>標簽可以有border屬性。如果不設置border屬性的值,在默認情況下,瀏覽器將不顯示表格的邊框。
表格練習
我們來建立一個四行兩列的標簽,代碼如下:
<table border="1">
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
<tr>
<td>一個格子</td>
<td>一個格子</td>
</tr>
</table>
顯示結果如下:注意上面的代碼,一共有4對<tr>,對應著下面的4個行。而沒個<tr>(行)又有兩個<td>單元格。于是就成了一個4行2列的表格。
一個格子 | 一個格子 |
一個格子 | 一個格子 |
一個格子 | 一個格子 |
一個格子 | 一個格子 |
這樣的表格用來列出數據之類的信息足夠了,但是用來定位的表格通常要復雜一些。再次強調我們不推薦用table來定位,所以這里僅僅簡單地介紹了<table>。
推薦設計
優秀海報設計精選集(8)海報設計2022-09-23
充滿自然光線!32平米精致裝修設計2022-08-14
親愛的圖書館 | VERSE雜誌版版式設計2022-07-11
生活,就該這麼愛!2022天海報設計2022-06-02
最新文章
帶你輕鬆打開SVG動畫的大HTML教程2016-06-08
36個重要的HTML標簽HTML教程2012-05-15
10個最容易犯的HTML標簽錯HTML教程2010-09-11
border:none;與border:0;的區別HTML教程2009-11-26