How can I have this table working in HTML as well

See more:

CSS

HTML

table

CSS3

HTML5

Hello!

I am currently working on making a normal table looks better and I used CSS for this, but I couldn't have the table being functional in HTML and I need that to work and I wasn't able to accomplish it.

Here is my CSS code

.table {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: table;
  border-spacing: 5px;
}

@media screen and (max-width: 580px) {
  .table {
    display: block;
  }
}

.row {
  display: table-row;
  background: #f6f6f6;
}

.row:nth-of-type(odd) {
  background: #e9e9e9;
}

.row.header {
  font-weight: 900;
  color: #ffffff;
  background: #808080;
}

.row.green {
  background: #27ae60;
}

.row.blue {
  background: #2980b9;
}

@media screen and (max-width: 580px) {
  .row {
    padding: 8px 0;
    display: block;
  }
}

.cell {
  padding: 6px 12px;
  display: table-cell;
}

@media screen and (max-width: 580px) {
  .cell {
    padding: 2px 12px;
    display: block;
  }
}

Here is the HTML code

div class="table">
    
    <div class="row header">
      <div class="cell">
        Name
      </div>
      <div class="cell">
        Category
      </div>
      <div class="cell">
        Amount
      </div>
      <div class="cell">
        Location
      </div>
	  <div class="cell">
        Purchase date
      </div>
    </div>
    
    <div class="row">
      <div class="cell">
        Banana
      </div>
      <div class="cell">
        Fruit
      </div>
      <div class="cell">
        1
      </div>
      <div class="cell">
        Amsterdam
      </div>
	  <div class="cell">
        2015-02-16
      </div>
    </div>
    
    <div class="row">
      <div class="cell">
        Tomato
      </div>
      <div class="cell">
        Vegetable
      </div>
      <div class="cell">
        3 
      </div>
      <div class="cell">
        Zaandam	
      </div>
	  <div class="cell">
        2015-02-17
      </div>
    </div>
    
    <div class="row">
      <div class="cell">
        Ham	
      </div>
      <div class="cell">
        Meat	
      </div>
      <div class="cell">
        2
      </div>
      <div class="cell">
        Rotterdam
      </div>
	  <div class="cell">
        2015-02-18
      </div>
    </div>
    
    <div class="row">
      <div class="cell">
	     <input type="text" name="name" form="inventory_form" required>
      </div>
      <div class="cell">
		<input type="text" name="category" form="inventory_form" required>
      </div>
      <div class="cell">
         <input type="number" name="amount" form="inventory_form" required>
      </div>
      <div class="cell">
		<input type="text" name="location" form="inventory_form" required>
      </div>
	  <div class="cell">
        <input type="date" name="date" form="inventory_form" required>
      </div>
    </div>	
	<div>
	  <input type="submit" value="Submit" form="inventory_form">
	</div>
  </div>

I'd appreciate any help, thanks!

What I have tried:

I tried using table tags like tr and td but no table was showing.