第1关：表格的综合案例

最新推荐文章于 2024-08-05 17:34:26 发布

白马过平川-m0_73143451

最新推荐文章于 2024-08-05 17:34:26 发布

阅读量613

点赞数 11

分类专栏： Educoder刷题文章标签：服务器前端

本文链接：https://blog.csdn.net/m0_73143451/article/details/136437709

版权

Educoder刷题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章对比了错误代码版本与正确代码，展示了如何使用HTML和CSS美化表格布局，以清晰呈现本周的财政计划，包括收入、支出和备注。

摘要由CSDN通过智能技术生成

错误代码

<!-- ********* Begin ********* -->
<table border="2px" width="100%" cellspacing="0" cellpadding="6" align="center">
    <caption align="center">本周财政计划</caption>
    <tr>
        <td colspan="2" rowspan="2" align="center">项目</td>
        <td colspan="2"align="center">本周发生</td>
        <td align="center">备注</td>
        
    </tr>

        <tr>
        <td align="center">收入</td>
        <td align="center">支出</td>
        <td></td>

        
    </tr>
        <tr>
        <td rowspan="3" align="center">收入</td>
        <td align="center">贷款收回</td>
        <td align="center">8700</td>
        <td align="center">0</td>
        <td></td>

    </tr>
        <tr>
        <td align="center">内部转款</td>
        <td align="center">6000</td>
        <td align="center">0</td>
        <td></td>

    </tr>
        <tr>
        <td align="center">收入合计</td>
        <td align="center">14700</td>
        <td align="center">0</td>
        <td></td>

    </tr>
        <tr>
        <td rowspan="3" align="center">支出</td>
        <td align="center">采购支出</td>
        <td align="center">0</td>
        <td align="center">5000</td>
        <td></td>

    </tr>
        <tr>
        <td align="center">工资支出</td>
        <td align="center">0</td>
        <td align="center">7000</td>
        <td></td>

    </tr>

        <tr>
        <td align="center">支出合计</td>
        <td align="center">0</td>
        <td align="center">12000</td>
        <td></td>

    </tr>

</table>

<!-- ********* End ********* -->

正确代码

<!-- ********* Begin ********* -->
   <style>
    body{
       margin:30px;
    }
    table{
       /*居中对齐*/
        text-align: center;     
    }
    </style>
    <!--设置表格-->
    <caption>本周财政计划</caption>
    <table border="2" cellspacing="0" cellpadding="6" width="100%">
        <caption>本周财政计划</caption>
    <tr>
        <td rowspan="2"colspan="2">项目 </td>
        <td colspan="2">本周发生</td>
        <td rowspan="2">备注</td>
    </tr>
    <tr>
        <td>收入</td>
        <td>支出</td>
    </tr>
    <tr>
        <td rowspan="3">收入</td>
        <td>贷款收回</td>
        <td>8700</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td>内部转款</td>
        <td>6000</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td>收入合计</td>
        <td>14700</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="3">支出</td>
        <td>采购支出</td>
        <td>0</td>
        <td>5000</td>
        <td></td>
    </tr>
    <tr>
        <td>工资支出</td>
        <td>0</td>
        <td>7000</td>
        <td></td>
    </tr>
    <tr>
        <td>支出合计</td>
        <td>0</td>
        <td>12000</td>
        <td></td>
    </tr>  
    </table>

<!-- ********* End ********* -->