'HTML table borders not showing

I want to include HTML table on my project. The problem is that I created a table and it seems to have very little styling, including no borders at all. I commented out my CSS code, JS code and most parts of HTML code and tried it out in multiple situations but still nothing. I also tried it in 3 different browsers (Brave, Chrome, Edge). What am I missing? I don't use Bootstrap or whatever so styling is not compromised by 3rd party library.

<div class="wrapper">
  <div class="input-container" id="income-input-container">
    <h4>Add income</h4>
    <input type="text" placeholder="Name" id="income-name">
    <input type="text" placeholder="Amount" id="income-amount">
    <input type="date" value="2022-03-15" min="2010-01-01" max="2022-03-15" id="income-date">
    <select id="income-category">
      <option value="Not categorized">Not categorized</option>
      <option value="Job">Job</option>
      <option value="Business">Business</option>
      <option value="Investments">Investments</option>
    </select>
    <button class="submit-button">Submit</button>
  </div>
  <div class="input-container" id="expense-input-container">
    <h4>Add expense</h4>
    <input type="text" placeholder="Name" id="expense-name">
    <input type="text" placeholder="Amount" id="expense-amount">
    <input type="date" value="2022-03-15" min="2010-01-01" max="2022-03-15" id="expense-date">
    <select id="expense-category">
      <option value="Not categorized">Not categorized</option>
      <option value="Clothing">Clothing</option>
      <option value="Medical">Medical</option>
      <option value="Hobbies">Hobbies</option>
      <option value="Travel">Travel</option>
      <option value="Bills">Bills</option>
    </select>
    <button class="submit-button">Submit</button>
  </div>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Amount</th>
        <th>Date</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This name</td>
        <td>This type</td>
        <td>200$</td>
        <td>2021-03-04</td>
        <td>Travel</td>
      </tr>
    </tbody>
  </table>
</div>
htmlcsshtml-table


Solution 1:[1]

Initial a table has no styles. You have to style it on your own.

Here is minimalistic working example:

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Amount</th>
      <th>Date</th>
      <th>Category</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>This name</td>
      <td>This type</td>
      <td>200$</td>
      <td>2021-03-04</td>
      <td>Travel</td>
    </tr>
  </tbody>
</table>

And here are some informations about styling a table

Solution 2:[2]

Add this to your CSS : border-style: solid;. This will create a black line as border around the table.

https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_border-style&preval=solid

Solution 3:[3]

Here's a possibility for simple CSS rules which do a little bit of styling:

border-collapse: collapse prevents double borders, the padding for the cells is optional (creates some space between cell contents and border), as is the margin for the table which creates some top/bottom distance. The border-settings can be varied as desired (style, thickness, color)

table {
  border-collapse: collapse;
  margin: 1em 0;
}

th,
td {
  border: 1px solid #ccc;
  padding: 3px 6px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
</head>

<body>

  <div class="wrapper">

    <div class="input-container" id="income-input-container">
      <h4>Add income</h4>
      <input type="text" placeholder="Name" id="income-name">
      <input type="text" placeholder="Amount" id="income-amount">
      <input type="date" value="2022-03-15" min="2010-01-01" max="2022-03-15" id="income-date">
      <select id="income-category">
        <option value="Not categorized">Not categorized</option>
        <option value="Job">Job</option>
        <option value="Business">Business</option>
        <option value="Investments">Investments</option>
      </select>

      <button class="submit-button">Submit</button>
    </div>

    <div class="input-container" id="expense-input-container">
      <h4>Add expense</h4>
      <input type="text" placeholder="Name" id="expense-name">
      <input type="text" placeholder="Amount" id="expense-amount">
      <input type="date" value="2022-03-15" min="2010-01-01" max="2022-03-15" id="expense-date">
      <select id="expense-category">
        <option value="Not categorized">Not categorized</option>
        <option value="Clothing">Clothing</option>
        <option value="Medical">Medical</option>
        <option value="Hobbies">Hobbies</option>
        <option value="Travel">Travel</option>
        <option value="Bills">Bills</option>
      </select>

      <button class="submit-button">Submit</button>
    </div>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Amount</th>
          <th>Date</th>
          <th>Category</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>This name</td>
          <td>This type</td>
          <td>200$</td>
          <td>2021-03-04</td>
          <td>Travel</td>
        </tr>
      </tbody>
    </table>

  </div>
  <script src="js/main.js"></script>
</body>

</html>

Solution 4:[4]

check: https://www.w3schools.com/html/html_table_borders.asp

First of all, in your html, you can give a "border" attribute equals to "1" to your table element like this:

<table border=1>

Now you will have borders but "double borders". if you check the link from w3schools, you can see some css styles you can write to change how borders look. For example:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 YourBrainEatsYou
Solution 2 Dennis .VN
Solution 3 Johannes
Solution 4 Adrian F

Related Questions