W3.CSS Tables

Welcome to The Coding College! In this post, we’ll explore how to create beautifully styled and responsive tables using W3.CSS. Tables are essential in web design for organizing and presenting data effectively. With W3.CSS Tables, you can make them visually appealing and user-friendly.

Let’s dive into the world of W3.CSS Tables!

Why Use W3.CSS Tables?

W3.CSS Tables simplify table styling with built-in classes, ensuring:

  • Consistency: Predefined styles give your tables a uniform look.
  • Responsiveness: Tables adapt seamlessly to different screen sizes.
  • Customizability: Easily tweak colors, borders, and spacing to match your website’s theme.

Basic W3.CSS Table Classes

ClassDescription
w3-tableAdds default table styling.
w3-borderedAdds borders around table cells.
w3-stripedAdds alternating row colors.
w3-hoverableHighlights rows on hover.
w3-centeredCenters content within the table cells.
w3-responsiveMakes the table scrollable on small screens.

Examples of W3.CSS Tables

1. Basic Table

A simple, styled table using the w3-table class.

<table class="w3-table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
  </tr>
  <tr>
    <td>Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
  </tr>
</table>

2. Table with Borders

Add borders to your table for a structured look.

<table class="w3-table w3-bordered">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

3. Striped Table

Alternate row colors improve readability.

<table class="w3-table w3-striped">
  <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>

4. Hoverable Table

Highlight rows when hovered over to improve interactivity.

<table class="w3-table w3-hoverable">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$0.50</td>
  </tr>
</table>

5. Responsive Table

Ensure tables look good on smaller devices.

<div class="w3-responsive">
  <table class="w3-table w3-bordered">
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>$800</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>$400</td>
      <td>50</td>
    </tr>
  </table>
</div>

6. Combining Features

Combine multiple classes for advanced styling.

<div class="w3-responsive">
  <table class="w3-table w3-bordered w3-striped w3-hoverable">
    <tr class="w3-blue">
      <th>Student</th>
      <th>Grade</th>
      <th>Remarks</th>
    </tr>
    <tr>
      <td>Alex</td>
      <td>A</td>
      <td>Excellent</td>
    </tr>
    <tr>
      <td>Sara</td>
      <td>B</td>
      <td>Good</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>C</td>
      <td>Average</td>
    </tr>
  </table>
</div>

Advanced Customization

Colored Table Rows

Apply specific colors to rows or columns for emphasis.

<table class="w3-table">
  <tr class="w3-light-grey">
    <th>Task</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Design</td>
    <td class="w3-green">Completed</td>
  </tr>
  <tr>
    <td>Development</td>
    <td class="w3-yellow">In Progress</td>
  </tr>
</table>

Adding Icons to Tables

Integrate icons for better visual representation.

<table class="w3-table">
  <tr>
    <th>File</th>
    <th>Type</th>
  </tr>
  <tr>
    <td><i class="fa fa-file-pdf-o"></i> Report.pdf</td>
    <td>PDF</td>
  </tr>
  <tr>
    <td><i class="fa fa-file-word-o"></i> Document.docx</td>
    <td>Word</td>
  </tr>
</table>

Collapsible Tables

Use collapsible containers for large data sets.

<button onclick="document.getElementById('dataTable').classList.toggle('w3-hide')" class="w3-button w3-blue">Toggle Table</button>
<div id="dataTable" class="w3-hide w3-responsive">
  <table class="w3-table w3-bordered">
    <tr>
      <th>Category</th>
      <th>Count</th>
    </tr>
    <tr>
      <td>Books</td>
      <td>150</td>
    </tr>
    <tr>
      <td>Magazines</td>
      <td>75</td>
    </tr>
  </table>
</div>

Best Practices

  1. Keep It Responsive
    Use the w3-responsive class for tables that adapt to different devices.
  2. Use Borders and Stripes Wisely
    Borders and striped rows improve data readability.
  3. Add Meaningful Headers
    Use <th> tags for column headers to enhance table semantics.
  4. Test for Accessibility
    Ensure tables are readable with assistive technologies by adding ARIA attributes where needed.

Conclusion

With W3.CSS Tables, you can create stunning, responsive, and functional tables effortlessly. From simple designs to advanced interactive features, W3.CSS offers the tools to make your data presentation stand out.

For more web development tutorials and tips, visit The Coding College.

Leave a Comment