Question

如何在HTML中的表格中放置边框？我们是否使用colspan来实现这些功能？

Answer 1

这是一个列边框的示例，没有为每行的相同列设置样式有关详细参考，请参阅<colgroup>。

＆＃13;

table {
  border-collapse: collapse;
}
.outlined {
  border: 1px solid blue;
}

＆＃13;

<table>
  <colgroup>
    <col>
    <col class="outlined">
    <col span="3">
  </colgroup>
  <tr>
    <td>First</td>
    <td>Second</td>
    <td>Third</td>
    <td>Fourth</td>
    <td>Fifth</td>
  </tr>
  <tr>
    <td>First</td>
    <td>Yellow</td>
    <td>Third</td>
    <td>Fourth</td>
    <td>Fifth</td>
  </tr>
  <tr>
    <td>First</td>
    <td>Yellow</td>
    <td>Third</td>
    <td>Fourth</td>
    <td>Fifth</td>
  </tr>
</table>

＆＃13;

Answer 2

HTML代码

 <table>
  <tr>
    <th>Expenses</th>
    <th>Cost</th>
 </tr>
 <tr>
   <td>iPhone 8</td>
   <td>$1200</td>
  </tr>
  <tr>
    <td>MacBook Pro</td>
    <td>$2800</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $4000</td>
   </tr>
 </table>

CSS代码

th, td {
border: 2px solid black;
}

你也可以玩桌子{border}

Answer 3

使用;

td { border: 1px solid #000000; }

colspan是合并细胞。例如;下面的行合并2个单元格

<tr><td colspan="2">Merged Column</td></tr>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan

Answer 4

<html>
<head>
<title></title>
<style>
table, th, td {
    border: 1px solid #000;
}
</style>
</head>
<body>
    <table style="width:100%">
       <tr>
          <th>Firstname</th>
          <th>Lastname</th> 
          <th>Age</th>
       </tr>
       <tr>
          <td>Raju</td>
          <td>Kumar</td>
          <td>22</td>
       </tr>
       <tr>
          <td>Mohit</td>
          <td>Sharma</td>
          <td>20</td>
       </tr>
   </table>
</body>
</html>

围绕HTML表格中的特定列边框

4 个答案: