Foundation CSS Tables

Tables are a fundamental component of web design used for organizing and displaying tabular data. Foundation CSS provides a set of classes and styles to easily create responsive and visually appealing tables. Here's how to create tables using Foundation CSS:

1. Basic Table Structure

To create a basic table, use the <table>, <thead>, <tbody>, and <tr> elements to define the table structure. Use <th> for table headers and <td> for table cells.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

2. Responsive Tables

Foundation CSS provides classes to make tables responsive on smaller screens. Use the stack class to stack table rows vertically on small screens, making them easier to read and navigate.

<table class="stack">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

3. Styling and Customization

Foundation CSS provides various classes to style and customize tables, including colors, borders, and hover effects. Use classes such as table-striped for striped rows, hover for hover effects, and unstriped for removing stripes.

<table class="hover">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

Conclusion

Foundation CSS provides a convenient and flexible way to create tables with responsive design and customizable styling options. By following these guidelines and utilizing Foundation CSS classes, you can create tables that are both functional and visually appealing for your web projects.

Archive