一、创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table><tr><td>单元格内的文字</td>...</tr>...
</table>

在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

1、<table>标签用于定义一个表格。

2、<tr >标签用于定义表格中的一行，必须嵌套在< table>标签中，在 <table>中包含几对< tr>，就有几行表格。

3、<td >标签：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列或多少个单元格。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

二、表格结构

在使用表格进行布局时，可以将表格划分为头部<thead></thead>、主体<tbody></tbody>和页脚<tfoot></tfoot>，使得表格结构更清晰，方便阅读理解；通过使用这些元素，当包含多个页面的长的表格被打印时，每张页面上表格都包含表头和表尾数据。具体解释如下：

表格结构标签
标签名	简介	具体使用
<thead></thead>	表头，用于定义表格的头部	必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<tbody></tbody>	主体，用于定义表格的主体	位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。
<tfoot></tfoot>	表尾，用于定义表格的尾部	必须位于<table></table> 标签中，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前，<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。

三、表格标题<caption>

定义和用法：caption 元素定义表格标题。<caption >标签必须紧随 <table >标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<table><caption>我是表格标题</caption>
</table>

四、表格属性

表格的属性
属性名	作用	常用属性值
border	设置表格边框	像素值（如：1px）
bordercolor	设置表格边框颜色
cellspacing	设置单元格与单元格之间的空白间距	像素值（默认为2px）
cellpadding	设置单元格与单元格边框之间的空白间距	像素值（默认为1px）
width	设置表格宽度	像素值
height	设置表格高度	像素值
align	设置表格在网页中的水平对齐方式，可具体到单元格	left、center、right
valign	设置表格在网页中的垂直对齐方式，用于行内	top、bottom、middle
bgcolor	设置表格背景色
background	设置表格背景图	图片相对路径

五、合并单元格(难点)

1、合并种类

跨行合并：rowspan

跨列合并：colspan

2、合并单元格的思想：

将多个内容合并的时候，会有多余的部分，要把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除这2个表格。记住：删除的个数 = 合并的个数 - 1；合并的顺序一般是先上左，后下右。

六、总结

表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。

七、示例

复制代码运行一遍，然后查看运行结果，对照上面的说明，可以更好地理解表格标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格table</title>
</head>
<body><h1>表格创建</h1><table><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr><tr><th>第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr></table><hr><h1>表格结构</h1><table><thead><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr></thead><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot><tbody><tr><th>第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody>                                </table><hr>
<!---表格标题caption属性----------------------------------------------------------------------><h1>表格标题caption</h1><table><caption>我是表格标题table title</caption><thead><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr></thead><tbody><tr><th>第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table>
<!-----table的属性--------------------------------------------------------------------><hr><h1>表格table的属性</h1><p>上面的表格看起来和我们平时见到的表格有写差异，例如少了一些横线和竖线，在表格里，只有行和包含在行里的单元格（相当于列）</p><h2>border属性</h2><table border="1"><caption>我是表格标题table title</caption><thead><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr></thead><tbody><tr><th>第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><br><table border="3" bordercolor="red"><caption>我是表格标题table title</caption><thead><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr></thead><tbody><tr><th>第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><hr>
<!----cellspacing属性:设置单元格与单元格之间的空白间距----------------------------------------------------------><h2>cellspacing属性</h2><table cellspacing="10" border="1"><caption>我是表格标题table title</caption><thead><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr></thead><tbody><tr><th>第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><hr>
<!----cellpadding属性:设置单元格与单元格边框之间的空白间距----------------------------------------------------------><h2>cellpadding属性</h2><table cellpadding="5" cellspacing="10" border="1"><caption>我是表格标题table title</caption><thead><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr></thead><tbody><tr><th>第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><hr>
<!------width和height属性--------------------------------------------------------><h2>width和height属性</h2><table width="800" height="500" cellpadding="5" cellspacing="10" border="1"><caption>我是表格标题table title</caption><thead><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr></thead><tbody><tr><th>第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><hr>
<!----align属性：设置水平对齐方式----------------------------------------------------------><h2>align属性：设置水平对齐方式</h2><table align="right" width="800" height="500" cellpadding="5" cellspacing="10" border="1"><caption>我是表格标题table title</caption><thead align="right"><tr><th align="center">a</th><th>a</th><th>a</th><th>a</th></tr></thead><tbody><tr align="left"><th align="right">第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>
<!-----valign属性：设置垂直对齐方式---------------------------------------------------------><h2>valign属性：设置垂直对齐方式</h2><table valign="top" width="800" height="500" cellpadding="5" cellspacing="10" border="1"><caption>我是表格标题table title</caption><thead><tr><th>a</th><th>a</th><th>a</th><th>a</th></tr></thead><tbody valign="bottom"><tr><th valign="middle">第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr valign="top"><th valign="bottom">第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><hr>
<!--------bgcolor属性：设置表格背景色------------------------------------------------------><h2>bgcolor属性：设置表格背景色</h2><table bgcolor="gray" width="800" height="500" cellpadding="5" cellspacing="10" border="1"><caption>我是表格标题table title</caption><thead><tr><th>a</th><th>a</th><th>a</th><th>a</th></tr></thead><tbody><tr bgcolor="olivegreen"><th bgcolor="yellow">第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><hr>
<!--------background属性：设置表格背景图---------------------------------------------------------><h2>background属性：设置表格背景图</h2><table background="./img/子弹.png"bgcolor="gray" width="800" height="500" cellpadding="5" cellspacing="10" border="1"><caption>我是表格标题table title</caption><thead><tr><th>a</th><th>a</th><th>a</th><th>a</th></tr></thead><tbody><tr bgcolor="olivegreen"><th bgcolor="yellow">第二行第一列</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><hr>
<!--------------------------------------------------------------------------------><h1>表格合并</h1><hr>
<!------水平合并colspan属性-----------------------------------------------------------><h2>水平合并colspan属性</h2><table width="800" height="500" cellpadding="5" cellspacing="10" border="1"><caption>我是表格标题table title</caption><thead><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr></thead><tbody><tr><th colspan="2">我是水平合并的那一行</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第一列</th><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><hr>
<!-----------------------------------------------------------------><h2>垂直合并</h2><table width="800" height="500" cellpadding="5" cellspacing="10" border="1"><caption>我是表格标题table title</caption><thead><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th><th>第一行第四列</th></tr></thead><tbody><tr><th rowspan="2">我是垂直合并的那一行</th><th>第二行第二列</th><th>第二行第三列</th><th>第二行第四列</th></tr><tr><th>第三行第二列</th><th>第三行第三列</th><th>第三行第四列</th></tr></tbody><tfoot><tr><th>第四行第一列</th><th>第四行第二列</th><th>第四行第三列</th><th>第四行第四列</th></tr> </tfoot>                                </table><hr>
</body>
</html>

HTML5 表格详情相关推荐

html5中制作表格,(html5表格的制作.doc
(html5表格的制作教学项目五 HTML中表格的制作 [教学内容] 讲解HTML中制作表格的标志 [教学目的] 使学生掌握简单表格的制作 [教学重点] 表格中单元格的合并操作 [教学难点] 理解属 ...
怎么用html5制作申请表,html-5 表格的制作
<html-5 表格的制作>由会员分享,可在线阅读,更多相关<html-5 表格的制作(6页珍藏版)>请在人人文库网上搜索. 1.教学项目五 HTML中表格的制作[教学内容]讲 ...
Ant Design Vue笔记——表格详情
1.表格中添加详情按钮 <template><a-tableref="table"size="middle"borderedrowKey=&q ...
html5表格源码,HTML5表格制作源代码.doc
HTML5表格制作源代码.doc (4页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 3.9 积分 HTML5表格制作源代码 (姬岚洋)代码:th{fo ...
html5中如何消除表格间的间隔,HTML5表格间距问题
我试图让所有这些图片排成一列.由于某些原因,它在单元格的底部添加了额外的空间.我尝试了所有解决这个间距问题的不同解决方案.HTML5表格间距问题下面就来看看我的HTML5代码以及: table{ b ...
HTML5 表格元素
HTML5 表格元素要点: 表格元素汇总表格元素解析表格就是使用网格的形式来显示二维数据的. 表格元素总汇表格至少包含三个元素:<table>.<tr>.< ...
html5表格两列合并_html多列布局
在 html5 中,多列布局中列与列间距是什么属性下面是属性,对比下 column-count 定义元素应该被分隔的列数 column-fill 定义列的填充方式 column-gap 定义列之间的 ...
HTML5简明教程系列之HTML5 表格与表单（二）
HTML的第二弹也来了,最近高产似母猪,状态也不错,代码来源为实验课.本期主要内容为:HTML表格与DIV应用.HTML表单.上期基础部分的传送门: HTML5简明教程系列之HTML5基础(一)_Th ...
html5表格标题大小,lt;captiongt; - 表格标题 - html5表格内容
HTML 元素(HTML表格标题元素)展示一个表格的标题,它常常作为浏览器支持所有主流浏览器都支持标签. 示例 this is a caption cell 1 cell 2 标签定义及使用说明 ...

HTML5 表格详情