CODEWITHSUNDEEP
html
Shivangi Singh
Shivangi Singh

Reputation: 1139

Border around a specific column in a table in HTML

How do I put a border around a column in a table in HTML? Do we use colspan for such functions?

Upvotes: 1

Views: 14132

Answers (4)

webtrackstudio
webtrackstudio

Reputation: 1

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

Upvotes: -2

Jasur Kurbanov
Jasur Kurbanov

Reputation: 96

HTML code

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

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

You can also play around with table{border}

Upvotes: 0

showdev
showdev

Reputation: 29168

Here's an example of a column border without styling the same column of each row.
See <colgroup> for more reference.

table {
  border-collapse: collapse;
}
.outlined {
  border: 1px solid blue;
}
<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>

Upvotes: 7

msg
msg

Reputation: 1540

Use;

td { border: 1px solid #000000; }

colspan is to merge cells. For example; below line merges 2 cells

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

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

Upvotes: -1

Related Questions