HTML tables are intended for displaying tabular data on a web page. They’re great for displaying information in an organized way, and can be styled with CSS to match the look and feel of our website. In this tutorial, we’ll cover the basics of creating HTML tables and adding styles to make them responsive and mobile-friendly.
Creating an HTML Table
To create an HTML table, we need to use the
tag. Inside the
tag, we need to create one or more
tags, which define each row of the table. Inside each
tag, we can create one or more
tags, which define the cells of the table. Here’s an example of a basic HTML table:
This will create a table with four rows and three columns.
Styling HTML Tables
HTML tables can be styled using CSS to change their appearance. Some of the most common CSS properties used to style tables include border, padding, and background-color. Here’s an example of how to style a table with a border and a background color:
One of the challenges of using HTML tables is making them responsive and mobile-friendly. One way to accomplish this is to use CSS to adjust the layout of the table based on the size of the screen. One approach is to use the display property to change the layout of the table from a fixed layout to a responsive layout. This can be done using media queries to target specific screen sizes. Here’s an example of how to make a table responsive:
Another important aspect of using HTML tables is making them accessible to non-visual users. One way to do this is to add captions and summaries to the table. The
tag can be used to add a caption to the table, which describes the content of the table. Here’s an example of how to add a caption to a table:
<table><caption>Sales by Monthcaption><tr><th>Monthth><th>Salesth>tr><tr><td>Januarytd><td>$1000td>tr><tr><td>Februarytd><td>$1500td>tr>table>
This will add a caption to the table, stating that it displays sales by month. The
tag can be used to provide a summary of the table for screen readers and other assistive technologies. Here’s an example of how to add a summary to a table:
<tablesummary="Sales by Month"><tr><th>Monthth><th>Salesth>tr><tr><td>Januarytd><td>$1000td>tr><tr><td>Februarytd><td>$1500td>tr>table>
This will provide a summary of the table for screen readers and other assistive technologies, stating that it displays sales by month.
Is Using Tables Bad?
No! Tables are an important part of HTML. They’re are essential for displaying tabular data in a semantic and accessible way. In the early days of the Web, before the advent of CSS, tables offered a means to lay out web page designs, but this wasn’t their intended purose. Thankfully, those days are way behind us (well, mostly, but for some email clients!), and we can now focus on the true — and extremely important — role of HTML tables for displaying data.
Conclusion
HTML tables are a powerful tool for displaying tabular data on a web page. With CSS, tables can be styled to match the look and feel of our website, and made responsive and mobile-friendly for users on different devices. Adding captions and summaries to tables can help improve accessibility for users with disabilities. With these techniques, we can create effective tables that are both visually appealing and functional.
