当前位置：
  1. 首页
  2. html
  3. 正文
本文介绍: table表格(结构设置tr行、td列，rowspan纵合并colspan横合并,spacing边距collapse边框合并，thead表头tbody表体tfoot表底，补充)

文章目录

表格

表格的说明(创建一个表格)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table border="1" width="40%" align="center">
      <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
      </tr>
      <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td rowspan="2">B4</td>
      </tr>
      <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
      </tr>
      <tr>
        <td>D1</td>
        <td>D2</td>
        <td colspan="2">D3</td>
      </tr>
    </table>
  </body>
</html>

请添加图片描述

1. 说明

  1. 表格在日常生活中使用非常多，比如 excel 就是专门用来创建表格的工具，
  2. 在网页中也可以创建出不同的表格。

2. 设置

  1. 在 HTML 中，使用 table 标签来创建一个表格
<table border="1" width="40%" align="center"></table>
  1. 在 table 中使用 tr 来表示表格中的一行，有几行就有几个 tr 
<tr>
  <td>A1</td>
  <td>A2</td>
  <td>A3</td>
</tr>

<tr>
  <td>B1</td>
  <td>B2</td>
  <td>B3</td>
</tr>

<tr>
  <td>C1</td>
  <td>C2</td>
  <td>C3</td>
</tr>

<tr>
  <td>D1</td>
  <td>D2</td>
  <td>D3</td>
</tr>
  1. rowspan 用来设置的纵向的合并单元格
<td rowspan="2">B4</td>
  1. colspan 横向的合并单元格
<td colspan="2">D3</td>

表头和表格边框样式设置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      table {
        width: 300px;
        /*居中*/
        margin: 0 auto;
        /*边框*/
        /* border: 1px solid black; */

        border-collapse: collapse;
        /*设置背景颜色*/
        /* background-color: #bfa; */
      }

      /*
       * 设置边框
       */
      td,
      th {
        border: 1px solid black;
      }

    /*
     * 设置隔行变色
     */
      tbody > tr:nth-child(even) {
        background-color: #bfa;
      }

    /*
     * 鼠标移入到tr以后，改变颜色
     */
      tr:hover {
        background-color: #ff0;
      }
    </style>
  </head>
  <body>
      <!-- 
      table是一个块元素
      -->
    <table>
      <tr>
      <!-- 
      可以使用th标签来表示表头中的内容，
      	它的用法和td一样，不同的是它会有一些默认效果
      -->
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>住址</th>
      </tr>

      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>
    </table>
  </body>
</html>

web前端–html-表格-表格边框样式设置

1. 设置

  1. border–spacing 
border-spacing: 0px;
  1. border–collapse 
border-collapse: collapse;
  1. 可以使用 th 标签来表示表头中的内容，

长表格结构和补充

<!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>

      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td>合计</td>
          <td>100</td>
        </tr>
      </tfoot>

      <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>
        <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>
    </table>
  </body>
</html>

请添加图片描述

1. 说明

  1. 有一些情况下表格是非常的长的
  2. 这时就需要将表格分为三个部分，表头，表格的主体，表格的底部

2. 结构

  1. 在 HTML 中为我们提供了三个标签:
  2. 这三个标签的作用，就来区分表格的不同的部分，他们都是 table 的子标签

3. 补充

  1. 如果表格中没有写 tbody，浏览器会自动在表格中添加 tbody
  2. 通过 table > tr 无法选中行，需要通过 tbody > tr

表格布局(被淘汰)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table border="1" width="100%">
      <tr height="100px">
        <td colspan="2"></td>
      </tr>
      <tr height="400px">
        <td width="20%"></td>
        <td width="80%">
          <table border="1" width="100%" height="100%">
            <tr>
              <td></td>
            </tr>
            <tr>
              <td></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr height="100px">
        <td colspan="2"></td>
      </tr>
    </table>
  </body>
</html>

请添加图片描述

1. 表格布局(已经被 CSS 淘汰)

  1. 以前表格更多的情况实际是用来对页面进行布局的，但是这种方式早已经被 CSS 所淘汰了
    • 表格的列数由 td 最多的那行决定
  2. 表格是可以嵌套的，可以在 td 中再放置一个表格

原文地址:https://blog.csdn.net/weixin_64933233/article/details/127914110

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_48708.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 uniapp系列-报错或常见问题处理集锦
下一篇 CSS3技巧36：backdrop-filter 背景滤镜

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。