devbox
思考机器
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：思考机器 | 2024-01-27 19:04:21

赞

踩

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

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

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

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

目录

前言

表格

表格

表格标记

表格标记-语法

表格属性设置

表格边框样式属性

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

表格水平对齐

设置表格行的属性

表格行的属性-设置

设置单元格的属性

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

表格嵌套

课后练习

网页标题：计算机报价表

网页标题：会员注册

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

总结

前言

掌 握设计表格所有标记和属性。
掌握表格行标记的属性及设置方法。
掌握表格单元格的跨行与跨列属性的设置方法。
掌握表格的嵌套方法。
学会在表格中嵌入各种页面元素。
学会使用表格进行简易网页布局。

表格

表格

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

表格标记

表格标记-语法

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:设置单元的内容与边框的距离。

表格水平对齐

  1. <!-- edu_11_3_4.html -->
  2. ……
  3. <body>
  4. <div id="div1" class="">	
  5. <table align="left"  border="2">
  6.   <csaption>学生信息表(左对齐)</caption>
  7.   <tr>
  8.     <td>王小品 </td>
  9.     <td>商学院 </td>
  10.     <td>110204</td>
  11.   </tr>
  12.   <tr>
  13.     <td>李白 </td>
  14.     <td>机械学院 </td>
  15.     <td>100244</td>
  16.   </tr> 
  17. </table>
  18. </div>
  19. ……

<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；
  • 提示：&yen-人民币符号

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>计算机报价表</title>
  6. <style>
  7. 	caption{
  8. 		font-size:20px;
  9. 		font-weight:bold;
  10. 	}
  11. 	table{
  12. 		border:3px solid #f60;
  13. 	}
  14. 	img{width:120px;
  15. 	height:120px;
  16. 	}
  17. 	td{
  18. 		border:1px solid #f90;
  19. 	}
  20. </style>
  21. </head>
  22.  
  23. <body>
  24. <table>
  25. 	<caption>计算机报价单</caption>
  26.     <tr>
  27.     	<th>类型</th>
  28.         <th>型号</th>
  29.         <th>价格</th>
  30.         <th>图片</th>
  31.     </tr>
  32.    <tr>
  33. 	<td rowspan="3">笔记本</td>
  34.     <td>宏基(Acer)AS4552-P362G32MNCC</td>
  35.     <td>&yen;2799</td>
  36.     <td><img src="images/Acer.jpg"></td>
  37.     </tr>
  38.     <tr>
  39.         <td>戴尔(Dell)14VR-188</td>
  40.         <td>&yen;3499</td>
  41.         <td><img src="images/Dell.jpg"></td>
  42.     </tr>
  43.     <tr>
  44.         <td>联想(LenovoG470AH2310W42G500P7CW3(DB)-CN</td>
  45.         <td>&yen;4149</td>
  46.         <td><img src="images/Lenovo.jpg"></td>
  47.     </tr>
  48.     <tr>
  49.         <td rowspan="2">台式</td>
  50.         <td>戴尔家用(DELL)I560SR-656</td>
  51.         <td>&yen;3599</td>
  52.         <td><img src="images/DellT.jpg"></td>
  53.     </tr>
  54.     <t>
  55.         <td>宏图奇眩(Hiteker)HS-5508-TF</td>
  56.         <td>&yen;3399</td>
  57.         <td><img src="images/Hiteker.jpg"></td>
  58.     </tr>
  59. </table>
  60. </body>
  61. </html>

  • 网页标题：会员注册

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>会员注册</title>
  6. <style>
  7. 	input{font-family:Arial, Helvetica, sans-serif;}
  8. </style>
  9. </head>
  10.  
  11. <body>
  12. <form name="register" method="post" action="http://localhost/testform">
  13. 	<h1>会员注册</h1>
  14.     <hr>
  15.     <div>用户名：<input type="text" name="username" required placeholder="请输入用户名"></div><br/>
  16.     <div>密&emsp;码：<input type="password" name="passw" required placeholder="请输入密码"> </div><br/>
  17.     <div>性别：<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女</div><br>
  18.     <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/>
  19.     <div>上传个人照片<input type="file" name="poto"></div><br/>
  20.     <div>个人简介：<br><textarea rows="10" cols="30">这个人很懒，什么也没有留下</textarea></div><br/>
  21.     <div><input type="submit" value="提交" name="submit"> <input type="reset" value="重置" name="reset"> <input type="button" value="注册新会员" name="regist" onClick="javascript:alert('注册新用户');"></div>
  22. </form>
  23. </body>
  24. </html>

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

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>列表标签的应用</title>
  6. </head>
  7.  
  8. <body>
  9. <h1>列表标签select的应用</h1>
  10. <hr>
  11. <form name="select" method="post" action="http://localhost/testform">
  12. <p>简单下拉菜单（单选）：
  13. <select name="food1">
  14. 	<option value="apple1">苹果</option>
  15.     <option value="cherry1">樱桃</option>
  16.     <option value="grape1">葡萄</option>
  17. </select>
  18. </p>
  19. <p>简单列表菜单（多选）：
  20. <select name="food2" size="3" multiple>
  21. 	<option value="apple2">苹果</option>
  22.     <option value="cherry2" disabled>樱桃</option>
  23.     <option value="grape2">葡萄</option>
  24. </select>
  25. </p>
  26. <p>分组下拉菜单（单选）：
  27. <select name="food3">
  28.   <optgroup label="水果类">
  29. 	<option value="apple">苹果</option>
  30. 	<option value="banana">香蕉</option>
  31. 	<option value="grape">葡萄</option>
  32. </optgroup>
  33. <optgroup label="蔬菜类">
  34. 	<option value="pumpkin">南瓜</option>
  35. 	<option value="bean">四季豆</option>
  36. 	<option value="potato">土豆</option>
  37. </optgroup>
  38. </select>
  39. </p>
  40. <p>分组列表菜单（多选）：
  41. <select name="food4" size="6" multiple>
  42.   <optgroup label="水果类">
  43. 	<option value="apple">苹果</option>
  44. 	<option value="banana">香蕉</option>
  45. 	<option value="grape">葡萄</option>
  46. </optgroup>
  47. <optgroup label="蔬菜类">
  48. 	<option value="pumpkin">南瓜</option>
  49. 	<option value="bean">四季豆</option>
  50. 	<option value="potato">土豆</option>
  51. </optgroup>
  52. </select>
  53. </p>
  54. </form>
  55. </body>
  56. </html>
  57.

总结

本章主要介绍了设计表格所有标记和标记属性。
在进行表格设计，需要考虑好表格的对齐方式设计。表格的对齐方式分三类：表格 table 标记的 align 属性、行 tr 标记的 align 和 valign 、列（单元格） td 标记的 align 和 valign 。这些属性的设置如果使用 CSS 样式进行定义，效果更好。
设计表格的背景颜色与背景图像时，最好采用 CSS 样式表，这样效果更易控制。
由于表格的单元格内的内容不同，如果插入大的图像或视频文件时网络延迟会很大，易造成网页打不开，影响网站的正常访问。通常采用表格进行布局时，会使用表格嵌套来细化页面布局。表格嵌套时，必须在单元格中嵌入表格。

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/42049
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号