表格表单的样式

最新推荐文章于 2023-01-11 09:25:55 发布

Dummerd

最新推荐文章于 2023-01-11 09:25:55 发布

阅读量161

点赞数 1

文章标签：大数据

本文链接：https://blog.csdn.net/dummerd/article/details/125792047

版权

一.表格

二.长表格

一.表格

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，

表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单

在网页中也可以来创建出不同的表格。

1、在HTML中，使用table标签来创建一个表格

2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr

3、在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

4、table标签里有自带的属性： border="1" width="40%" align="center"

5、rowspan用来设置纵向的合并单元格

6、colspan横向的合并单元格

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格</title>
  </head>
  <body>
     <table border="1" width='50%' align="center">
       <tr>
         <td>姓名</td>
         <td>体重</td>
         <td>身高</td>
         <td rowspan="4">匹总拢</td>
       </tr>
       <tr>
         <td>张三</td>
         <td>100kg</td>
         <td>180cm</td>
       </tr>
       <tr>
        <td>李四</td>
        <td>50kg</td>
        <td>190cm</td>
      </tr>
      <tr>
        <td colspan="3">放为肯。</td>
      </tr>
     </table>
  </body>
</html>

出来的表格样式

二.长表格

有一些情况下表格是非常的长的

这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签

thead 表头永远在表格的头部

tbody 表格的主体永远在表格中间

tfoot 表格的底部永远在表格底部

用来区分表格不同的部分，顺序，浏览器会自动调整

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

通过table > tr 无法选中行需要通过tbody > tr

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>收入</th>
          <th>支出</th>
          <th>合计</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td>合计</td>
          <td>100</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

出来的长表格样式