HTML tables are intended for displaying tabular data on an internet page. They’re great for displaying information in an organized way, and will be styled with CSS to match the appear and feel of our website. On this tutorial, we’ll cover the fundamentals of making HTML tables and adding styles to make them responsive and mobile-friendly.
Creating an HTML Table
To create an HTML table, we’d like to make use of the
tag. Contained in the
tag, we’d like to create a number of
tags, which define each row of the table. Inside each
tag, we will create a number of
tags, which define the cells of the table. Here’s an example of a basic HTML table:
This can create a table with 4 rows and three columns.
Styling HTML Tables
HTML tables will be styled using CSS to vary their appearance. A few of the most typical CSS properties used to style tables include border, padding, and background-color. Here’s an example of the best way to style a table with a border and a background color:
This can create a table with a black border and a light-weight gray background color, with each cell having a padding of eight pixels.
See the Pen A basic HTML table by SitePoint (@SitePoint) on CodePen.
Making Tables Responsive and Mobile-friendly
One in every of the challenges of using HTML tables is making them responsive and mobile-friendly. One strategy to accomplish that is to make use of CSS to regulate the layout of the table based on the dimensions of the screen. One approach is to make use of the display property to vary the layout of the table from a set layout to a responsive layout. This will be done using media queries to focus on specific screen sizes. Here’s an example of the best way to make a table responsive:
This can make the table layout change from a set layout to a responsive layout when the screen width is lower than 600 pixels.
See the Pen A responsive HTML table with basic styling by SitePoint (@SitePoint) on CodePen.
Adding Captions and Summaries
One other vital aspect of using HTML tables is making them accessible to non-visual users. One strategy to do that is so as to add captions and summaries to the table. The
tag will be used so as to add a caption to the table, which describes the content of the table. Here’s an example of the best way to add a caption to a table:
This can add a caption to the table, stating that it displays sales by month. The
tag will be used to supply a summary of the table for screen readers and other assistive technologies. Here’s an example of the best way to add a summary to a table:
This can 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 a crucial a part of HTML. They’re are essential for displaying tabular data in a semantic and accessible way. Within the early days of the Web, before the appearance of CSS, tables offered a method to put 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 will now deal with the true — and intensely vital — role of HTML tables for displaying data.
Conclusion
HTML tables are a robust tool for displaying tabular data on an internet page. With CSS, tables will be styled to match the appear and feel of our website, and made responsive and mobile-friendly for users on different devices. Adding captions and summaries to tables can assist improve accessibility for users with disabilities. With these techniques, we will create effective tables which can be each visually appealing and functional.
