一、表格标签的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非变强。

表格不是用来布局页面的,而是用来展示数据的.

二、表格标签的基本语法

     <!-- 表格标签 -->
    <table>
        <!-- 表格的头部区域 -->
        <thead>
            <tr>
                <!-- 表头标签，第一行，居中加粗显示 -->
                <th></th>
            </tr>
        </thead>
        <!-- 表格的躯干部分 -->
        <tbody>
            <!-- 表格的行 -->
            <tr>
                <!-- 表格的列 -->
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </tbody>
    </table>

注解：

1.table标签：用于定义表格的标签。所有的表格标签属性都要写在table里面。

2.thead标签：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。

3.th标签：该表格的表头部分。

表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示.

4.td标签：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

5.tbody标签：用于定义表格的主体，主要用于放数据本体。

6.tr标签：用于定义表格中的行，必须嵌套在 <table> </table>标签中

三、表格标签的属性

align是表格相对页面对齐方式，有left/center/right三种方式，分别是左对齐，居中对齐，和右对齐。
border是表格的边框线宽度，默认为无边框。
cellspacing是单元格之间的空白，即边框线的宽度。
cellpadding是单元格内容距边框线的空白。即内容与边框线的距离。
width是表格的宽度。

所有属性都要写在table标签里。

表格属性.png

<table  align="center" border="1" cellspacing=0 cellpadding=10 width=500>

四、合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格的个数" 从上到下：最上侧单元格为目标单元格, 写合并代码

跨列合并：colspan="合并单元格的个数" 从左到右：最左侧单元格为目标单元格, 写合并代码

单元格合并.png

合并单元格三步曲：

先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan="2"></td>。
删除多余的单元格。

       <th colspan="5">个人简历</th>
       <td rowspan="4">照片</td>

五、案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
</head>

<body>
    <table border="1" cellspacing="0" align="center" width=500 height=800>
        <thead>
            <tr>
                <th colspan="6">
                    <h2>个人简历</h2>
                </th>
            </tr>
        </thead>
        <tbody>
            <!-- 第二行 -->
            <tr align="center">
                <td>姓名：</td>
                <td>小艾</td>
                <td>专业：</td>
                <td>修仙</td>             
               <!-- 跨列合并2个单元格，跨行合并3个单元格 -->
                <td colspan="2" rowspan="3"></td>
            </tr>
            <!-- 第三行 -->
            <tr align="center">
                <td>性别：</td>
                <td>女</td>
                <td>毕业学校：</td>
                <td>家里蹲大学</td>
            </tr>
            <!-- 第四行 -->
            <tr align="center">
                <td>名族：</td>
                <td>汉</td>
                <td>住址：</td>
                <td>火星</td>
            </tr>
            <!-- 第五行 -->
            <tr align="center">
                <td>学历：</td>
                <td>博士前</td>
                <td>邮箱：</td>
                <td>123.com</td>
                <td>联系方式：</td>
                <td>110</td>
            </tr>
            <!-- 第六行 -->
            <tr align="center">
                <td>出生日期：</td>
                <td>1999</td>
                <td>电话：</td>
                <td>123456789</td>
                <td> 邮编</td>
                <td>654321</td>
            </tr>
            <!-- 第七行 -->
            <tr>             
                <!-- 跨列合并2个单元格 -->
                <td colspan="2" align="center">实习经历</td>
                <!-- 跨列合并4个单元格 -->
                <td colspan="4">搬砖</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

表格案例.png

06.表格标签<table>