HTML5——表格及表格属性（持续更新中....）

1、表格概述

在HTML中可以使用表格table标记将一组相关数据直观、明了地展现给网络访问者。
表格以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上，从而设计出漂亮的页面。

在这里先弄清一个概念且熟记：什么是行？是什么是列？

常用表格标记及说明：

表格由表头<thead></thead>、表体<tbody></tbody>、表尾<tfoot></tfoot>三部分组成
表头<thead></thead>由若干个表格标题组成
表体<tbody></tbody>由若干个行<tr></tr>和列<td></td>组成
表尾<tfoot></tfoot>由文字、相关数据和日期组成，表明表的设计单位、设计人和日期等信息。

用法举例：

<table border="1" width="300px" height="100px">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>学号</th>
            </tr>
            <tr>
                <td>小航</td>
                <td>男</td>
                <td>211013</td>
            </tr>
            <tr>
                <td>小金</td>
                <td>男</td>
                <td>211014</td>
            </tr>
    </table>

注意：
web中的表格是一行一行从左到右敲代码的；所有当弄表格时，先敲<tr></tr>
如果是表格标题，如姓名、性别、学号这些就用<th></th>
表里的内容就用<td></td>

网页展示结果：

2、表格标记

在HTML中，表格主要由五个标记构成：table、caption、tr、th、td标记。（可能就是thead、tbody、tfoot不常用的原因吧）

基本语法：

<table border="1" width="300px" height="100px">
            <caption>表格标题</caption>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
    </table>

语法说明：

难理解？看下面图：

一组<tr></tr>标记表示插入一行。一行中可以有多个列，列（也称为单元格）中的内容可以是文字、数据、图像、超链接、表单元素等。

3、表格属性设置

3.1 表格边框属性

基本语法：

<table border=" " bordercolor=" " bordercolorlight=" " bordercolordark=" ">   
           
 </table>

属性说明：

3.1.1 表格的边框样式属性

基本语法：

<table border=" " bordercolor=" " bordercolorlight=" " bordercolordark=" ">   
           
 </table>

属性说明：

3.2 表格的宽度和高度属性

基本语法：

<table width=" " height=" ">   
           
</table>

属性说明：

3.3 表格的背景颜色和背景图像属性

3.4 表格的单元格间距、单元格边距属性

3.5 表格水平对齐属性

4、 设置表格行的属性

5、 设置单元格的属性

5.1、 表格单元格跨行属性

基本语法：

<td rowspan=" 行数" >

</td>

5.2、 表格单元格跨列属性

基本语法：

<td colspan=" 列数" >

</td>

表格单元格跨行、跨列综合实例：
代码展示：

<table align="center" border="1" >
        <thead>
            <tr>
                <th>学号</th>
                <th>学生姓名</th>
                <th>学生年龄</th>
                <th>学生性别</th>
                <th>语文成绩</th>
                <th>数学成绩</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>12</td>
                <td rowspan="4">女</td>  <!-- 占据四行  合并行-->
                <td colspan="2">88</td>  <!-- 占据两列  合并列 -->
                
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>12</td>
                <td>87</td>
                <td>89</td>
            </tr>
            <tr>
                <td>3</td>
                <td>李华</td>
                <td>12</td>
                <td>90</td>
                <td>97</td>
            </tr>
            <tr>
                <td>4</td>
                <td>张明</td>
                <td>12</td>
                <td>90</td>
                <td>97</td>
            </tr>
        </tbody>
    </table>

网页展示结果：