<!DOCTYPE html>
<html>
<head>
 <title>HTML Table Example</title>
<style>
  table {width: 100%; border-collapse: collapse;
   }
  th, td {
   border: 1px solid black;
   padding: 8px;
   text-align: left;
 }   
th { background-color: #f2f2f2; }
    </style>
</head>
<body>
<table>
       <caption>Monthly Expenses</caption>
<thead>
        <tr>
        <th>Expense</th>
        <th>Amount ($)</th>
</tr>
 </thead>
 <tbody>
 <tr>
         <td>Rent</td>
         <td>1000</td>
  </tr>
  <tr>
       <td>Utilities</td>
       <td>200</td>
  </tr>
  <tr>
        <td>Groceries</td>
        <td>300</td>
 </tr>
         </tbody>
         <tfoot>
  <tr>
       <td>Total</td>
       <td>1500</td>
  </tr>
  </tfoot>
  </table> 

</body>
 </html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.