html表格一列两行应用HTML添加表格4行色彩与表格嵌套零基本自学网页制造

昨天我们在《利用HTML添加表格3（间距与颜色）——零根本自学网页制作》（目录在结尾）中学习了设置单元格以及个中内容的空间间距和背景颜色。

个中添加列向单元格背景颜色只须要修正对应的<tr>标签中的style属性，而修正行向标签须要修正不同<tr></tr>标签中的<td>标签的style属性，这样操作起来就非常的麻烦，那有没有简便的修正行向单元格背景颜色的方法呢？

当然有！

html表格一列两行应用HTML添加表格4行色彩与表格嵌套零基本自学网页制造 HTML

开拓团队给出了<colgroup><col></col></colgroup>这样的组合来办理这个问题，下面让我们详细学习。

<colgroup></colgroup>标签是一个给行向单元格打组的标签，在页面中不会显示。

<col></col>标签是来详细设置行向单元格数量和颜色的标签。

示例代码如下：

<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>

这段代码添加到"第一个页面.html"当中就可以，详细代码如下：

<!DOCTYPE HTML> <html> <head> <title>第一个网页</title> </head> <body> <h1>第一个网页</h1><hr> <h2>表格元素</h2><hr> <table border="1" width="100%"> <thead> <tr> <td colspan="2">表格的头部信息</td> </tr> </thead> <tfoot> <tr> <td colspan="2">表格的脚部信息</td> <tr> </tfoot> <tbody> <caption>表格标题</caption> <colgroup> <col span = "1" style="background-color:#ff0000;"></col> </colgroup> <tr> <th>姓名</th> <th>年事</th> </tr> <tr> <td>一列一行</td> <td>一列二行</td> </tr> <tr> <td>二列一行</td> <td>二列二行</td> </tr> </tbody> </table> </body> </html>

页面效果如图：

由于第一列和末了一列只有一行以是，也都变红了。

个中span的数量代表行数。

如果把span等号后面的数改成2，由于表格只有两行，以是全体表格都红了。

表格嵌套

我们可以通过向表格中添加表格实现表格嵌套。
表格嵌套可以把一个单元格分成行向或列向分割单元格。

代码示例如下：我们把"一列一行"分割成列向两个单元格。

<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>

利用

<table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table>

这段代码更换笔墨"一列一行"即可。

页面效果如图所示：

留个思考题，大家可以思考一下行向分割单元格怎么写。

本日的内容结束了。

全部示例代码如下：

<!DOCTYPE HTML> <html> <head> <title>第一个网页</title> </head> <body> <h1>第一个网页</h1><hr> <h2>表格元素</h2><hr> <table border="1" width="100%"> <thead> <tr> <td colspan="2">表格的头部信息</td> </tr> </thead> <tfoot> <tr> <td colspan="2">表格的脚部信息</td> <tr> </tfoot> <tbody> <caption>表格标题</caption> <colgroup> <col span = "1" style="background-color:#ff0000;"></col> </colgroup> <tr> <th>姓名</th> <th>年事</th> </tr> <tr> <td> <table border = "1" width="100%"> <tr> <td>1</td> <td>2</td> </tr> </table> </td> <td>一列二行</td> </tr> <tr> <td>二列一行</td> <td>二列二行</td> </tr> </tbody> </table> </body> </html>

喜好的小伙伴请关注我，阅读中碰着任何问题请给我留言，如有疏漏或缺点欢迎大家斧正，不胜感激！

学到这里，相信大家已经有独立读懂HTML代码解释的能力了，来日诰日我会为大家讲解16进制颜色表示方法。
之后会给大家推举html代码参考手册的链接。
如果您是零根本的话，学完16进制颜色表示方法后，基本上就可以无障碍的阅读html代码参考手册了，如果阅读起来还是有困难，请连续看后面我为大家讲解一些常用元素及属性的文章，已及html中分外符号的输入方法，全部做完后再结束这套教程。

如果您有任何疑问或不解欢迎关注并私信我。

HTML完全学习目录

HTML序章（学习目的、工具、基本观点）——零根本自学网页制作

HTML是什么？——零根本自学网页制作

第一个HTML页面如何写？——零根本自学网页制作

HTML页面中head标签有啥用？——零根本自学网页制作

初识meta标签与SEO——零根本自学网页制作

HTML中的元素利用方法1——零根本自学网页制作

HTML中的元素利用方法2——零根本自学网页制作

HTML元素中的属性1——零根本自学网页制作

HTML元素中的属性2（路径详解）——零根本自学网页制作

利用HTML添加表格1（基本元素）——零根本自学网页制作