[HTML]Web前端开发技术15（HTML5、CSS3、JavaScript ）表格，bordercolorlight，frame，valign，rowspan，colspan——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

表格

表格

表格标记

表格标记-语法

表格属性设置

表格边框样式属性

表格单元格间距、单元格边距属性

表格水平对齐

设置表格行的属性

表格行的属性-设置

设置单元格的属性

设置单元格的属性-单元格跨行、列

表格嵌套

课后练习

网页标题：计算机报价表

网页标题：会员注册

网页标题：列表标签的应用

总结

---

前言

掌 握设计表格所有标记和属性。

掌握表格行标记的属性及设置方法。

掌握表格单元格的跨行与跨列属性的设置方法。

掌握表格的嵌套方法。

学会在表格中嵌入各种页面元素。

学会使用表格进行简易网页布局。

---

表格

表格

       表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面。

---

表格标记

表格标记-语法

l 在 HTML 中，使用 标记可以创建表格。

  

       

       <tr>

           <th>th> ><th>th> ><th>th> …

      tr>

      <tr>

          

…

      tr>

 

插入表格标题

l 语法说明

  

标记表示插入表格；<tr>tr>表示插入一行；表示插入一列；<th>th>插入表头。

---

表格属性设置

表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。

1.表格的边框属性--border

2.边框的颜色--bordercolor

3.亮边框的颜色--bordercolorlight

4.暗边框的颜色– bordercolordark

5.背景颜色—bgcolor

6.背景图像—background

7.表格宽度与高度—width/height

8.表格对齐属性-align

  利用表格属性实现表格边框线的设置以及美化表格的目的。

 基本语法：

""bordercolor=""bordercolorlight""  align="center"bordercolordark="" >

---

表格边框样式属性

语法： ” rules=” ”>

      frame: 设置表格边框样式； rules: 设置表格内部边框样式

---

表格单元格间距、单元格边距属性

基本语法：

     

cellspacing=“5px” cellpadding=“5px”> 

    cellspacing:设置表格的单元格和单元格之间的间距，默认值是2px，使得表格布局不会显得过于紧凑。

    cellpadding:设置单元的内容与边框的距离。

---

表格水平对齐

……

	
学生信息表(左对齐)
  

  

    
王小品 
    
商学院 
    
110204
  
  

    
李白 
    
机械学院 
    
100244
  
 


……

---

设置表格行的属性

表格行tr标记的属性用于设置表格某一行的样式，其属性设置

---

表格行的属性-设置

表格行内容水平对齐的属性

    <tr align="left | center | right"> tr>

  表格行内容垂直对齐的属性

    <tr valign="top | middle | bottom">tr>

例：<tr align=“left”valign=“middle”> tr>

---

设置单元格的属性

表格列标记td的属性可以设置表格单元格的显示风格。常用的属性如下表所示。单元格的颜色、边框和对齐属性与行tr标记一样。

---

设置单元格的属性-单元格跨行、列

的属性用于设定表格中某一单元格的属性。

单元格跨行 rowspan ( 跨行合并 - 纵向合并 )

单元格跨列 colspan ( 跨列合并 - 横向合并 )

---

表格嵌套

       表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。

---

课后练习

• 网页标题：计算机报价表

• 表格边框为3px 实线 颜色为“#ff6600”；
• 单元格边框1px实线 颜色为“#ff9900”；
• 所有图片宽120px，高120px；
• 提示：¥-人民币符号

        

	
计算机报价单
    

    	
类型
        
型号
        
价格
        
图片
    
   

	
笔记本
    
宏基(Acer)AS4552-P362G32MNCC
    
¥2799
    

    
    

        
戴尔(Dell)14VR-188
        
¥3499
        

    
    

        
联想(LenovoG470AH2310W42G500P7CW3(DB)-CN
        
¥4149
        

    
    

        
台式
        
戴尔家用(DELL)I560SR-656
        
¥3599
        

    
    
宏图奇眩(Hiteker)HS-5508-TF
        
¥3399
        

    

---

• 网页标题：会员注册

• 要求所有的控件都必须设置name属性，单选及多选按钮必须设置value属性
• 文本框：必填项，设置用户填写输入字段的提示
• 密码框：必填项，设置用户填写输入字段的提示
• 单选按钮组，默认选中男
• 复选按钮，默认选中2、3项
• 添加文件上传域
• 添加多行文本域，10行30列，并设置默认文字信息
• 添加提交按钮、重置和普通按钮（注册新会员），注册新会员按钮的onClick属性设置为：οnclick="alert('注册新用户');"

	
会员注册
    

    
用户名：

    
密 码： 

    
性别：男 女

    
你通过哪些渠道了解到我们的产品：
朋友推荐搜索引擎 媒体宣传其他

    
上传个人照片

    
个人简介：
这个人很懒，什么也没有留下

    
  

---

• 网页标题：列表标签的应用

• 表单名为select，表单的提交方式设置为post，表单提交的网址设置为：http://localhost/testform
• 所有的列表select必须设置name属性，所有的option必须设置value属性
• 设置简单列表菜单中的“樱桃”选项为禁用选项
• 如图所示，在分组列表菜单中设置苹果和土豆为默认选中

列表标签select的应用


简单下拉菜单（单选）：

	苹果
    樱桃
    葡萄


简单列表菜单（多选）：

	苹果
    樱桃
    葡萄


分组下拉菜单（单选）：

  
	苹果
	香蕉
	葡萄


	南瓜
	四季豆
	土豆



分组列表菜单（多选）：

  
	苹果
	香蕉
	葡萄


	南瓜
	四季豆
	土豆

---

总结

本章主要介绍了设计表格所有标记和标记属性。

在进行表格设计，需要考虑好表格的对齐方式设计。表格的对齐方式分三类：表格 table 标记的 align 属性、行 tr 标记的 align 和 valign 、列（单元格） td 标记的 align 和 valign 。这些属性的设置如果使用 CSS 样式进行定义，效果更好。

设计表格的背景颜色与背景图像时，最好采用 CSS 样式表，这样效果更易控制。

由于表格的单元格内的内容不同，如果插入大的图像或视频文件时网络延迟会很大，易造成网页打不开，影响网站的正常访问。通常采用表格进行布局时，会使用表格嵌套来细化页面布局。表格嵌套时，必须在单元格中嵌入表格。

---

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！