表格標記

1.創建表格

1.1 表格的基本構成table、tr、td

table是針對整個表格的標記,它用於設置對應於整個表格的屬性;

tr是針對行的標記,它用於設置對應於行的屬性;

td是針對單元格的標記,它用於設置對應於單元格的屬性;

==========================================

<table>

<tr>

<td>第一行第一個</td>

<td>第一行第二個</td>

</tr>

<tr>

<td>

第二行第一個</td>

<td>第二行第二個</td>

</tr>

</table>

==========================================

效果如下:

==========================================

1.2 設置表格的標題caption

<table>

<caption>表格標題</caption>

...

</table>

因爲caption標記是在table內的,所以使用caption標記的好處就是當整個表格發生變化時(例如移動),那麼caption也會相對應的變化

1.3 表頭th

表頭實際上是單元格的變體,使用表頭,一般情況下瀏覽器會以粗體和居中對齊的方式來顯示文字

使用方法跟單元格一樣(見下面單元格的講解)


2.表格的基本屬性

表格的基本屬性包括寬度width、高度height、對齊方式align

寬度width、高度height:

寬高是指整個表格的大小設置

對齊方式align:

指表格的整體位置是left、center、right中的一種


3.表格的邊框

3.1 表格的邊框厚度border

默認情況下border=0,這就意味着如果不顯式的設置border的值,那麼表格是沒有邊框的,一般情況下border的值不超過5

3.2 表格的邊框顏色bordercolor

顧名思義,bordercolor就是設置邊框的顏色,使用十六進制顏色值且border的值不能爲0

3.3 內框寬度cellspacing

內框寬度可以類似的看做“田”裏面的“十”,也即是指內部單元格之間的間隔

3.4 文字與邊框間隔cellpadding

默認情況下,文字是與表格邊框緊貼着的,那麼通過設置這個就可以自由操控文字與邊框的間隔


4.表格背景

4.1 表格背景顏色bgcolor

bgcolor是針對整個表格設置的,但是會被行、單元格的屬性覆蓋,相應的,行的屬性會被單元格的屬性覆蓋

4.2 表格的背景圖像background

background的值可以是圖像的絕對地址或者相對地址


5.表格行屬性

行屬性包括height、align、valign、bordercolor、bgcolor、background

這些都與上面講述的使用方式一樣,需要說明的是align(水平)、valign(垂直)是指行文字的對齊方式


6.單元格屬性

單元格屬性包括width、height、align、valign、colspan、rowspan、bgcolor、background、bordercolorlight、bordercolordark

同行屬性和表格屬性所講述的一樣,需要說明的事colspan(水平)、rowspan(垂直)是指對應方向的跨度(也即單元格合併);

另外bordercolorlight(亮)、bordercolordark(暗)的值是顏色,用以設置亮邊框和暗邊框的顏色,以得到突出顯示的效果;


7.表格的結構

表首標記thead、表主體標記tbody、表結尾標記tfoot

使用這種結構的意義在於能夠整體操控一整塊,能方便效果的總體設計;

需要注意的是,這三個結構標記只能在表格裏面出現一次;

一般情況下我們用以設置bgcolor、align

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章