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 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.
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.