HTML标签_表格标签1与HTML标签_表格标签2

HTML标签_表格标签1

　　　　　　表格标签：

　　　　　　　　table：定义表格

　　　　　　　　tr：定义行

　　　　　　　　td：定义单元格

　　　　　　　　　　　　colspan合并列

　　　　　　　　　　　　rowspan合并行

　　　　　　　　th：定义表头单元格

完成样式

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!--table:定义表格-->
    <!--border:边缘线-->
    <!--width:宽度-->
    <!--cellpadding：定义内容和单元格的距离-->
    <!--cellspacing：定义单元格之间的距离 如果指定为0，则单元格的线会合为一条-->
    <!--bgcolor 背景色-->
    <!--align 对齐方式  center：居中 -->
    <table border="1px" width="20%" cellpadding="0" cellspacing="0" bgcolor="red" align="center">

        <tr>
           <!-- <td>编号</td>
            <td>姓名</td>
            <td>成绩</td>-->
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>

        <tr>
            <td>1</td>
            <td>田余江</td>
            <td>56</td>
        </tr>

        <tr>
            <td>2</td>
            <td>生产队的大驴</td>
            <td>38</td>
        </tr>
    </table>
</body>
</html>

HTML标签_表格标签2

　　　　表格标签2

　　　　　<caption>:表格标题

　　　　　<thead>:表示表格的头部分

　　　　　<tbody>:表示表格的体部分

　　　　　<tfoot>:表示表格的脚部分　　　

 

效果图

 

 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--table:定义表格-->
<!--border:边缘线-->
<!--width:宽度-->
<!--cellpadding：定义内容和单元格的距离-->
<!--cellspacing：定义单元格之间的距离 如果指定为0，则单元格的线会合为一条-->
<!--bgcolor 背景色-->
<!--align 对齐方式  center：居中 -->
<table border="1px" width="50%" cellpadding="0" cellspacing="0" bgcolor="#ffdead" align="center">
         <thead><!--表示表格的头部分-->
         <!--　<caption>:表格标题-->
        <caption>学生信息表</caption>

    　　 <!--table：定义表格
    　　　　　　　　tr：定义行
    　　　　　　　　td：定义单元格
    　　　　　　　　th：定义表头单元格-->
    <tr>
        <!-- <td>编号</td>
         <td>姓名</td>
         <td>成绩</td>-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
        </thead>
    <tbody><!--表示表格的体部分-->
    <!--tr：定义行 定义属性 bgcolor： 背景颜色 align对齐方式：居中 -->
    <tr bgcolor="#ba55d3" align="center">
        <td>1</td>
        <td>梵莫</td>
        <td>56</td>
    </tr>
    <tr>
        <td>2</td>
        <td>大驴</td>
        <td>38</td>
    </tr>


    </tbody>

    <tfoot><!--表示表格的脚部分-->

    <tr>
        <td>3</td>
        <td>生产队的大驴</td>
        <td>38</td>
    </tr>

    </tfoot>
</table>
<hr>

    <!--table:定义表格-->
    <!--border:边缘线-->
    <!--width:宽度-->
    <!--cellpadding：定义内容和单元格的距离-->
    <!--cellspacing：定义单元格之间的距离 如果指定为0，则单元格的线会合为一条-->
    <!--bgcolor 背景色-->
    <!--align 对齐方式  center：居中 -->
    <table border="1px" width="50%" cellpadding="0" cellspacing="0" bgcolor="#ffdead" align="center">
        <!--table：定义表格
　　　　　　　　tr：定义行
　　　　　　　　td：定义单元格
　　　　　　　　th：定义表头单元格-->
        <tr>
           <!-- <td>编号</td>
            <td>姓名</td>
            <td>成绩</td>-->
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>

        <tr>
            <td>1</td>
            <td>梵莫</td>
            <td>56</td>
        </tr>

        <tr>
            <td>2</td>
            <td>生产队的大驴</td>
            <td>38</td>
        </tr>
    </table>
<hr>

<!--table:定义表格-->
<!--border:边缘线-->
<!--width:宽度-->
<!--cellpadding：定义内容和单元格的距离-->
<!--cellspacing：定义单元格之间的距离 如果指定为0，则单元格的线会合为一条-->
<!--bgcolor 背景色-->
<!--align 对齐方式  center：居中 -->
<table border="1px" width="50%" cellpadding="0" cellspacing="0" bgcolor="#ffdead" align="center">
    <!--table：定义表格
　　　　　　　　tr：定义行
　　　　　　　　td：定义单元格
　　　　　　　　th：定义表头单元格-->
    <tr>
        <!-- <td>编号</td>
         <td>姓名</td>
         <td>成绩</td>-->
        <!--rowspan合并行-->

        <th rowspan="2">编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>

    <tr>
        <td>梵莫</td>
        <td>87</td>

    </tr>

    <tr>
        <td>2</td>
        <!--colspan：合并列-->
        <td colspan="2">生产队的大驴</td>

    </tr>
</table>

</body>
</html>

 

posted @ 2022-10-26 13:56  zj勇敢飞，xx永相随  阅读(60)  评论(0)  编辑  收藏  举报