html两个th合并单元格,10、HTML表格（table 、th、tr、td、合并单元格）的简单认识...

1、表格的定义

表格的定义是通过 table 标签来定义的，当然了，如果只是写一个 table 标签，是看不见任何内容的，一个表格是由行和列组成，而在HTML中，行的定义又是由 tr 标签来定义的，列是由 td 标签来定义的。

例如：

1-1	1-2
2-1	2-2

代码效果：

这怎么看都不想是表格吧？不急，那是因为HTML表格默认是不显示边框的，所以，我们还要设置表格的边框，如下：(在table标签添加border属性，属性值为边框的宽度，单位是像素)

1-1	1-2
2-1	2-2

现在效果如下：

通过上面可以看出：定义一个简单的表格，先用 table 标签确定好代码范围，按照自己想要的效果，确定想要几行几列，比如需要一行两列，就在 table 标签里面定义一个 tr 标签，然后再在 tr 标签里面定义两个 td 标签就可以了。td 标签的意思 table data ，即表格数据。td 标签中间就是显示的内容。

2、表头单元格th标签

th 标签是与 td 标签同级的，是用来定义表头单元格的，默认是加粗显示的。在上面的代码的基础上增加一个 th 标签，如下：

aaa	bbb
1-1	1-2
2-1	2-2

效果如下：

可以看出是默认加粗显示的。

3、调整整体表格大小

前面提到表格是默认不显示表框的，需要设置 table 标签的 border 属性，同样的，我们还可以通过设置 table 标签的 width 以及 height 属性，用来调整表格的整体大小。如下：

aaa	bbb
1-1	1-2
2-1	2-2

效果如下：

这里并不是我将图片放大的，而是表格整体尺寸变大了，是不是又发现了 th 标签的秘密呢？没错，th 标签默认是居中于单元格的。

4、合并单元格

如果要将两个或多个列合并为一个列，将使用colspan属性

如果要合并两行或更多行，则将使用rowspan属性。

这两个属性都是针对单元格的，也就是 td 标签或 th 标签。

这两个属性的值就是需要合并的单元格的个数。

例子如下：

aaa	bbb
aaa	1-2
2-1

效果如下：

5、后续学习

1、这些只是一些简单的用法，还有很多的知识，但是对于我而言，这些已经够用了，比如设置表格的背景颜色，边框颜色，这些都是可以的，但是官方已经指出，在HTML5中尽量不要使用。详情请点击。

2、诸如 thead、tbody、tfoot 等标签也是相差不大。不再赘述。

3、后面自己动手，使用表格标签写一个课程表当做练习。

html两个th合并单元格,10、HTML表格（table 、th、tr、td、合并单元格）的简单认识...相关推荐

markdown表格在github/gitee中合并单元格
markdown表格合并单元格只能是在.md文件中使用html 代码 github/gitee中的显示效果横向合并 <table> <tr> <td&g ...
HTML基础-06-表格（表＜table＞，行＜tr＞，列＜tb＞，表头＜th＞，跨列colspan，跨行rowspan，单元格边距 cellpadding，单元格间距cellspacing）
文章目录 1. 表< table > ,行 < tr >,列 < tb > 2. 表头 < th > 3. 表名 < caption > 4 ...
element table相同数据行合并
哈喽,最近公司都在赶项目在做的过程中也踩了不少的坑,现在来记录下先来讲下Vue+Element使用table表格的合并功能.最后的效果如下图(主要涉及到表格行列合并): 主要思路由于项目后期数据报表 ...
table tr td 表格合并
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JavaScript合并网页表格中内容相同的相邻单元格
继续编写"圳品"信息系统,我们已经"圳品"信息读取到JavaScript定义的一个中进行按汉语拼音升序作了排序处理. var p = [[100, " ...
使用jquery合并表格中相同文本的相邻单元格
一.效果二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
jQuery: 合并表格中相同文本的相邻单元格
一.效果二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
datagridview单元格合并居中_系统地学习Excel第17课，设置单元格格式
上一篇:系统地学习Excel第16课,使用Excel的「替换」功能本篇内容结构如下: 本章的知识体系 Excel工作表的整体外观由各个单元格的样式构成,单元格的样式外观在Excel的可选设置中主要包 ...
JQuery合并table单元格--有限制（table格式需要注意）
JS代码: <scriptsrc="../js/jquery-1.6.1.min.js"type="text/javascript">< ...

html两个th合并单元格,10、HTML表格（table 、th、tr、td、合并单元格）的简单认识...

html两个th合并单元格,10、HTML表格（table 、th、tr、td、合并单元格）的简单认识...相关推荐

最新文章

热门文章