583 HTML标签_表格标签1 and579 HTML标签_列表标签

HTML标签_表格标签

<caption>：表格标题

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--定义表格-->
       <!--设置边框    设置宽的长度  单元边沿与其内容之间的空白-->
    <table border="1" width="50%" cellpadding="1" cellspacing="0">
         <thead>                                   <!--定义单元格直接的空白-->
        <caption>学生信息表</caption>
        <!--定义行-->
        <tr>
            <!--定义单元表格-->
            <!--
            <td>编号</td>
            <td>姓名</td>
            <td>成绩</td>-->
            <!--默认居中，定义表头单元格-->
            <th>编号</th>
            <th>姓名</th>
            <td>成绩</td>
        </tr>
         </thead>
        <tbody>
        <!--    颜色              居中-->
        <tr bgcolor="#a52a2a"align="center">
            <!--定义单元表格-->
            <td>1</td>
            <td>杰瑞</td>
            <td>99</td>
            </tr>

        <tr>
            <!--定义单元表格-->
            <td>2</td>
            <td>汤姆</td>
            <td>80</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <!--定义单元表格-->
            <td>3</td>
            <td>派克</td>
            <td>0</td>
        </tr>

        </tfoot>
    </table>
</body>
</html>
进行分组对部分表格进行更改

合并单元格

 <!--设置边框    设置宽的长度  单元边沿与其内容之间的空白-->
    <table border="1" width="50%" cellpadding="1" cellspacing="0">
        <!--定义单元格直接的空白-->
        <caption>学生信息表</caption>
        <!--定义行-->
        <tr>
            <!--定义单元表格-->
            <th rowspan="2">编号</th>
            <th>姓名</th>
            <td>成绩</td>
        </tr>
        <!--    颜色              居中-->
        <tr bgcolor="#a52a2a"align="center">
            <!--定义单元表格-->
            <td>杰瑞</td>
            <td>90</td>
        </tr>
    
        <tr>
            <!--定义单元表格-->
            <td>2</td>
            <!--占两行格-->
            <td colspan="2">汤姆</td>
        </tr>
    </table>

旅游网站首页

1. 确定使用table来完成布局    
2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>
3. 如果某一行有多个单元格，则使用
    <tr>
        <td>
            <table></table>
        </td>
    </tr>

 

posted @ 2022-10-20 16:32  ja不会va  阅读(37)  评论(0)    收藏  举报