html<table><th><tr><td><caption><thead><tbody><tfoot>属性总结

基本语法

<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>不会对外观上有任何改动-->
我是一个表格的标题
这是一个表头这是另一个表头
这是一列这是另一列
 这是一列
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页