HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
#rankings-table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#rankings-table td, #rankings-table th {
  border: 1px solid #ddd;
  padding: 8px;
}

#rankings-table tr:nth-child(even){background-color: #f2f2f2;}

#rankings-table tr:hover {background-color: #ddd;}

#rankings-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<h1>Coffe ordeers</h1>

<ul id="order">

</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>