文章第一句话为“这是我参与「第四届青训营 」笔记创作活动的第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 |
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | |
| A4 | B4 | C4 | |
实现效果:
<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>