Tables

Styling tables in CSS involves controlling various aspects such as layout, borders, padding, colors, and responsiveness.

 <div class="container">
    <div class="responsive mt-3 mb-4">
      <table class="table-black table">
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>  
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
      </table>
    </div>
  </div>

<div class="responsive mt-3 mb-4">
        <table class="table-black table"> // here you can change table colour
        //write your code here
        </table>
</div>

Key Features

• Responsive Design: Adapts to different screen sizes with scrollable tables.

• Theming: Easily switch between themes using predefined color maps.

• Readability: Alternating row colors and hover effects enhance user experience.

This setup provides a flexible, responsive, visually appealing way to manage and present tabular data using CSS and SCSS.