html<table><th><tr><td><caption><thead><tbody><tfoot>属性总结_table 第一个表头写三个项目-优快云博客

基本语法

<table border=1>
<!--为了能看出效果，我设置表格边框为1-->
<caption>我是一个表格的标题</caption>
<tr>
<th>这是一个表头</th>
<th>这是另一个表头</th>
</tr>
<!--这是第一行-->
<tr>
<td>这是一列</td>
<td>这是另一列</td>
</tr>
<!--这是第二行-->
<tr>
<td>&nbsp</td>
<td>这是一列</td>
</tr>
</table>

我是一个表格的标题
这是一个表头	这是另一个表头
这是一列	这是另一列
	这是一列

1. 一个简单表格的基本标签
<table>...</table>表格的基本框架
<caption>...</caption>表格的标题
<tr> 表格的一行
<td> 表格的一列
<th> 表格的表头
2. 表格内容为空，不显示边框时，加入&nbsp

标签属性

`<table>` 标签属性

-border 表格的边框宽度（border不支持pixels单位）
-cellpadding 表格内容和边缘的空白
-cellspacing 单元格和单元格之间的空白
-frame 规定围绕表格的哪些边框是可见的（建议CSS替代，浏览器支持弱）

值	描述
void	不显示外框
box	显示所有外框
above	上部
below	下部
lhs	左部
rhs	右部
hsides	上下部
vsides	左右部

-rules 规定内侧哪些边框是可见的

值	描述
none	不显示内框线条
all	显示所有内框线条
rows	行有线条
cols	列有线条
groups	显示行组合列组之间的线条（首先要有行组和列组）

-width 规定表格的宽度
-summary 表格摘要，w3school不明确支持浏览器 X
-align和bgcolor 建议用CSS替代 X

`<caption>`标签属性

-align 略

`<th>` 标签属性和`<td>` 标签属性

-align 略
-colspan 横跨的列数
-rowspan 横跨的列数
-valign 垂直对齐

值	描述
top	上对齐
middle	居中对齐
bottom	下对齐
baseline	基线对齐

-height 建议用CSS替代 X
-width 建议用CSS替代 X
-bgcolor 建议用CSS替代 X
-nowrap 是否折行建议用CSS替代 X

`<tr>`标签属性

-align 略
-bgcolor 略
-valign 略

`<thead><tbody><tfoot>`标签属性

-align 略
-valign 略

`<col>`和`<colgroup>`

为表格的列分组
经测试在safari下这两个标签是无效的，w3school建议用css替代

用法

表格合并案例

colspan列合并

<table border=1>
<caption>这是一个电话本</caption>
<tr>
<th>姓名</th>
<th colspan=2>电话</th>
</tr>
<tr>
<td>老王</td>
<td colspan=2>151111222222</td>
</tr>
</table>

这是一个电话本
姓名	电话
老王	151111222222

rowspan行合并

<table border=1>
<caption>这是一个电话本</caption>
<tr>
<th>姓名</th>
<td>老王
</tr>
<tr>
<th rowspan=2>电话</th>
<td>152222222222</td>
</tr>
<tr>
<td>151111111111</td>
</tr>
</table>

这是一个电话本
姓名	老王
电话	152222222222
电话	151111111111

表格标签嵌套案例

在表格中包含段落

<table border=1>
<caption>在表格中包含标题和段落</caption>
<tr>
<td>
<p>我是一个段落</p>
<p>我是另一个段落</p>
</td>
</tr>
</table>
<!--这样写有个很明显的缺陷，就是标题会根据表格内容的多少自动换行,Markdown编辑器自动把<table>的宽度调整为100%所以不会显示异常-->

在表格中包含标题和段落
我是一个段落我是另一个段落

在表格中包含表格

<table border=2>
<caption>在表格中包含表格</capton>
<tr>
<td>
     <table border=1>
     <tr>
     <td>表格嵌套</td>
     <td>表格嵌套</td>
     </tr>
     <tr>
     <td>表格嵌套</td>
     <td>表格嵌套</td>
     </tr>
     <table>
</td>
</tr>
</table>

在表格中包含表格

表格嵌套	表格嵌套
表格嵌套	表格嵌套

包含一个无序列表的表格

<table border=1>
    <tr>
    <td>
    <ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
    </td>
    </tr>
    </table>

苹果
橘子
香蕉

##带有``标签的表格##

<table border=1>
<caption>我是一个表格的标题</caption>

<thead>
<tr>
<th>这是一个表头</th>
<th>这是另一个表头</th>
</tr><!--这是表头部分-->
</thead>

<tbody>
<tr>
<td>这是一列</td>
<td>这是另一列</td>
</tr><!--这是表的主体-->
</tbody>

<tfoot>
<tr>
<td>&nbsp</td>
<td>这是一列</td>
</tr><!--这是表的尾部-->
</tfoot>

</table>
<!--使用<thead><tbody><tfoot>不会对外观上有任何改动-->