HTML標記語言——表格的基本結構

   表格的基本結構

1   <table>標記

1.1   基本格式

   <table 屬性1="屬性值1" 屬性2="屬性值2"......>表格內容</table>

1.2   table標記的屬性

1.2.1   width屬性

   表示表格的寬度，它的值可以是像素（px）也可以是父級元素的百分百（%）

1.2.2   height屬性

   表示表格的高度，它的值可以是像素（px）也可以是父級元素的百分百（%）

1.2.3   border屬性

   表示表格外邊框的寬度

1.2.4   align屬性

   表格的顯示位置

   left居左顯示

   center居中顯示

   right居右顯示

   默認值left

1.2.5   cellspacing屬性

   單元格之間的間距，默認是2px，單位像素

1.2.6   cellpadding屬性

 單元格內容與單元邊框的顯示距離，單位像素

1.2.7   frame屬性

1.2.7.1   作用

   控制表格邊框最外層的四條線框

1.2.7.2   屬性值

   void（默認值）   表示無邊框

   above   表示僅頂部有邊框

   below   表示僅底部有邊框

   hsides   表示僅頂部邊框和底部邊框

   lhs   表示僅有左側邊框

   rhs   表示僅有右側邊框

   vsides   表示僅有左右側邊框

   box   包含全部4個邊框

   border   包含全部4個邊框

1.2.8   rules   屬性

1.2.8.1   作用

   控制是否顯示以及如何顯示單元格之間的分割線

1.2.8.2   屬性值

  none（默認值）   表示無分割線

   all   表示包括所有分割線

 rows   表示僅有行分割線

   clos   表示僅有列分割線

   groups   表示僅在行組和列組之間有分割線

2   <caption>標記

2.1   什么時候使用

   如果表格需要使用標題，那么就可以使用<caption>標記

2.2   如何正確使用

   <caption>屬性的插入位置，<table>屬性之后，<tr>表格行之前

2.3   align屬性

   top   標題放在表格的上部

   bottom   標題放在表格的下部

   left   標題放在表格的左部

   right   標題放在表格的右部

3   <tr>標記

   定義表格的一行，對于每一個表格行，都是由一對<tr>...</tr>標記表示，每一行<tr>標記內可以嵌套多個<td>或者<th>標記

   可選屬性

3.1   bgcolor屬性

   設置背景顏色

    格式為bgcolor=“顏色值”

3.2   align屬性

   設置垂直方向對齊方式

   格式為align=“值”

   值有bottom   靠頂端對齊   top   靠底部對齊   middle   居中對齊

3.3   valign屬性

   設置水平方向對齊方式

   格式為valign=“值”

   值有left   靠左對齊   right   靠右對齊   center   居中對齊

4   <td>和<th>

4.1

   <td>和<th>都是單元格的標記，必需嵌套在<tr>標簽內，是成對出現

4.2   兩者的區別

   <th>是表頭標記，通常位于首列或者首行，<th>中的文字默認會被加粗，<而td>不會   

4.3   共同之處

   兩者的標記屬性都是一樣的

4.4   屬性

   bgcolor   設置單元格背景

   align   設置單元格對齊方式

   valign   設置單元格垂直對齊方式

   width   設置單元格寬度

  height    設置單元格高度

   rowspan   設置單元格所占行數

   colspan   設置單元格所占列數