HTML（五）——表格元素

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样式没什么区别。
• 剩下的一些元素的解释在代码的注释中，本身没有什么样式上的区别，仅在语义上不同。

总结

表格大家都用过，本篇笔记仅记录了表格的完全体写法，然而除了在后台项目中可能会遇到以外，前台项目并没有什么用（旧的系统可能会用到）。