HTML table borders not showing-CodePudding

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 >
  <div  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 >Submit</button>
  </div>
  <div  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 >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>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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 >

    <div  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 >Submit</button>
    </div>

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

CodePudding user response：

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