效果图
image.png

HTML部分

  1. <body>
  2.   <table cellspacing="0" align="center">
  3.     <thead>
  4.       <tr>
  5.         <th>交易日期</th>
  6.         <th>市场类别</th>
  7.         <th>本日融资余额(元)</th>
  8.         <th>本日融资买入额(元)</th>
  9.         <th>本日融券余量(元)</th>
  10.         <th>本日融资融券余额(元)</th>
  11.       </tr>
  12.     </thead>
  13.     <tbody>
  14.       <tr>
  15.         <td rowspan="3">2021-09-13</td>
  16.         <td>上海</td>
  17.         <td>9307.64亿</td>
  18.         <td>746.88亿</td>
  19.         <td>1082.39亿</td>
  20.         <td>10390.03亿</td>
  21.       </tr>
  22.       <tr>
  23.         <td>深圳</td>
  24.         <td>8219.74亿</td>
  25.         <td>595.93亿</td>
  26.         <td>649.87亿</td>
  27.         <td>8869.61亿</td>
  28.       </tr>
  29.       <tr>
  30.         <td>两市合计</td>
  31.         <td>17527.38亿</td>
  32.         <td>1342.81亿</td>
  33.         <td>1732.26亿</td>
  34.         <td>19259.64亿</td>
  35.       </tr>
  36.     </tbody>
  37.   </table>
  38. </body>

下面是没写style的效果图，
用rowspan=”3”,实现跨三行。
align=”center”,实现在页面水平中央布局
cellspacing=”0”，让单元格间距为0
image.png

style部分

 <style>
    table {
      width: 500px;
      height: 200px;
    }

    table,
    th,
    td {
      border: 1px solid blue;
    }
  </style>

效果图：
image.png
发现我的border设定的宽度是1px，但是效果却显的有点宽了些。原因是表格的边框默认是分开的，这样就会相当于是2px，所以宽了些。
解决方法就是加上：
border-collapse: collapse;
边框合并为一个单一的边框

加了之后的效果图
image.png
最后终结一下，发现最重要的是border-collapse:collapse的运用。