|
|
|
|
移动端

1.3.6 表格、元信息等标签(2)

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍表格、元信息等标签。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:19

技术沙龙 | 6月30日与多位专家探讨技术高速发展下如何应对运维新挑战!


1.3.6 表格、元信息等标签(2)
 
第27~43行演示的为用于规定单元格边与内容的距离和单元格之间的距离的两个属性的应用,cellpadding与cellspacing的区别我们在案例中进行了解释。需要注意的是在真正开发中我们最好不要用这两个属性,使用CSS样式表会更简便。
 
到这里为止只有剩下为数不多的几个标签没有介绍了,其中还包括一些今后在WebGL开发中不常用的一些标签,所以在此我们不再赘述了。那么我们先来看一下图1-13所示的剩下的一些标签的案例运行效果图。
 
 

看了这部分标签案例的示意图不难发现其与上一个案例的内容其实是相近的,所以学习本部分标签的同时,也是在温习表格标签的格式与样式的内容。做过Excel表格的读者都知道表格的排版其实也挺麻烦的,在我们之前与将要介绍的案例中会包含用得最多的一些格式,我们现在来看一下案例的开发过程。
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_11.html。
 
  1. <html><head><title>Sample1_11</title></head><body> 
  2. <p>接下来我们来看一下如何向表格与单元格内部添加背景颜色或者背景图片:</p> 
  3. <h4>为表格添加背景颜色:</h4> 
  4. <table border="1" bgcolor="red"> 
  5. <tr><td>100</td><td>200</td></tr> 
  6. <tr><td>300</td><td>400</td></tr></table> 
  7. <h4>为表格单元格添加背景颜色:</h4> 
  8. <table border="1"><tr> 
  9. <td bgcolor="red">100</td><td>200</td></tr> 
  10. 10 <tr><td bgcolor="blue">300</td><td>400</td></tr></table> 
  11. 11 <p>现在我们来看一下用align 属性在单元格中排列内容</p> 
  12. 12 <table width="400" border="1"><tr> 
  13. 13 <th align="left">消费项目</th> 
  14. 14 <th align="right">一月</th> 
  15. 15 <th align="right">二月</th></tr> 
  16. 16 <tr><td align="left">衣服</td> 
  17. 17 <td align="right">$100</td> 
  18. 18 <td align="right">$200</td></tr> 
  19. 19 <tr><td align="left">化妆品</td> 
  20. 20 <td align="right">$100</td> 
  21. 21 <td align="right">$150</td></tr> 
  22. 22 <tr><td align="left">食物</td> 
  23. 23 <td align="right">$500</td> 
  24. 24 <td align="right">$600</td></tr> 
  25. 25 <tr><th align="left">总计</th> 
  26. 26 <th align="right">$700</th> 
  27. 27 <th align="right">$950</th></tr></table> 
  28. 28 <!--align 属性规定单元格内容的水平对齐方式。其值除了left、right 之外还有center(居中对齐)、 
  29. 29 justify(对行进行伸展,这样每行都可以有相等的长度)、char(将内容对准指定字符)。--> 
  30. 30 <p>接下来我们来演示如何使用“frame”属性控制围绕表格的边框:</p> 
  31. 31 <p>表格的frame 属性为border:</p> 
  32. 32 <table frame="border"><tr> 
  33. 33 <th>月份</th><th>消费</th></tr> 
  34. 34 <tr><td>一月</td><td>$100</td></tr></table> 
  35. 35 <p>表格的frame 属性为above:</p> 
  36. 36 <table frame="above"><tr> 
  37. 37 <th>月份</th><th>消费</th></tr> 
  38. 38 <tr><td>一月</td><td>$100</td></tr></table> 
  39. 39 <p>表格的frame 属性为below:</p> 
  40. 40 <table frame="below"><tr> 
  41. 41 <th>月份</th><th>消费</th></tr> 
  42. 42 <tr><td>一月</td><td>$100</td></tr></table> 
  43. 43 <p>表格的frame 属性为hsides:</p> 
  44. 44 <table frame="hsides"><tr> 
  45. 45 <th>月份</th><th>消费</th></tr> 
  46. 46 <tr><td>一月</td><td>$100</td></tr></table> 
  47. 47 <p>表格的frame 属性为vsides:</p> 
  48. 48 <table frame="vsides"><tr> 
  49. 49 <th>月份</th><th>消费</th></tr> 
  50. 50 <tr><td>一月</td><td>$100</td></tr></table> 
  51. 51 <!--frame 属性无法在 Internet Explorer 中正确地显示。除了以上示意的五个值之外,还有void 
  52. 52 (不显示外边框)、lhs(显示左边的外侧边框)、rhs(显示右边的外侧边框)。不过 
  53. 53 从实用角度出发,最好不要规定 frame,而是使用 CSS 来添加边框样式。--> 
  54. 54 </body></html> 
 
 
第2~10行示例如何向表格内部添加背景颜色或者背景图片,这些操作的实质是一样的,我们这里只介绍了背景颜色的添加,图片的添加过程与之前其他示例中添加图片的步骤是一致的。只需要将程序中的bgcolor改掉,再增加图片的位置即可。
 
第11~29行为align属性的介绍,该属性定义了单元格中的内容的排列。其值除了left、right之外,还有center、justify、char,分别表示居中、对行进行伸展、内容对准指定字符。
 
第30~54行展示的是frame属性的应用,这个属性控制围绕表格的边框。读者在学习这个属性时需要将每个属性值对应的效果记清楚,因为这个属性的值可选的有很多,这里只列了其中一部分,读者还可以全部试一下,我们在注释中已经列出其他值。
 
到此为止我们便介绍完了HTML中的标签,因为本书的主体部分并不是HTML,所以我们只是介绍了这些标签的部分属性,但是这些足以应付在今后开发WebGL时遇到的问题。我们只是介绍了其中的基础用法,所以今后的开发中还应该多学习此方面的更多知识。
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

一目了然——Web软件显性设计之路

本书阐述了为什么以及如何设计出简单易用的基于Web的软件,让用户单凭常识即可有效地使用它。主要内容包括:显性设计的概念、如何理解用户...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊