整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用HTML添加表格4(行颜色与表格嵌套)-零基础自学网页制作

颜色设置的简便方法

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

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

当然有!

开发团队给出了<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(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作


lt;table> 表格的样式:


表格 <table>标签的定义:

HTML 表格:<table> 标签定义 。

简单的 HTML 表格包括: table 元素,一个或多个 tr、th 以及 td 元素。


<table>表格结构:

<table border=1px;>
 <tr> <th> row1,col1 </th><th>row1,col2 </th> </tr>
 <tr> <th> row2,col1 </th><td>row2,col2 </td> </tr>
</table>

<table>表格元素:

tr(行标签)、 th(表头单元格标签)、 td(普通单元格标签) caption(表格标题)、 col(定义列)、 colgroup(对表格中的列进行组合)、thead(组合表头的内容) tbody(组合表格的主题内容) 、tfoot(组合表格的脚注内容) 等

<td>(普通单元格标签) : 元素定义表格单元格

	<td>11,980</td>

<th>(表头单元格标签) : 元素定义表格表头

<th scope="row">工资</th>

<tr>(行标签) : 元素定义表格行

<tr>
		<th scope="row">工资</th>
		<td>11,980</td>
		<td>12,650</td>
		<td>9,700</td>
		<td>10,600</td>
 <td rowspan="5">工作</td>
	</tr>

<caption>(表格标题):元素定义表格标题

<caption class="c1">月度收入4月 - 7月 </caption>

还有一些复杂的表格才能用到的元素 :<col>、 <colgroup>、<thead>、 <tbody> 、<tfoot>等.

  • thead主要用来存放表格的表头的;
  • tbody 用来存放真正的数据的;
  • tfoot是表格的脚部, 主要是用来对表格做总结性的统计, 备注等.

由于thead, tbody, tfoot是从语义 上来划分 表格结构的, 主要用于比较复杂的表格中。


<colspan>合并行元素 :定义<table>中的行的合并

 <td colspan="5">153,629</td>

<rowspan>合并列元素 :定义<table>中的列的合并

 <td rowspan="5">工作</td>

<table>表格的嵌套:

<tr>
		<th scope="row">总计</th>
		<td>36,060</td>
		<td>38,759</td>
		<td>38,110</td>
		<td>40,700</td>
 <td class="ct">
 <table id="t2"> 
 <tr><td></td></tr>
 </table>
 </td>
	</tr>

嵌套


HTML基础表格的应用,上面的简单元素就可以满足,运用表格逻辑思维去思考,可以更快的掌握<table>表格标签。

本文部分图片来自网络,如有侵权,请联系修改。

有下拉列表的表单

题目只能有30个字,不能写全,其实今天我们要学习的内容有三个,第一,下拉列表表单,第二,多行文字输入表单,第三,数据集表单。

开始学习吧!

前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践,今天我们来学习其他包含在<form></form>之间的元素。

带有下拉列表的表单

我们在一些网站填写注册信息时,经常会遇到选择"生活所在地"的操作,因为中国的地名是固定的,因此页面会为我们提供一个下拉列表选项,我们直接点选即可,就不需要输入文字了,这样操作的好处在于不会出现拼写错误。例如:

写这个功能我们需要介绍一组新标签<select></select>。"select"(选择)。在这个标签中再添加<option></option>。"option"(选项)。这样就可以写出带有下拉列表的表单了,示例代码如下:

<select><option></option></select>

这段代码我们继续在昨天的"表单.html"文件中添加即可,在<input type = "image" src = "img/示例图片/submit.jpg"/><br>这段代码之前即可!与这个图片提交按钮共用一个<form></form>标签!

下面我们为多选表单添加名称,示例代码如下:

请选择省份<select><option></option></select>

下面我们添加不同选项,示例代码如下:

请选择省份
  <select >
  <option >河北</option>
  <option >山东</option>
  <option >河南</option>
  <option >海南</option>
  <option >江苏</option>
  <option >安徽</option>
  </select>
  <br><br>

为了规范起见,我们为表单信息添加name和value属性,示例代码如下:

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

大家要注意的是,在下拉列表表单中,name写在<select>中,value写在<option>中。

页面效果如下:

这里告诉大家一个规律,下拉列表表单默认显示第一个<option></option>中的文字内容。

如果您想改变这个默认显示,请在需要显示的<option>中添加selected属性,并赋值为"selected"。

示例代码如下:

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option>
 <!--选中这个选项--><option value="Hainan">海南</option><option value="Jiangsu">江苏</option><option value="Anhui">安徽</option></select><br><br>

页面效果如图:

多行文字输入表单

我们在西瓜视频上发布视频时会被要求填写视频描述,页面中的输入框不是像下图这么短的单行输入框。

而是多行输入框,如图:

使用<textarea></textarea>标签即可添加这样的输入框,不过要设置row(列)和cols(行)属性的数值。示例代码如下:

<br>请简要描述您的剧本的情节<br><textarea row="3" cols="20"></textarea><br>

这段代码添加到</select><br><br>之后,与其共同使用一个<form></form>标签。

下面我们为这个多行输入框添加一些提示和限制。

首先,添加提示文字,和type="text"的<input/>标签一样,都是使用placeholder属性。

第二,我们限制一下字数,使用maxlength(最大长度)属性。

第三,在页面加载完成后,直接让光标停留在输入框中,使用autofocus属性。

下面看看如何写吧,示例代码如下:(不要忘记写好name属性!)

<br>
请简要描述您的剧本的情节<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea><br>

页面效果如图:

如果刷新页面不能正确显示,请尝试关闭后重新打开!

数据集表单

数据集表单实际上就是一个将不同选项或信息打包上传的设置。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。(W3school)

这个数据集有三个部分组成,首先是<fliedset></fliedset>,这个标签不会显示,只是告诉浏览器这里的数据要打包。

第二是<legend></legend>,"legend"(说明),这里添加数据集名称。

第三就是我们之前学到的那些标签了。

示例代码如下:

<fliedset> <legend>信息打包</legend> </fliedset>

下面我们使用这段代码把form2打包一下吧。示例代码如下:

<form>
  <fieldset><!--开始-->
  <legend>信息打包</legend><br>
  <!--标题-->兴趣爱好:<br>
  <input type = "checkbox" name = "hobby" value = "reading"/>读书
  <input type = "checkbox" name = "hobby" value = "film"/>电影
  <input type = "checkbox" name = "hobby" value = "painting"/>绘画
  <input type = "checkbox" name = "hobby" value = "music"/>音乐
  <br>
  最高学历:<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>硕士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option><!--选中这个选项-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  请简要描述您的剧本的情节<br>
  <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--结尾-->
  <input type = "image" src = "img/示例图片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type = "submit" value = "submit"/>
  </form>

页面效果如下:

今天的内容结束了!

如果您喜欢我的教程请关注我,点赞也能让我充满动力!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

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

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作