HTML <table> tag, can't see any cell line

214 Views Asked by At

I'm a person who just started to learn coding through a basic HTML book.

Speaking the problem i faced directly, I can't see the cell line on the brower without knowing why i can't see, because I just copied the code which wrote on the book i studied on my code editor.

As I known, if I write the <table>code , there should be a cell line on the brower, but I wasn't able to see that there... If there is anyone who can explain to me, Please help me.. Thanks

Here is the all code.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jake</td>
      <td>24</td>
      <td>Korea</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>24</td>
      <td>Korea</td>
    </tr>
  </tbody>
</table>

Image: enter image description here

1

There are 1 best solutions below

0
On

There are cells & rows but can't see because there is no border for them. You Can Style Your Table with CSS or put just <table border="1">

Snippet: Styled Table

.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border: 1px solid #dee2e6
}

.table td,
.table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6
}


.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6
}

.table tbody+tbody {
    border-top: 2px solid #dee2e6
}
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jake</td>
      <td>24</td>
      <td>Korea</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>24</td>
      <td>Korea</td>
    </tr>
  </tbody>
</table>