JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<div class="container">

    <table>
      <caption>Employee Directory - Complete Table Structure Demo</caption>

      <!-- THEAD - Table Header Section -->
      <thead>
        <tr>
          <th rowspan="2">ID</th>
          <th colspan="3">Personal Information</th>
          <th rowspan="2">Department</th>
          <th rowspan="2">Salary</th>
        </tr>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
        </tr>
      </thead>

      <!-- TBODY - Table Body Section (Main Content) -->
      <tbody>
        <tr>
          <td>001</td>
          <td>Alice</td>
          <td>Johnson</td>
          <td>[email protected]</td>
          <td>Engineering</td>
          <td>$85,000</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Bob</td>
          <td>Smith</td>
          <td>[email protected]</td>
          <td>Marketing</td>
          <td>$72,000</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Carol</td>
          <td>Williams</td>
          <td>[email protected]</td>
          <td>Engineering</td>
          <td>$90,000</td>
        </tr>
        <tr>
          <td>004</td>
          <td>David</td>
          <td>Brown</td>
          <td>[email protected]</td>
          <td>Sales</td>
          <td>$68,000</td>
        </tr>
      </tbody>

      <!-- TFOOT - Table Footer Section (Summary/Totals) -->
      <tfoot>
        <tr>
          <td colspan="4" style="text-align: right;"><strong>Total Employees:</strong></td>
          <td><strong>4</strong></td>
          <td><strong>$315,000</strong></td>
        </tr>
        <tr>
          <td colspan="4" style="text-align: right;"><strong>Average...

CSS

.container {
  margin-top: 50px !important;
}

table {
  width: 100%;
}