| **元素名称** | **说明** | | --- | --- | | 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> ```