tables

W3.CSS Tables

W3.CSS makes it easy to style tables with a variety of classes for borders, spacing, and colors.

Basic Table Example

<table class="w3-table w3-bordered">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Striped Table

Use the w3-striped class to create a striped table:

<table class="w3-table w3-striped">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>$2</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$3</td>
  </tr>
</table>

Hoverable Table

Add the w3-hoverable class for a hover effect on table rows:

<table class="w3-table w3-hoverable">
  <tr>
    <th>Task</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Complete Assignment</td>
    <td>Done</td>
  </tr>
  <tr>
    <td>Prepare Presentation</td>
    <td>Pending</td>
  </tr>
</table>