长表单

有三种元素有助于区分表格的主体内容,第一行和最后一行。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            thead tr th{
                border-bottom: 1px solid black;
            }
            
            tfoot tr td{
                border-top: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div>TODO write content</div>
        <table>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Income</th>
                    <th>Expenditure</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <!-- additional rows as above -->
                <tr>
                    <th>31st January</th>
                    <td>129</td>
                    <td>64</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td>7824</td>
                    <td>1241</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

 

posted @ 2018-07-24 16:47  梦人亭  阅读(117)  评论(0编辑  收藏  举报