<table>
        <thead>
          <tr>
              <th>Name</th>
              <th>Item Name</th>
              <th>Item Price</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Alvin</td>
            <td>Eclair</td>
            <td>$0.87</td>
          </tr>
          <tr>
            <td>Alan</td>
            <td>Jellybean</td>
            <td>$3.76</td>
          </tr>
          <tr>
            <td>Jonathan</td>
            <td>Lollipop</td>
            <td>$7.00</td>
          </tr>
        </tbody>
      </table>
            

Add class="compact" to the table tag to make the table cells have less padding

Add class="striped" to the table tag for a striped table

Add class="highlight" to the table tag to make the table highlightable.

Add class="sticky" to the table tag and class="sticky-header" to the <tr> tag to make it stick to the top. You can also add class="blur-bg" to the <tr> tag to make the header translucent and class="blur-bg acrylic" if you want the acrylic effect.

To adjust the top position on where to stick the header, just add an inline css --sticky-header-top: 1px; to the <th> or <td> inside the tr.sticky-header. You can change the 1px value on whatever you want.

Please note that the header will only stick if the elements inside the <tr> tag are <th> instead of <td> and the container of the table must not have overflow: auto|scroll.

Add class="centered" to the table tag to center align all the text in the table

Add class="responsive-table" to the table tag to make the table horizontally scrollable on smaller screen widths.

If you prefer the scrollable table, wrap the table with <div class="responsive-container"></div> container.

    <div class="responsive-container">
      <table>
        <!-- Table contents -->
      </table>
    </div>