css表格 | 青训营笔记

96 阅读1分钟

文章第一句话为“这是我参与「第四届青训营 」笔记创作活动的第18天

前言:在现实生活中,相信大家都会遇到一些需要处理的表格或者表单,对于这些表格大家可能都会用word或者其他的一些办公软件去解决,但是其实我们也可以在网页上设置表格,今天我就粗略的带大家来尝试建立一下表格

一.表格介绍

代码:

`

Document
</table>
` | |

| --------------- | ---------------------------------------------------------------------- | | | | | | | | | | | | | | | | | | | | | Document | | | | | | | | | | | | | | | <!-- | | | | | |

 在现实生活中,我们经常需要使用表格来表示一些格式化数据:  

课程表、人名单、成绩单....
| | | | | 同样在网页中我们也需要使用表格,我们通过table标签来创建一个表格
| | | | | --> | | | | | |

日期 收入 支出 合计
2000.1.1 500 200 300
2000.1.1 500 200 300
2000.1.1 500 200 300
2000.1.1 500 200 300
合计 300
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
A1B1C1D1
A2B2C2D2
A3B3C3
A4B4C4
| | | | | | | | | | | |

实现效果:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table border="1" width='50%' align="center">
        <!-- 
            可以将一个表格分成三个部分:
                头部 thead
                主体 tbody
                底部 tfoot
                th 表示头部的单元格
         -->
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>300</td>
            </tr>
        </tfoot>

    </table>
</body>

</html>