以坚实的专业知识 新颖的设计
满足每一位客户的个性需求

用HTML5创建表格

发布时间:2018/4/19 来源:沈阳志鼎科技有限公司

   前言


上次介绍了用Dreamweaver来创建热点区域,其实就是一个简单的软件使用而已,了解整个流程就行了。这次介绍如何使用HTML5创建表格。表格在HTML文档中也是一个比较重要的内容,除了可以清晰的显示数据,在早期还被用来进行页面布局和排版,但是在此一定要跟大家重点强调下:十分不不建议使用表格来进行页面布局和排版等相关工作,弊端十分的多,很难进行维护,有时候网页的崩溃就是因为使用了表格来进行页面布局。HTML中的表格类似于Word软件中的表格,如果你使用了像Dreamweaver之类的网页制作软件,基本操作也很相似。但我们这里还是用记事本来进行相关操作,毕竟只有掌握了一门技术的真正内涵才会创造出更方便更实用的东西。


表格的基本结构
表格的基本操作
完整的表格标记
表格的基本结构


使用表格显示数据,十分的直观和清晰,让人一目了然,便于进行数据的分析。在此再说明一次,在HTML文档中主要显示的是数据,虽然可以使用表格布局,但是十分不建议使用。表格一般有行、列和单元格组成,这个大家都懂就不进行详细说明了。HTML制作表格还是通过使用相关标记定义来实现的,如表格对象<table>、行对象<tr>、单元格对象<td>等。
<table>标记用于标记一个表格对象的开始,</table>标记则表示结束。一个表格中,只允许出现一对<table>标记。。
<tr>标记用于标识表格一行的开始,</tr>标记则标识结束。表格内有多少对<tr></tr>标记,就表示表格有多少行。
<td>标记用于标记表格某行中的一个单元格开始,</td>标记则标识结束。<td></td>标记书写在<tr></tr>标记内,一对<tr></tr>标记内有多少对<td></td>标记,就表示有多少个单元格。在HTML5中有colspan和rowspan两个属性,在表格的基本操作进行详细说明。
在最基本的表格中,必须包含一对<table></table>标记,一对或者几对<tr></tr>标记以及一对或者几对<td></td>标记。一对<table></table>标记定义一个表格,一对``标记定义一行,一对```标记定义一个单元格。
下面给出一个创建表格的例子:


 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>表格基本结构</title>
 6</head>
 7<body>
 8<table >
 9    <tr>
10        <td>A1</td>
11        <td>B1</td>
12        <td>C1</td>
13        <td>D1</td>
14    </tr>
15    <tr>
16        <td>A2</td>
17        <td>B2</td>
18        <td>C2</td>
19        <td>D2</td>
20    </tr>
21    <tr>
22        <td>A3</td>
23        <td>B3</td>
24        <td>C3</td>
25        <td>D3</td>
26    </tr>                  <!--表格基本结构-->
27</table>
28</body>
29</html>
在Mozilla Firefox的渲染结果如下:






这是我放大300%的结果。可能有朋友要出来吐槽说,这算哪门子的表格?连个边框都没有,而且行高和列宽也无法控制。这些我们都可以通过CSS解决,这个就不用担心了,等我们讲到CSS的时候就可以完美解决了。所以各位多多支持下就可以了。




表格的基本操作


在实际应用中,并非所有的表格都是规范的几行几列,有时候也需要进行将某些单元格进行合并,来达到我们特定的要求。在HTML中合并的方式一共有两种:一种是上下合并,一种是左右合并,这两种合并方式只需要使用<td>标记中的两个属性就行。


用colspan属性合并左右两个单元格


左右单元格的合并需要使用<td>标记中的colspan属性来完成,格式如下:


1<td colspan="数值">单元格内容</td>
其中,colspan属性的取值为数值型整数数据,代表几个单元格进行左右合并。
需要注意的是在合并单元格后,相应的单元格标记就应该减少,否则就会多出来一个,并且后面的单元格依次向右移动。


用rowspan属性合并上下两个单元格


左右单元格的合并需要使用<td>标记中的rowspan属性来完成,格式如下:


1<td rowspan="数值">单元格内容</td>
其中,rowspan属性的取值为数值型整数数据,代表几个单元格进行左右合并。同样也需要注意上述的问题。
来看一个合并单元格的例子:
实现如下效果(为了显示方便,下面的图片被放大了500%):




代码如下:


 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>表格基本结构</title>
 6</head>
 7<body>
 8<table border="1">
 9    <tr>
10        <td colspan="2">A1B1</td>     <!--左右合并-->
11        <td>C1</td>
12        <td>D1</td>
13    </tr>
14    <tr>
15        <td rowspan="2">A2 A3</td>       <!--上下合并-->
16        <td>B2</td>
17        <td>C2</td>
18        <td>D2</td>
19    </tr>
20    <tr>
21        <td>B3</td>
22        <td>C3</td>
23        <td>D3</td>
24    </tr>                  <!--合并单元格-->
25</table>   
26</body>
27</html>
其实,我们发现合并单元格就是“丢掉”某些单元格。


完整的表格标记


在上面我们了解到了表格中最常用的三个标记,使用它们我们可以构造出最简单的表格。为了让表格结构更清楚,以及配合后面的CSS样式,更方便地制造出各种各样的表格,表格中还会出现表头、主体、脚注等。三者对应的HTML标记为<thead>、<tbody>、<tfoot>。
另外表格还有两个标记。标记<caption>表示表格的标题,在一行中除了<td>标记表示一个单元格以外,还可以使用<th>定义表格内的表头单元格。
使用<caption>标记定义了表格标题,<thead>、<tbody>和<tfoot>标记对表格进行了分组。在<thead>部分使用<th>标记代替<td>标记定义单元格,<th>标记定义的单元格默认加粗。<caption>标记必须紧随<table>标记之后。


最后为了巩固这次的内容,再来看一个例子:
实现如下效果:




实现代码如下:


 1<!doctype html>
 2<html>
 3<head>
 4<meta charset="utf-8">
 5<title>创建表格</title>
 6<style>
 7    tfoot{background-color: #FF3;}
 8    </style>
 9</head>
10<body>
11<p>
12<table width="200" border="1">
13    <tr>
14      <td colspan="2">&nbsp;</td>
15      <td>&nbsp;</td>
16      <td>&nbsp;</td>
17    </tr>
18    <tr>
19      <td>&nbsp;</td>
20      <td>&nbsp;</td>
21      <td rowspan="2">&nbsp;</td>
22      <td>&nbsp;</td>
23    </tr>
24    <tr>
25      <td>&nbsp;</td>
26      <td>&nbsp;</td>
27      <td>&nbsp;</td>
28    </tr>
29</table>
30</p>
31  <table >
32   <caption>学生成绩单</caption>
33    <thead>
34     <tr>
35         <th>姓名</th><th>性别</th><th>成绩</th>
36     </tr>
37    </thead>
38    <tfoot>
39        <tr>
40            <td>平均分</td><td colspan="2">540</td>
41        </tr>
42    </tfoot>
43    <tbody>
44     <tr>
45      <td>张三</td>
46      <td>男</td>
47      <td>560</td>
48      </tr>
49    </tbody>
50    <tr>
51      <td>李四</td>
52      <td>男</td>
53      <td>520</td>
54    </tr>
55</table>
56</body>
57</html>
还是希望各位去敲一敲。