antd table表格嵌套子表格_table 表格

最新推荐文章于 2024-08-27 16:05:34 发布

没有故事男同学

最新推荐文章于 2024-08-27 16:05:34 发布

阅读量1.7k

点赞数

文章标签： antd table表格嵌套子表格

本文链接：https://blog.csdn.net/weixin_35461942/article/details/113044397

版权

本文介绍了antd库中Table组件的使用，特别是如何实现表格的嵌套子表格功能。首先，我们了解了HTML表格的基本元素，如`<thead>`、`<tr>`和`<td>`。接着，通过一个简单的5*5表格实例，展示了如何创建基本的表格结构。此外，还讨论了如何添加表头，并提供了设置标题样式的实践操作。

摘要由CSDN通过智能技术生成

<table>标签定义HTML表格。关于table 我们需要认识它的一些内嵌标签有：

<th>，定义表标头，默认情况下标头为粗体且居中。

<tr>，定义表格的每一行。

<td>，定义表格的数据单元格。

因为是表格，我们需要每一行的单元格都是一样的数量，然后我们可以指定每个单元格的宽高。

简单小实例：

<!DOCTYPE html>
<html>
  <head>
    <title>表格</title>
    <style>
      table{
        /* border-collapse:collapse; */
      }
      td{
        width: 100px;
        height:50px;
        text-align: center;
      }
    </style>
  </head>
  
  <body>
    <!-- cellpadding属性设置表格边框之间和表格单元格之间的间距，cellspacing属性设置单元格中的信息四周的间距（两者都是以像素为单位）-->
    <table border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

定义表标头 <th>：th 的多少对应表格的列数

<th>第一列</th>
<th>第二列</th>
<th>第三列</th>

定义表格标题 <caption>：比如我们要给上面表格一个标题的话，我们就需要用到这个标签属性

<caption style="font-size: 20px;font-weight: bold;color: green;">数字表</caption>

动手小练习

编写一个5*5的表格
在第一个简单表格的基础上，给表格添加一个标题（设置颜色，定义字体大小，粗细等样式）

没有故事男同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫