昨天我们在《使用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页面中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>标签实现文本内链接——零基础自学网页制作
HTML 表格:<table> 标签定义 。
简单的 HTML 表格包括: table 元素,一个或多个 tr、th 以及 td 元素。
<table border=1px;> <tr> <th> row1,col1 </th><th>row1,col2 </th> </tr> <tr> <th> row2,col1 </th><td>row2,col2 </td> </tr> </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是从语义 上来划分 表格结构的, 主要用于比较复杂的表格中。
<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页面中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>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息,我们会在24小时内与您取得联系。