|
|
|
|
移动端

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

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

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

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


1.3.6 表格、元信息等标签(1)
 
到本章为止我们已介绍完需要学的主要部分的标签,接下来便来介绍一下其他标签。这部分的表格标签与元信息我们会详细介绍,剩下部分的标签因为用到次数较少便不再赘述其开发过程。表1-10所示为表格、元信息等标签及其描述。
 
表1-10表格、元信息等标签及其描述
 

表格标签<table>定义了HTML表格,简单的表格由table及一个或多个tr、th或td元素组成。复杂点的HTML表格可能会包括caption、col、colgroup、thead、tfoot以及tbody元素。那么我们现在便来看一下第一个表格类程序,图1-11所示为表格标签的案例效果图。
 

本案例是我们本章节的第一个表格类案例,通过案例运行效果图与标签介绍我们便可以想到通过使用本部分介绍的表格标签案例能够创造出各种样式的且在日常生活中需要的类型的表格,那么现在就来看一下案例Sample1_9的开发过程。
 
代码位置:见书中源代码/第1章目录下的HTML5/Sample1_9.html。
 
  1. <html><head><title>Sample1_9</title></head><body> 
  2. <p>从现在开始我们便来学习表格标签的使用,我们首先看到的是<table>标签的用法:</p> 
  3. <h4>只有一行一列的表格:</h4> 
  4. <table border="1"><tr> 
  5. <td>100</td> 
  6. </tr></table> 
  7. <h4>一行三列的表格:</h4> 
  8. <table border="1"><tr> 
  9. <td>100</td><td>200</td><td>300</td> 
  10. 10 </tr></table> 
  11. 11 <h4>两行三列的表格:</h4> 
  12. 12 <table border="1"> 
  13. 13 <tr><td>100</td><td>200</td><td>300</td></tr> 
  14. 14 <tr><td>400</td><td>500</td><td>600</td></tr></table> 
  15. 15 <!--每个表格由<table>标签开始,表格行由<tr>标签开始,每个数据由<td>标签开始。--> 
  16. 16 <p>现在我们学习的是带有边框的表格:</p> 
  17. 17 <h4>带有普通的边框:</h4> 
  18. 18 <table border="1"><tr> 
  19. 19 <td>100</td><td>200</td></tr> 
  20. 20 <tr><td>300</td><td>400</td></tr></table> 
  21. 21 <h4>带有粗的边框:</h4> 
  22. 22 <table border="8"><tr> 
  23. 23 <td>100</td><td>200</td></tr> 
  24. 24 <tr><td>300</td><td>400</td></tr></table> 
  25. 25 <h4>带有很粗的边框:</h4> 
  26. 26 <table border="15"> 
  27. 27 <tr><td>100</td><td>200</td></tr> 
  28. 28 <tr><td>300</td><td>400</td></tr></table> 
  29. 29 <h4>这个表格没有边框:</h4> 
  30. 30 <table><tr> 
  31. 31 <td>100</td><td>200</td><td>300</td></tr> 
  32. 32 <tr><td>400</td><td>500</td><td>600</td> 
  33. 33 </tr></table> 
  34. 34 <!--上面演示的全为边框示例,其中没边框时可以不加border 属性,也可以使其值为0。 
  35. 35 border 属性用于设置边框的宽度。--> 
  36. 36 <p>接下来我们来演示表格中的标题与怎么样为表格添加标题:</p> 
  37. 37 <h4>表头:</h4> 
  38. 38 <table border="1"> 
  39. 39 <tr><th>姓名</th><th>电话</th><th>电话</th></tr> 
  40. 40 <tr><td>张三</td><td>123456</td><td>123455</td> 
  41. 41 </tr></table> 
  42. 42 <h4>垂直的表头:</h4> 
  43. 43 <table border="1"><tr><th>姓名</th><td>李四</td> 
  44. 44 </tr><tr><th>电话</th><td>12345</td> 
  45. 45 </tr><tr><th>电话</th><td>21345</td></tr></table> 
  46. 46 <h4>这个表格有一个标题,以及粗边框:</h4> 
  47. 47 <table border="6"> 
  48. 48 <caption>这是我的标题</caption><tr> 
  49. 49 <td>100</td><td>200</td><td>300</td></tr> 
  50. 50 <tr><td>400</td><td>500</td><td>600</td></tr></table> 
  51. 51 <!--表格的属性,行用<tr>表示,<td>表示列,<th>相当于表头,<table>表示表格, 
  52. 52 这几个标签构成表单最基本的样子。<th>为表格中的表头,<caption>为表格的标题。--> 
  53. 53 </body></html> 
第2~15行演示了基础的表格标签的使用方法。我们都知道表格中有行与列,所以在HTML中它们都有相应的标签,<tr>标签定义表格的一行,<td>标签定义表格每行中的一项数据,在一般情况下<table>会经常与<tr>、<td>一起使用的。
 
第16~35行为表格的边框效果示例,表格标签中的border属性用于设置边框的宽度属性,不设置这个属性时默认为0。在设置边框宽度时应该本着合适的原则,一般情况下我们设置border值为1或者不设置就行。
 
第36~53行为表格标题的示例。表格标签中<th>属性定义表格中的表头,设计表格时即为第一行内容,所以<th>为表格内部的内容。而caption属性用于设置表格的标题,其位置是在表格的外部,通过本部分案例的运行可以看到这些区别。
 
由于篇幅问题,所以将本小节的标签分为了3部分介绍。这3部分其实可以组合成为一个程序,但是这样做代码过长,有点不利于读者学习,所以我们将其分为了3部分。上面的示例为第一部分的示例,接下来我们来看一下第二部分的案例运行效果图,如图1-12所示。
 
 

本部分案例主要讲述了表格的各种边框的显示形式与表格的嵌套形式。这些形式在CSS中也可以设置,编程时要具体分析什么情况下用到哪种形式,有时层叠样式表比本节演示的要简单,有时不如本节演示的简单,我们来看一下具体的案例开发。
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_10.html。
 
  1. <html><head><title>Sample1_10</title></head><body> 
  2. <p>接下来我们将演示如何定义跨行或跨列的表格单元格:</p> 
  3. <h4>横跨两列的单元格:</h4> 
  4. <table border="1"><tr> 
  5. <th>姓名</th><th colspan="2">电话</th></tr> 
  6. <tr><td>张三</td><td>123456</td><td>123455</td></tr></table> 
  7. <h4>横跨两行的单元格:</h4> 
  8. <table border="1"><tr> 
  9. <th>姓名</th><td>李四</td></tr> 
  10. 10 <tr><th rowspan="2">电话</th><td>12345</td></tr> 
  11. 11 <tr><td>21345</td></tr></table> 
  12. 12 <!--colspan 属性规定表头单元格可横跨的列数,rowspan 属性规定表头单元格可横跨的行数。--> 
  13. 13 <p>接下来我们来演示一下在表格内如何使用其他类型的标签</p> 
  14. 14 <table border="1"><tr><td> 
  15. 15 <p>这是一个段落。</p><p>这是另一个段落。</p> 
  16. 16 </td><td>这个单元包含一个表格: 
  17. 17 <table border="1"><tr> 
  18. 18 <td>100</td><td>200</td></tr> 
  19. 19 <tr><td>300</td><td>400</td> 
  20. 20 </tr></table></td> 
  21. 21 </tr><tr> 
  22. 22 <td>这个单元包含一个列表: 
  23. 23 <ul><li>苹果</li><li>香蕉</li><li>菠萝</li> 
  24. 24 </ul></td><td>HELLO</td> 
  25. 25 </tr></table> 
  26. 26 <!--从本部分可以看出,如果想在表格内部嵌套一些其他标签则直接在<td>标签内部继续添加标签即可。--> 
  27. 27 <p>现在我们要演示的为用于规定单元格边与内容的距离和单元格之间的距离的两个属性的应用:</p> 
  28. 28 <h4>没有 cellpadding,即单元格与内容没有距离:</h4> 
  29. 29 <table border="1"><tr> 
  30. 30 <td>100</td><td>200</td></tr> 
  31. 31 <tr><td>300</td><td>400</td></tr></table> 
  32. 32 <h4>带有 cellpadding,即单元格与内容有距离:</h4> 
  33. 33 <table border="1" cellpadding="10"><tr> 
  34. 34 <td>100</td><td>200</td></tr> 
  35. 35 <tr><td>300</td><td>400</td></tr></table> 
  36. 36 <!--cellpadding 属性规定单元边沿与其内容之间的空白。--> 
  37. 37 <h4>带有 cellspacing:</h4> 
  38. 38 <table border="1" cellspacing="10"><tr> 
  39. 39 <td>100</td><td>200</td></tr> 
  40. 40 <tr><td>300</td><td>400</td></tr></table> 
  41. 41 <!--cellspacing 属性规定的是单元之间的空间。从实用角度出发, 
  42. 42 最好不要规定 cellpadding,而是使用 CSS 来添加内边距。--> 
  43. 43 </body></html> 
 
第2~12行演示如何定义跨行或者跨列的表格,colspan属性规定的是可以横跨的列数,rowspan为可以横跨的行数属性,这两个属性应用在表头属性中,因为我们平时制定表格时只有表格的表头需要合并。
 
第13~26演示的为在表格内部如何应用其他类型的标签,这里的思想其实就是嵌套。上面的案例中我们在表格中嵌套了段落、表格、列表,这里只是一个示例,还可以嵌套其他很多标签,我们在这里不多介绍了。
 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


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

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

读 书 +更多

网络工程师教程(第2版)

本书是全国计算机技术与软件专业技术资格(水平)考试的指定用书。按照新的网络工程师考试大纲的规定,本书包含了数据通信基础知识、网络体...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊