Как я могу заставить эту таблицу работать и в HTML

---

- Привет!

В настоящее время я работаю над тем, чтобы нормальная таблица выглядела лучше, и для этого я использовал CSS, но я не мог сделать так, чтобы таблица была функциональной в HTML, и мне нужно, чтобы она работала, и я не смог этого сделать.

Вот мой CSS код

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

Вот HTML-код

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>

Я был бы признателен за любую помощь, спасибо!

Что я уже пробовал:

Я попытался использовать табличные теги, такие как tr и td, но таблица не показывалась.

---