QuitExams

W3.CSS Table Classes

W3.CSS provides several classes to create responsive, colorful, and styled tables easily.

1️⃣ Basic Table (w3-table)

A simple table with default W3.CSS styling.

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

2️⃣ Striped Table (w3-striped)

Add alternating row colors for readability.

<table class="w3-table w3-striped w3-bordered">
  <tr><th>Product</th><th>Price</th></tr>
  <tr><td>Book</td><td>$10</td></tr>
  <tr><td>Pen</td><td>$2</td></tr>
</table>

3️⃣ Hoverable Table (w3-hoverable)

Rows highlight when hovered.

<table class="w3-table w3-hoverable w3-bordered">
  <tr><th>City</th><th>Country</th></tr>
  <tr><td>Paris</td><td>France</td></tr>
  <tr><td>Tokyo</td><td>Japan</td></tr>
</table>

4️⃣ Colored Table Header (w3-table w3-bordered w3-teal)

Add background color to the table header or table rows.

<table class="w3-table w3-bordered">
  <tr class="w3-teal"><th>Course</th><th>Duration</th></tr>
  <tr><td>HTML</td><td>3 Weeks</td></tr>
  <tr><td>CSS</td><td>2 Weeks</td></tr>
</table>