十二、表格标签

最新推荐文章于 2024-06-15 21:20:00 发布

这一片月

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量5.6k

点赞数 4

分类专栏：表格标签文章标签： html

本文链接：https://blog.csdn.net/qq_62865634/article/details/125823786

版权

表格标签专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，表单基本属性和应用。

文章目录

前言
一、表格的基本语法
二、表头单元格标签
三、表格属性
四、表格结构标签
五、合并单元格

提示：以下是本篇文章正文内容，下面案例可供参考

一、表格标签

1、表格的基本语法：表格基本用于展示我的数据

例如

 <table>
        <!--这个是表示表格标签外部框 -->
        <tr>
            <!--这个表示表格里面的一行 -->
            <td>姓名</td>
            <!--表示每一行里面的单表格 -->
            <td>性别</td>
            <td>年龄</td>
        </tr>
</table>

解释；

1、<table></table>表示表格标签

2、<tr></tr>表示表格里面一行

3、<tb></tb>表示每一行里面的小单元格

理解图：

二、表头单元格标签

<th></th>表示标题表头单元格，也就是加粗、居中、更明显

例如；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>

<body>
    <table>
        <!--这个是表示表格标签外部框 -->
        <tr>
            <!--这个表示表格里面的一行 -->
            <td>姓名</td>
            <!--表示每一行里面的单表格 -->
            <td>性别</td>
            <td>年龄</td>
        </tr>

        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>56</td>
        </tr>

        <tr>
            <td>张学友</td>
            <td>男</td>
            <td>55</td>
        </tr>

        <tr>
            <td>郭富城</td>
            <td>男</td>
            <td>51</td>
        </tr>

        <tr>
            <td>黎明</td>
            <td>男</td>
            <td>57</td>
        </tr>

    </table>
</body>

</html>

结果显示：

三、表格属性

注意：表格属性写到“table”标签里面

align（对齐）---------lef(左边)、center（居中）、right(右边)

border（边框）-------1或者" "

cellpadding-----------文字和边框像素为“1”（默认的）

cellspacing----------边框单元格和边框单元格之间的像素“2”（默认的）

width------------宽

height-----------高

如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格属性</title>
</head>

<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
        <!-- 这里设置一个表格属性：注意表格属性一定要放到table里面、里面“alingn”表示的对齐方式、而center是居中、lef左边、right右边 -->
        <!-- 这里border跟前面学图片是一样的边框的意思默认值是“1”、cellpadding表示文字和单元边框的距离默认是“2”、cellspacing表示边框和边框的距离默认为“0”、还有宽、高 -->
        <!--这个是一个表格外框 -->
        <tr>
            <!--是表格框架里的每一行 -->
            <th>名字</th>
            <!--这里“th”表示表头单元格标签、有加粗、居中、用头部比较明显 -->
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>熊大</td>
            <!-- 这个“td”表示每一行的小单元 -->
            <td>男</td>
            <td>80</td>
        </tr>
        <tr>
            <td>熊二</td>
            <td>男</td>
            <td>90</td>
        </tr>

        <tr>
            <td>光头强</td>
            <td>男</td>
            <td>100</td>
        </tr>





    </table>


</body>

</html>

结果显示：

四.表格结构标签

注意：一般表格头部区域用thead、而thead包含在<tr></tr>里面

thead-------------表头的区域

tbody-------------表格主体区域

（1）、外表格用:<table></table>

(2)、用表格每一行：<tr></tr>

thead-------------头表文字应用到<ht></ht>

tbody-------------主体文字应用到<td></td>

（3）、表格属性：

1、取方向：aling：center居中、lef左边、right右边

2、border（边框）：1或者" "

3、cellpadding：文字和边框像素为“1”（默认的）

4、cellspacing：边框单元格和边框单元格之间的像素“2”（默认的）

5、width：宽

6、height：高

（4）、合并单元格：

跨行合并：rowspan

跨列合并： colspan

五、合并单元格

（1）、跨行合并：rowspan 合并单元格个数

（2）、跨列合并： colspan 合并单元格个数

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元格合并</title>
</head>

<body>
    <table align="center" border="1" width="500" height="259" cellping="1" cellspacing="0">

        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- 这里注意一下这个“colspan”是跨列合并、合并时候找它的列左第一个为目标、有几个合并设置几、并且还删除后面的 -->

        </tr>



        <tr>
            <td rowspan="2"></td>
            <!-- 这里“rowspan”表示跨行合并、并且找它的行上面一个为目标、然后还删除后面的 -->
            <td></td>
            <td></td>
        </tr>

        <tr>

            <td></td>
            <td></td>
        </tr>
    </table>

</body>

</html>

结果：

目标单元格：

跨行合并：跨行单元格以最上为目标（也就是第一个开始、保留第一个，在第一个写属性、其他删掉标签就可以了）。

跨列合并：跨列单元格以最左为目标（也就是第一个开始、保留第一个，在第一个写属性、其他删掉标签就可以了）。

例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>

<body>
    <table align="center" border="1" width="1000" height="500" cellping="1" cellspacing="0">


        <tr>
            <th colspan="5">个人简历</th>

        </tr>

        <tr>

            <th>姓名：</th>
            <td>张三</td>
            <th>性别：</th>
            <td>男</td>
            <th rowspan="4">照片</th>

        </tr>

        <tr>

            <th>婚姻状况：</th>
            <td>未婚</td>
            <th>出生年月：</th>
            <td>2001-11-29</td>


        </tr>
        <tr>

            <th>民族：</th>
            <td>汉族</td>
            <th>政治面貌：</th>
            <td>党员</td>


        </tr>


        <tr>

            <th>身高：</th>
            <td>179</td>
            <th>学历：</th>
            <td>本科</td>


        </tr>

    </table>

</body>

</html>

结果：