| **元素名稱** | **說明** | | --- | --- | | table | 表示表格 | | thead | 表示標題行 | | tbody | 表示表格主體 | | tfoot | 表示表腳 | | tr | 表示一行單元格 | | th | 表示標題行單元格 | | td | 表示單元格 | | col | 表示一列 | | colgroup | 表示一組列 | | caption | 表示表格標題 |  >[danger]tr不是table的子元素，而是tbody的子元素，因為創建表格沒有指定tbody的話，瀏覽器會默認生成一個tbody然后將tr裝入tbody中 ```html <table> <caption>colspan</caption> <thead> <tr> <th>單元格a</th> <th>單元格b</th> <th>單元格c</th> </tr> </thead> <tbody> <tr> <td>單元格1</td> <td>單元格2</td> <td>單元格3</td> </tr> <tr> <td>單元格4</td> <td>單元格5</td> <td>單元格6</td> </tr> </tbody> </table> ```  ```css table{ width: 50%; border:1px solid black; margin:0 auto; } ```  ```css td{ border:1px solid black; } ```  ```css table{ width: 50%; border:1px solid black; margin:0 auto; /*默認，分隔模式*/ border-collapse: separate; /*分隔模式下border-spacing才有效*/ border-spacing: 10px; } ```  ```css table{ width: 50%; border:1px solid black; margin:0 auto; /*合并模式*/ border-collapse: collapse; /*合并模式下此屬性無效*/ border-spacing: 10px; } ```  ```css tbody > tr:nth-child(odd){ background-color: #bfa; } ```  td默認是垂直居中的 ```css td{ border:1px solid black; height: 40px; vertical-align: middle;/*默認*/ } ```  >[danger]vertical-align在其他標簽只影響文字內容，而在td中什么都能影響（只要是子元素都能影響） 所以在布局時我們可以將容器設置為display:table-cell讓容器表現單元格的特性從而簡單的使用vertical-align:middle達到垂直居中的效果 ***** ***** ***** ***** ***** ***** ***** ***** ## ## **`colspan`和?`rowspan`** * rowspan:指定單元格應占用的行數(rows)。 * colspan:指定單元格應占用的列數(columns) **rowspan示例：** ``` <table frame="border" rules="all"> <caption>rowspan用法示例</caption> <tr> <th>月份</th> <th>積蓄</th> <th>季度積蓄</th> </tr> <tr> <td>一月</td> <td>$100</td> <td rowspan="4">$330</td> </tr> <tr> <td>二月</td> <td>$80</td> </tr> <tr> <td>三月</td> <td>$50</td> </tr> <tr> <td>四月</td> <td>$100</td> </tr> <tr> <td>五月</td> <td>$80</td> <td rowspan="4">$160</td> </tr> <tr> <td>六月</td> <td>$80</td> </tr> </table> ``` <table frame="border" rules="all"> <caption>rowspan用法示例</caption> <tr> <th>月份</th> <th>積蓄</th> <th>季度積蓄</th> </tr> <tr> <td>一月</td> <td>$100</td> <td rowspan="4">$330</td> </tr> <tr> <td>二月</td> <td>$80</td> </tr> <tr> <td>三月</td> <td>$50</td> </tr> <tr> <td>四月</td> <td>$100</td> </tr> <tr> <td>五月</td> <td>$80</td> <td rowspan="4">$160</td> </tr> <tr> <td>六月</td> <td>$80</td> </tr> </table> **colspan示例：** ``` <table frame="border" rules="all"> <caption>colspan用法示例</caption> <thead> <tr> <th colspan="2">a</th> <th>b</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> ``` <table frame="border" rules="all"> <caption>colspan</caption> <thead> <tr> <th colspan="2">a</th> <th>b</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> <table frame="border" rules="all"> <caption>colspan</caption> <thead> <tr> <th>單元格a</th> <th>單元格b</th> <th>單元格c</th> </tr> </thead> <tbody> <tr> <td>單元格1</td> <td>單元格2</td> <td>單元格3</td> </tr> <tr> <td>單元格4</td> <td>單元格5</td> <td>單元格6</td> </tr> </tbody> </table> ## ## **table** | 屬性 | 值 | 描述 |css替代| | --- | --- |--- |--- | | width | n%、像素數值 | 規定表格的寬度 | with | | align | left、center、right | 規定表格相對周圍元素的對齊方式。 | left：margin-right:auto;、center:margin:o auto、right:margin-left:auto | | bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 規定表格的背景顏色 | background-color | | border | 像素數值 | 規定表格邊框的寬度。 | border | | cellpadding | n%、像素數值 | 規定單元格邊沿與其內容之間的空白 | 替換示例：`border-collapse: collapse;padding:10px;` **border-collapse:** 用來決定表格的邊框是分開的還是合并的。<br>**border-collapse: separate;** 分隔模式，相鄰的單元格都擁有獨立的邊框。<br>**border-collapse: collapse;** 合并模式，相鄰單元格共享邊框 | | cellspacing | n%、像素數值 | 規定單元格之間的空白。 | 規定內側邊框的哪個部分是可見的 border-spacing 屬性設置相鄰單元格的邊框間的距離（僅用于“邊框分離 border-collapse: separate;”模式） `border-spacing:10px 10px;` | | frame | void,above,below,hsides,lhs,rhs,vsides,box,border | 規定外側邊框的哪個部分是可見的，這個屬性會讓border屬性失效，border的寬度只能為1 | 使用border-style和border-width屬性 | | rules | none,groups,rows,cols,all | 規定內側邊框的哪個部分是可見的 | 應用border屬性到適當的\<thead>，\<tbody>，\<tfoot>，\<col>，或\<colgroup> | | summary | 字符串 | 規定表格的摘要。 | \<caption\>標簽代替 | ``` <table border="2" with='50%' align="center" bgcolor="red" cellpadding="10" cellspacing="10" frame="above" rules="cols"> <thead> <tr> <th colspan="1">The table header</th> <th colspan="1">The table header</th> </tr> </thead> <tbody> <tr> <td>The table body</td> <td>with two columns</td> </tr> </tbody> </table> ``` ## ## **caption：定義表格標題** ## 可選的屬性 | 屬性 | 值 | 描述 | | --- | --- | --- | | ~~align~~ | right、left、top、bottom| 規定標題的對齊方式。不贊成使用。請使用樣式caption-side:top/bottom/inherit和text-align取而代之 | ## ## **表格分組：thead、tbody、tfoot** thead、tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。當您創建某個表格時，您也許希望擁有一個標題行，一些帶有數據的行，以及位于底部的一個總計行。這種劃分使瀏覽器有能力支持獨立于表格標題和頁腳的表格正文滾動。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上 ## 可選的屬性 | 屬性 | 值 | 描述 |css替代| | --- | --- | --- | --- | | ~~align~~ | right、left、center、justify、char| 定義 thead 元素中內容的對齊方式。 |text-align代替| | ~~bgcolor~~ |rgb(x,x,x),#xxxxxx,colorname| 不推薦使用。請使用樣式替代它。規定表格背景顏色|background-color代替| | ~~char~~ | character| 規定根據哪個字符來進行文本對齊。 || | ~~charoff~~| number | 規定第一個對齊字符的偏移量。 || | ~~valign~~ | top、middle、bottom、baseline| 規定 thead 元素中內容的垂直對齊方式。 |vertical-align代替| ## ## **tr定義 HTML 表格中的行 包含th、td** ## 可選的屬性 | 屬性 | 值 | 描述 |css替代| | --- | --- | --- | --- | | ~~align~~ | right、left、center、justify、char| 定義 thead 元素中內容的對齊方式。 |text-align代替| | ~~bgcolor~~ |rgb(x,x,x),#xxxxxx,colorname| 不推薦使用。請使用樣式替代它。規定表格行的背景顏色|background-color代替| | ~~char~~ | character| 規定根據哪個字符來進行文本對齊。 |text-align代替| | ~~charoff~~| number | 規定第一個對齊字符的偏移量。 |~~ ~~ | | ~~valign~~ | top、middle、bottom、baseline| 規定 thead 元素中內容的垂直對齊方式。 |vertical-align代替| ## ## **單元格th、td** * 表頭單元格 - 包含表頭信息（由 th 元素創建） * 標準單元格 - 包含數據（由 td 元素創建） * td，th默認垂直居中的即vertical-align：middle * th與td的布局區別：th相對于td文字加粗水平居中 ## 可選的屬性 | 屬性 | 值 | 描述 |css替代| | --- | --- | --- | --- | | abbr | *text* | 規定單元格中內容的縮寫版本。 || | ~~align~~|left,right,center,justify,char| 規定單元格內容的水平對齊方式。 |text-align代替| | ~~axis~~ | *category_name* | 對單元格進行分類。 || | bgcolor |rgb(x,x,x),#xxxxxx,colorname| 不推薦使用。請使用樣式替代它。規定表格單元格的背景顏色。|background-color代替| | ~~char~~ |character| 規定根據哪個字符來進行內容的對齊。 |text-align代替| | ~~charoff~~ |number| 規定對齊字符的偏移量。 || | colspan | *number* | 設置單元格可橫跨的列數。 || | headers | *idrefs* | 由空格分隔的表頭單元格 ID 列表，為數據單元格提供表頭信息。此屬性包含以空格分隔的字符串的列表，每個字符串都與應用于該元素的元素的id屬性相對應|| | ~~height~~ |pixels,%| 不推薦使用。請使用樣式替代它。規定表格單元格的高度。|height代替| | ~~nowrap~~ | nowrap | 不推薦使用。請使用樣式取而代之。規定單元格中的內容是否折行。|| | rowspan | *number* | 規定單元格可橫跨的行數。 || | scope |col,colgroup,row,rowgroup| 定義將表頭數據與單元數據相關聯的方法。在td中已廢棄|| | ~~valign~~ |top,middle,bottom,baseline| 規定單元格內容的垂直排列方式。|vertical-align代替| | ~~width~~ | pixels,%| 不推薦使用。請使用樣式取而代之。規定表格單元格的寬度。|width代替| ## ## **colgroup** 定義表中的一組列表。 只能在 table 元素中使用，用于對表格中的列進行組合，以便對其進行格式化。 如需對全部列應用樣式，colgroup標簽很有用，這樣就不需要對各個單元和各行重復應用樣式了 ## 可選的屬性 | 屬性 | 值 | 描述 | | --- | --- | --- | | ~~align~~| right、left、center、justify、char| 定義在列組合中內容的水平對齊方式。 | | char | character| 規定根據哪個字符來對齊列組中的內容。 | | ~~charoff~~| number | 規定第一個對齊字符的偏移量。 | | span | *number* | 規定列組應該橫跨的列數。 | | ~~valign~~| top、middle、bottom、baseline| 定義與 col 定義在列組合中內容的垂直對齊方式 | | ~~width~~| pixels、%、relative_length| 規定列組合的寬度。 | ## ## **col：為表格中一個或多個列定義屬性值** 如需對全部列應用樣式，\<col> 標簽很有用，這樣就不需要對各個單元和各行重復應用樣式了。 您只能在 table 或 colgroup 元素中使用 \<col> 標簽 ## 可選的屬性 | 屬性 | 值 | 描述 | | --- | --- | --- | | ~~align~~ | right、left、center、justify、char| 規定與 col 元素相關的內容的水平對齊方式。 | | ~~char~~ | character| 規定根據哪個字符來對齊與 col 元素相關的內容。 | | ~~charoff~~ | number | 規定第一個對齊字符的偏移量。 | | span | *number* | 規定 col 元素應該橫跨的列數。 | | ~~valign~~ | top、middle、bottom、baseline| 定義與 col 元素相關的內容的垂直對齊方式。 | | ~~width~~| pixels、%、relative_length| 規定 col的寬度 | ``` <table width="50%" cellpadding="10" frame="border" rules="all" align="center"> <caption style="background-color: grey;caption-side: bottom;">這里是表格標題</caption> <colgroup> <col style="background-color: pink;"> <!-- span：橫跨多少列 --> <col span="1" style="background-color: #d7d9f2;"> <col span="2" style="background-color: #ffe8d4;"> </colgroup> <tr> <td>1</td> <th scope="col">2</th> <th scope="col">3</th> <th scope="col">4</th> <th scope="col">5</th> </tr> <tr> <th scope="row">1</th> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <th scope="row">1</th> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table> ```