Tables

Table is a structured layout used to organize and present data in a tabular format. It provides a clear, systematic way to display information with rows and columns, making it easier for users to compare, analyze, and understand data sets within digital interfaces.

---

Table Style 1

This table style with color and zebra striping employs alternating light and dark background colors in its rows, enhancing its visual clarity and user-friendliness. This improves readability and helps users easily track or differentiate between rows of data.

    <table class="table-style-1">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
        <tr>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
        <tr>
          <td>x</td>
          <td>x</td>
          <td>x</td>
          <td>x</td>
        </tr>
      </tbody>
    </table>
  

---

Table Style Simple

The simple table style provides clean and minimalist appearance, using plain, neutral backgrounds and borders for rows and columns. This style prioritizes content clarity and straightforward presentation, making data easily readable and understandable.

      <table class="table-style-simple">
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
          </tr>
          <tr>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
          </tr>
          <tr>
            <td>x</td>
            <td>x</td>
            <td>x</td>
            <td>x</td>
          </tr>
        </tbody>
      </table>