行颜色设置的简便方法
昨天我们在《使用HTML添加表格3(间距与颜色)——零基础自学网页制作》中学习了设置单元格以及其中内容的空间间距和背景颜色。
其中添加列向单元格背景颜色只需要修改对应的tr标签中的style属性,而修改行向标签需要修改不同tr/tr标签中的td标签的style属性,这样操作起来就非常的麻烦,那有没有简便的修改行向单元格背景颜色的方法呢?
当然有!
开发团队给出了colgroupcol/col/colgroup这样的组合来解决这个问题,下面让我们详细学习。
colgroup/colgroup标签是一个给行向单元格打组的标签,在页面中不会显示。
col/col标签是来具体设置行向单元格数量和颜色的标签。
示例代码如下:
colgroupcolspan=1style=background-color:#ff;/col/colgroup这段代码添加到第一个页面.html当中就可以,具体代码如下:
!DOCTYPEHTMLhtmlheadtitle第一个网页/title/headbodyh1第一个网页/h1hrh2表格元素/h2hrtableborder=1width=%theadtrtdcolspan=2表格的头部信息/td/tr/theadtfoottrtdcolspan=2表格的脚部信息/tdtr/tfoottbodycaption表格标题/captioncolgroupcolspan=1style=background-color:#ff;/col/colgrouptrth姓名/thth年龄/th/trtrtd一列一行/tdtd一列二行/td/trtrtd二列一行/tdtd二列二行/td/tr/tbody/table/body/html页面效果如图:
因为第一列和最后一列只有一行所以,也都变红了。
其中span的数量代表行数。
如果把span等号后面的数改成2,因为表格只有两行,所以整个表格都红了。
表格嵌套
我们可以通过向表格中添加表格实现表格嵌套。表格嵌套可以把一个单元格分成行向或列向分割单元格。
代码示例如下:我们把一列一行分割成列向两个单元格。
trtdtableborder=1width=%trtd1/tdtd2/td/tr/table/td使用
tableborder=1width=%trtd1/tdtd2/td/tr/table这段代码替换文字一列一行即可。
页面效果如图所示:
留个思考题,大家可以思考一下行向分割单元格怎么写。
今天的内容结束了。
全部示例代码如下:
!DOCTYPEHTMLhtmlheadtitle第一个网页/title/headbodyh1第一个网页/h1hrh2表格元素/h2hrtableborder=1width=%theadtrtdcolspan=2表格的头部信息/td/tr/theadtfoottrtdcolspan=2表格的脚部信息/tdtr/tfoottbodycaption表格标题/captioncolgroupcolspan=1style=background-color:#ff;/col/colgrouptrth姓名/thth年龄/th/trtrtdtableborder=1width=%trtd1/tdtd2/td/tr/table/tdtd一列二行/td/trtrtd二列一行/tdtd二列二行/td/tr/tbody/table/body/html喜欢的小伙伴请