HTML(五)——表格元素
前言
css技术出现之前,网页通常使用表格布局,从CSS技术出现后,表格一般出现在后台管理页面,因为表格的渲染速度很慢,他需要读取整个表格后,才会渲染出来样式;而CSS是一边读取,一边渲染。另,在此补充概念:
- 前台:指的是给客户使用的网站(面向用户);
- 后台:给网站管理员使用管理网站的(面向管理员)。【注】:后台管理页面一般巨丑,因为不需要客户来体验。
所以,前台、后台与前端、后端是不一样的概念,恳请诸位不要再随意称呼了(尽管有些已经工作的程序员将这四个概念依旧混用,但是希望大家能记住正确的概念——补充一句:一直如此,便是正确?)
- 前端:前端指的是展示给使用者看的(即可视化的);
- 后端:指的是控制前端页面的功能、显示等,一般来说后端指的是服务端,即与数据库和服务器交互的部分。
以上使用的是较为通俗的语言对前后端、前后台进行了解释说明。从上述的概念得知,一个网站它必然拥有前端与后端(无论是前台还是后台,后台不可能看着Java输出框来管理网站)。
前言可能有点跑题,想到哪记录到哪。
文章目录
概述
在本小结中记录表格的相关术语。
- 标题:可以没有,一般在表格上方说明表格的含义;
- 表头:可以没有,一般在表格的第一行,用来说明各列数据的含义;
- 表格主体:用来记录表头中对应的数据;
- 表尾:一般用来对表格的数据进行一些总结、计算。
具体如图1-1所示:
图1-1 表格分区图
上图表格中可以看出,表格是由行组成的,每行都由单元格组成;
由上述概念中联系语义化概念(又见语义化):
- 表头中的每个单元格被称为标题单元格,用th元素来表示
- 表格主体中没个单元格是普通单元格,用td来表示。
这两个元素在显示上没有区别,仅在语义上有区别,不理解的同学要么回去看语义化概念,要么合理劝退。
下面说明表格的完全体写法:
<table style="margin:auto">
<!-- 表格标题 -->
<caption>学生名单</caption>
<!-- 表头 -->
<thead>
<!-- 行 -->
<tr>
<!-- 列 -->
<th>学号</th>
<th>姓名</th>
<th>专业</th>
<th>班级</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>人体表皮污垢清除学</td>
<td>一班</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>人体毛发根部油脂性分泌物清除学</td>
<td>二班</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>人体肢体末端角质摘除学</td>
<td>三班</td>
</tr>
<tr>
<td>1004</td>
<td>赵六</td>
<td>人体神经性过敏导致激素分泌异常促使下肢末端异味研究学</td>
<td>四班</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<!-- 合并列 -->
<td colspan="4">总计</td>
</tr>
</tfoot>
</table>
- colspan:合并列,将一行中相邻的多个单元格合并;
- rowspan:合并行,将一列中相邻的多个单元格合并;
- border-collapse:表示单元格边框的样式。默认值为separate,表示边框分离;collapse表示相邻单元格的边框合并 ;
- 除此之外,可以设置宽高、颜色等,与之前说过的css样式没什么区别。
- 剩下的一些元素的解释在代码的注释中,本身没有什么样式上的区别,仅在语义上不同。
总结
表格大家都用过,本篇笔记仅记录了表格的完全体写法,然而除了在后台项目中可能会遇到以外,前台项目并没有什么用(旧的系统可能会用到)。