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