一、表格标签的定义

在html中，表格标签表示为<table></table>，其中的每行用<tr></tr>标签表示，在表格中的每一行都由若干个单元格组成，表示为<td><td>，它代表该单元格的数据，可以为文本、图片、列表等等，且可以在其中嵌套表格。
例如，在HBuilder X中，下列html代码，设定一个三行四列的表格：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td></tr></table></body>
</html>

运行结果如下：

二、表格标签的属性

（一）边框属性

上图创建的表格是没有属性的，它表示的是无边框的表格，其table标签属性border="0"或默认为无边框，即若不定义表格边框属性，表格不会显示边框。
例如，在HBuilder X中，下列html代码，设定一个三行四列的表格，设置其边框大小，其属性为border=“1”：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td></tr></table></body>
</html>

运行结果如下，我们其实可以发现有两层边框，最外层的是表格的边框，而内层的是单元格的边框：

（二）单元格属性

通过设置table标签的cellspacing属性和cellpadding属性，可以设置表格中各单元格之间的距离和表格中各单元格的内容与其边框之间的距离，如下：

<table border="" cellspacing="" cellpadding=""><tr><th>Header</th></tr><tr><td>Data</td></tr>
</table>

例如，在HBuilder X中，下列html代码，设定一个两行三列的表格，其各单元格之间的距离为0，即cellspacing=“0”，且单元格的内容与其边框之间的距离为25，即cellpadding=“25”：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" cellspacing="0" cellpadding="25"><tr><th>1</th><td>星期一</td><td>星期二</td></tr><tr><th>2</th><td>语文</td><td>数学</td></tr></table></body>
</html>

运行结果如下：

三、表格标签的表头

可以将表格标签的第一行或第一列设置为表头，通过<th></th>标签设置。
例如，在HBuilder X中，下列html代码，制作一个简单的课程表，第一行tr标签内有三个th表头标签，表示课程表的“星期”：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th></tr><tr><td>1</td><td>语文</td><td>数学</td><td>物理</td></tr><tr><td>2</td><td>英语</td><td>化学</td><td>数学</td></tr><tr><td>3</td><td>生物</td><td>英语</td><td>语文</td></tr></table></body>
</html>

运行结果如下:

表头属性

可以对表头添加colspan属性和rowspan属性，对th表头的下面的单元格进行分列和分行。
例如，在HBuilder X中，下列html代码，对列分为两列，colspan=“2”：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><th></th><th colspan="2">星期一</th></tr><tr><td>上午</td><td>1班</td><td>2班</td></tr><tr><td>下午</td><td>3班</td><td>2班</td></tr></table></body>
</html>

运行结果如下：

例如，在HBuilder X中，下列html代码，对行进行分为两行，rowspan=“2”：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><th rowspan="2">上午</th><td>1班</td></tr><tr><td>2班</td></tr><tr><th rowspan="2">下午</th><td>2班</td></tr><tr><td>3班</td></tr></table></body>
</html>

运行结果如下：

四、表格标签的标题

可以通过在table标签中定义<caption></caption>标签，对表格添上标题，即在表格的上方添加上一个标题。
例如，在HBuilder X中，下列html代码，在表格上添加一个名称为“课程表”的表格标题：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><caption>课程表</caption><tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th></tr><tr><td>1</td><td>语文</td><td>数学</td><td>物理</td></tr><tr><td>2</td><td>英语</td><td>化学</td><td>数学</td></tr><tr><td>3</td><td>生物</td><td>英语</td><td>语文</td></tr></table></body>
</html>

运行结果如下：

五、表格标签的嵌套

可以在表格内添加图片、文字、段落等等，也可以嵌套表格。
例如，在HBuilder X中，下列html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><th rowspan="2">1</th><td><p>这是一个段落！</p></td></tr><tr><td><p>这是一个图片：</p><img src="../image/酒柜.png" alt="酒柜" width="100" height="80"></td></tr><tr><th rowspan="2">2</th><td><ol><li>星期一</li><li>星期二</li><li>星期三</li></ol></td></tr><tr><td><table><tr><table border="1"><td>1</td><td>2</td><td>3</td><td>4</td></table></tr></td></tr></table></body>
</html>

运行结果如下，可以看到我们在表格中嵌套的表格，其中有段落、图片、列表、表格：

结语

以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！

Web前端开发笔记——第二章 HTML语言第七节表格标签相关推荐

Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...
Web前端开发笔记——第二章 HTML语言第六节区域标签、列表标签
目录一.区域标签 (一)div标签的定义 (二)div标签的属性二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
Web前端开发笔记——第二章 HTML语言第十一节语义标签
目录一.语义标签的定义二.头部标签.底部标签三.导航栏标签四.内容栏标签.区段标签五.其它内容标签六.< figure > 和 < figcaption >标结语 ...
Web前端开发笔记——第二章 HTML语言第十节画布标签、音视频标签
目录一.画布标签二.音视频标签 (一)音频标签 (二)视频标签 (三)资源标签结语一.画布标签 <canvas> </canvas> 画布标签用于图形.字符等的绘制,它 ...
Web前端开发笔记——第二章 HTML语言第五节图像标签
目录前言一.图像标签的属性 (一)src属性和alt属性 (二)width属性和height属性 (三)borde属性二.绝对路径和相对路径三.图像映射例题结语前言本节介绍图像标签即i ...
Web前端开发笔记——第二章 HTML语言第三节文本格式化标签
目录前言一.文本加粗.斜体标签二.文本字体缩小.放大标签三.文本下标.上标标签四.文本下划线.删除线标签五.双引号字符结语前言这里主要介绍对html语言中对文本的处理. 一.文本加粗 ...
Web前端开发笔记——第二章 HTML语言第八节表单标签
目录一.表单的定义二.输入标签 (一)文本框和密码框 (二)提交按钮和重置按钮 (三)数值选项菜单 (四)滑动条 (五)搜索框 (六)input标签的其它type属性 (七)单选框和复选框 (八) ...
Web前端开发笔记——第二章 HTML语言第二节基本标签
目录前言一.标题标签二.段落标签和段内换行三.预留格式标签四.行内组合标签五.水平线标签六.注释标签七.空格字符例题(创建一个网页) 结语前言本节主要讲解HTML的一些基本标签. ...
Web前端开发笔记——第二章 HTML语言第一节标签、元素、属性
目录一.什么是HTML? 二.标签 (一)标签.元素的定义 (二)标签的嵌套 (三)标签的属性 (四)父元素.子元素.兄弟元素三.HTML DOM树结语一.什么是HTML? HTML语言,即超 ...

Web前端开发笔记——第二章 HTML语言第七节表格标签

目录

一、表格标签的定义

二、表格标签的属性

（一）边框属性

（二）单元格属性

三、表格标签的表头

表头属性

四、表格标签的标题

五、表格标签的嵌套

结语

Web前端开发笔记——第二章 HTML语言第七节表格标签相关推荐

最新文章

热门文章

Web前端开发笔记——第二章 HTML语言 第七节 表格标签

目录

一、表格标签的定义

二、表格标签的属性

（一）边框属性

（二）单元格属性

三、表格标签的表头

表头属性

四、表格标签的标题

五、表格标签的嵌套

结语

Web前端开发笔记——第二章 HTML语言 第七节 表格标签相关推荐

最新文章

热门文章

Web前端开发笔记——第二章 HTML语言第七节表格标签

Web前端开发笔记——第二章 HTML语言第七节表格标签相关推荐