希望你开心,希望你健康,希望你幸福,希望你点赞!
最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!!
喵喵喵,你对我真的很重要!
目录
前言
表格
表格
表格标记
表格标记-语法
表格属性设置
表格边框样式属性
表格单元格间距、单元格边距属性
表格水平对齐
设置表格行的属性
表格行的属性-设置
设置单元格的属性
设置单元格的属性-单元格跨行、列
表格嵌套
课后练习
网页标题:计算机报价表
网页标题:会员注册
网页标题:列表标签的应用
总结
前言
掌 握设计表格所有标记和属性。 掌握表格行标记的属性及设置方法。 掌握表格单元格的跨行与跨列属性的设置方法。 掌握表格的嵌套方法。 学会在表格中嵌入各种页面元素。 学会使用表格进行简易网页布局。
表格
表格
表格是网页设计制作不可缺少的元素,它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上,让我们可以设计出漂亮的页面。
表格标记
表格标记-语法
l 在 HTML 中,使用 <table></table> 标记可以创建表格。<table>
<caption>插入表格标题</caption>
<tr>
<th></th> ><th></th> ><th></th> …
</tr>
<tr>
<td ></td> <td ></td> <td ></td> …
</tr>
</table>
l 语法说明<table></table>标记表示插入表格;<tr></tr>表示插入一行;<td></td>表示插入一列;<th></th>插入表头。
表格属性设置
表格是网页文件中布局的重要元素,制作网页的过程中常常需要对网页中的表格做一些设置,对表格的设置实质是对表格标记属性的一些设置。
1.表格的边框属性--border
2.边框的颜色--bordercolor
3.亮边框的颜色--bordercolorlight
4.暗边框的颜色– bordercolordark
5.背景颜色—bgcolor
6.背景图像—background
7.表格宽度与高度—width/height
8.表格对齐属性-align
利用表格属性实现表格边框线的设置以及美化表格的目的。
基本语法:
<table border"" bordercolor="" bordercolorlight"" align="center" bordercolordark="" > </table >
表格边框样式属性
语法: <table frame=” ” rules=” ”> </table >
frame: 设置表格边框样式; rules: 设置表格内部边框样式
表格单元格间距、单元格边距属性
基本语法:
<table cellspacing=“5px” cellpadding=“5px”> </table >
cellspacing:设置表格的单元格和单元格之间的间距,默认值是2px,使得表格布局不会显得过于紧凑。
cellpadding:设置单元的内容与边框的距离。
表格水平对齐
<!-- edu_11_3_4.html -->
……
<body>
<div id="div1" class="">
<table align="left" border="2">
<csaption>学生信息表(左对齐)</caption>
<tr>
<td>王小品 </td>
<td>商学院 </td>
<td>110204</td>
</tr>
<tr>
<td>李白 </td>
<td>机械学院 </td>
<td>100244</td>
</tr>
</table>
</div>
……
<table align="center" border="2"> </table>
设置表格行的属性
表格行tr标记的属性用于设置表格某一行的样式,其属性设置
表格行的属性-设置
表格行内容水平对齐的属性
<tr align="left | center | right"> </tr>
表格行内容垂直对齐的属性
<tr valign="top | middle | bottom"></tr>
例:<tr align=“left”valign=“middle”> </tr>
设置单元格的属性
表格列标记td的属性可以设置表格单元格的显示风格。常用的属性如下表所示。单元格的颜色、边框和对齐属性与行tr标记一样。
设置单元格的属性-单元格跨行、列
<td>的属性用于设定表格中某一单元格的属性。
单元格跨行 rowspan ( 跨行合并 - 纵向合并 ) 单元格跨列 colspan ( 跨列合并 - 横向合并 )
表格嵌套
表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下,使用表格嵌套时,表格不宜过多使用,否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
课后练习
网页标题:计算机报价表
- 表格边框为3px 实线 颜色为“#ff6600”;
- 单元格边框1px实线 颜色为“#ff9900”;
- 所有图片宽120px,高120px;
- 提示:¥-人民币符号
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算机报价表</title>
<style>
caption{
font-size:20px;
font-weight:bold;
}
table{
border:3px solid #f60;
}
img{width:120px;
height:120px;
}
td{
border:1px solid #f90;
}
</style>
</head>
<body>
<table>
<caption>计算机报价单</caption>
<tr>
<th>类型</th>
<th>型号</th>
<th>价格</th>
<th>图片</th>
</tr>
<tr>
<td rowspan="3">笔记本</td>
<td>宏基(Acer)AS4552-P362G32MNCC</td>
<td>¥2799</td>
<td><img src="images/Acer.jpg"></td>
</tr>
<tr>
<td>戴尔(Dell)14VR-188</td>
<td>¥3499</td>
<td><img src="images/Dell.jpg"></td>
</tr>
<tr>
<td>联想(LenovoG470AH2310W42G500P7CW3(DB)-CN</td>
<td>¥4149</td>
<td><img src="images/Lenovo.jpg"></td>
</tr>
<tr>
<td rowspan="2">台式</td>
<td>戴尔家用(DELL)I560SR-656</td>
<td>¥3599</td>
<td><img src="images/DellT.jpg"></td>
</tr>
<t>
<td>宏图奇眩(Hiteker)HS-5508-TF</td>
<td>¥3399</td>
<td><img src="images/Hiteker.jpg"></td>
</tr>
</table>
</body>
</html>
网页标题:会员注册
- 要求所有的控件都必须设置name属性,单选及多选按钮必须设置value属性
- 文本框:必填项,设置用户填写输入字段的提示
- 密码框:必填项,设置用户填写输入字段的提示
- 单选按钮组,默认选中男
- 复选按钮,默认选中2、3项
- 添加文件上传域
- 添加多行文本域,10行30列,并设置默认文字信息
- 添加提交按钮、重置和普通按钮(注册新会员),注册新会员按钮的onClick属性设置为:οnclick="alert('注册新用户');"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>会员注册</title>
<style>
input{font-family:Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<form name="register" method="post" action="http://localhost/testform">
<h1>会员注册</h1>
<hr>
<div>用户名:<input type="text" name="username" required placeholder="请输入用户名"></div><br/>
<div>密 码:<input type="password" name="passw" required placeholder="请输入密码"> </div><br/>
<div>性别:<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女</div><br>
<div>你通过哪些渠道了解到我们的产品:<br/><input type="checkbox" name="know" value="c1">朋友推荐<input type="checkbox" name="know" value="c2" checked>搜索引擎 <input type="checkbox" value="c3" name="know" checked>媒体宣传<input type="checkbox" value="c4" name="know">其他</div><br/>
<div>上传个人照片<input type="file" name="poto"></div><br/>
<div>个人简介:<br><textarea rows="10" cols="30">这个人很懒,什么也没有留下</textarea></div><br/>
<div><input type="submit" value="提交" name="submit"> <input type="reset" value="重置" name="reset"> <input type="button" value="注册新会员" name="regist" onClick="javascript:alert('注册新用户');"></div>
</form>
</body>
</html>
网页标题:列表标签的应用
- 表单名为select,表单的提交方式设置为post,表单提交的网址设置为:http://localhost/testform
- 所有的列表select必须设置name属性,所有的option必须设置value属性
- 设置简单列表菜单中的“樱桃”选项为禁用选项
- 如图所示,在分组列表菜单中设置苹果和土豆为默认选中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签的应用</title>
</head>
<body>
<h1>列表标签select的应用</h1>
<hr>
<form name="select" method="post" action="http://localhost/testform">
<p>简单下拉菜单(单选):
<select name="food1">
<option value="apple1">苹果</option>
<option value="cherry1">樱桃</option>
<option value="grape1">葡萄</option>
</select>
</p>
<p>简单列表菜单(多选):
<select name="food2" size="3" multiple>
<option value="apple2">苹果</option>
<option value="cherry2" disabled>樱桃</option>
<option value="grape2">葡萄</option>
</select>
</p>
<p>分组下拉菜单(单选):
<select name="food3">
<optgroup label="水果类">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="grape">葡萄</option>
</optgroup>
<optgroup label="蔬菜类">
<option value="pumpkin">南瓜</option>
<option value="bean">四季豆</option>
<option value="potato">土豆</option>
</optgroup>
</select>
</p>
<p>分组列表菜单(多选):
<select name="food4" size="6" multiple>
<optgroup label="水果类">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="grape">葡萄</option>
</optgroup>
<optgroup label="蔬菜类">
<option value="pumpkin">南瓜</option>
<option value="bean">四季豆</option>
<option value="potato">土豆</option>
</optgroup>
</select>
</p>
</form>
</body>
</html>
总结
本章主要介绍了设计表格所有标记和标记属性。 在进行表格设计,需要考虑好表格的对齐方式设计。表格的对齐方式分三类:表格 table 标记的 align 属性、行 tr 标记的 align 和 valign 、列(单元格) td 标记的 align 和 valign 。这些属性的设置如果使用 CSS 样式进行定义,效果更好。 设计表格的背景颜色与背景图像时,最好采用 CSS 样式表,这样效果更易控制。 由于表格的单元格内的内容不同,如果插入大的图像或视频文件时网络延迟会很大,易造成网页打不开,影响网站的正常访问。通常采用表格进行布局时,会使用表格嵌套来细化页面布局。表格嵌套时,必须在单元格中嵌入表格。
希望你开心,希望你健康,希望你幸福,希望你点赞!
最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!!
喵喵喵,你对我真的很重要!