Course Title: HTML & Web Development Fundamentals: Building Modern Websites Section Title: Tables and Tabular Data Topic: Styling and formatting tables for readability.

In the previous topics, we learned how to create tables using the <table>, <tr>, <th>, and <td> tags, and how to structure tabular data with <thead>, <tbody>, and <tfoot>. In this topic, we'll focus on styling and formatting tables to make them more readable and user-friendly. We'll also cover some best practices for making tables accessible.

Why Style Tables?

While tables provide a neat and organized way to present data, they can be difficult to read if not styled properly. Proper styling can:

• Improve readability
• Enhance the overall user experience
• Increase accessibility
• Make the content more engaging

Adding Basic Styles to Tables

To add basic styles to a table, we can use CSS (Cascading Style Sheets). We'll cover CSS in more detail later in the course, but for now, let's focus on some essential table styling properties.

Here's an example of a simple table without styling:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

Let's add some basic styles to the table using CSS:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f0f0f0;
}

In this example, we added a border to the table, set the width to 100%, and added padding and borders to the table cells. We also set the background color of the table headers to #f0f0f0.

Best Practices for Styling Tables

Here are some best practices for styling tables:

• Use the border-collapse property to collapse borders and create a neat, seamless look.
• Use the border-spacing property to create some space between table cells, rather than using padding.
• Use a consistent color scheme to create visual interest and organization.
• Use a clear, readable font family and size for the table content.
• Use icons or images to break up the content and create visual interest.

Making Tables Accessible

To make tables accessible, follow these guidelines:

• Use the <th> tag to define table headers.
• Use the scope attribute to define the scope of the table headers.
• Use the headers attribute to associate table data cells with table headers.
• Provide a summary of the table content for screen readers and other assistive technologies.

Here's an updated example that includes these accessibility features:

<table>
  <caption>Table of data</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="Name">John Doe</td>
      <td headers="Age">25</td>
      <td headers="City">New York</td>
    </tr>
    <tr>
      <td headers="Name">Jane Doe</td>
      <td headers="Age">30</td>
      <td headers="City">Los Angeles</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Summary of data</td>
    </tr>
  </tfoot>
</table>

In this example, we added a caption to the table, defined the scope of the table headers, and associated table data cells with table headers. We also provided a summary of the table content in the footer.

Conclusion

Styling and formatting tables is essential to making them readable and user-friendly. By following best practices and guidelines for accessibility, we can create tables that provide a great user experience and meet the needs of all users. For more information on CSS and styling tables, check out the World Wide Web Consortium (W3C) guidelines or MDN Web Docs.

What's next?

In the next topic, we'll cover Introduction to forms in HTML: <form> element, attributes, and actions. Learn how to create forms, validate user input, and collect data from users.

Do you have any questions or need help with styling tables? Leave a comment below!