Responsive Tables & Structured Lists

w3-table-all, striped rows, hoverable rows, and avatar list items

« Responsive Navigation Bars & Dropdowns« Previous Forms, Inputs, Checkboxes & Floating Labels »Next »

Displaying tabular and list data cleanly is achieved using w3-table-all for striped, bordered data grids and w3-ul for styled lists.

Table Formatting Classes

w3-table: Basic padding for table cells.

w3-striped: Alternates zebra row background colors.

w3-bordered: Adds horizontal dividing lines between rows.

w3-table-all: Combines border, striping, and hover effects into a single complete data table style.

w3-responsive: Wraps tables in a scrollable horizontal container on mobile screens.

Professional Striped Data Table

Try It Yourself »

<div class="w3-responsive">
  <table class="w3-table-all w3-hoverable">
    <thead>
      <tr class="w3-teal">
        <th>Course Track</th>
        <th>Lessons</th>
        <th>Credential</th>
        <th>Enrolled</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>HTML5 Mastery</td><td>12</td><td>Certified</td><td>14,200</td></tr>
      <tr><td>Modern JavaScript</td><td>15</td><td>Certified</td><td>28,450</td></tr>
      <tr><td>Python Data Science</td><td>14</td><td>Certified</td><td>31,100</td></tr>
    </tbody>
  </table>
</div>

w3-table-all creates instant polished data tables.

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which class wraps a wide table to enable horizontal scrolling on small mobile screens?

« Previous: Responsive Navigation Bars & Dropdowns Next: Forms, Inputs, Checkboxes & Floating Labels »