The HTML Table is not as flexible as DIV structures, but it is useful for sorting multiple data sets in proper order. However, it has its limitations, such as the inability to alter the <tr> and <td> structures.
It may not be necessary to change the default table property for desktops, but for mobile devices, the only option is to scroll, which is inconvenient for users.
How can we make it easy and more familiar?
Styling an HTML Table was never so easy before. HTML Tables allow the reader to see results or conclusions at a glance, rather than poring over text to find the numeric data or points.
The <table> is used for display data in tabular form (row * column). A table is a quick and easy way to find values that indicate some relatable differences between the type of data.
Table Data elements are the data containers of the table. They can contain all HTML elements like; text, images, lists, other tables, etc.
Core Components of HTML Table
An HTML table consists of one <table> element and one or more <tr>, <th>, and
HTML <thead>elements is used to define header of an HTML table.
The <thead>tag is used along with <tbody>and <tfoot>tags which defines table header, table body, and table footer in an HTML table.
HTML <tbody>tag is used to group the table rows (<tr>) together, which indicates that this is body part of a table (<table>).
The <tbody>element should always come after a <thead>element and may come before or after a <tfoot>element.
HTML <tfoot>element is used to define the footer of an HTML table.
The <tfoot>can be placed either before or after <tbody>and <tr>elements.
The <thead>, <tbody>, and <tfoot>elements do not affect the table layout, and if you want to apply the changes in table layout, then use CSS properties.
The individual table cells are always one of two elements: <td>or <th>. You can put whatever you want inside a table cell, but these components make them a table cell. <th>elements are tabular headers and <td>elements are tabular data.
Difficulty in making Tables Responsive Design
Responsive tables are essential while displaying table data on different screens and devices like desktop, laptop, mobile, etc. With the use of media queries, we can change the style of the table as per the device viewing it.
By default, showing horizontal scroll for table responsive on small devices is known the traditional way.
Traditional Way
A modern way to have a responsive table example is as follows.
Modern Way
Here, we can easily convert our table to form-view using a combination of HTML and CSS.
Let’s start with the necessary steps for making an HTML table in responsive form-view.
Step 1
To convert a table to a form-view, we need one attribute on the table data cell(<td>), which contains the label of that value.
e.g.
<td data-title="First Name">Joseph</td>
Here data title is an attribute that contains Label for Data (Joseph).
That concludes our changes to HTML. Let’s go right into CSS.
Step 2
Now let’s move to the Desktop view first with Fix header and footer.
.cm-table-w-scroll table {
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.cm-table-w-scroll thead th {
background: #007bff; /* set background color for the overcome transparent header cell */
color: #fff;
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
font-weight: 600;
}
.cm-table-w-scroll tfoot,
.cm-table-w-scroll tfoot th,
.cm-table-w-scroll tfoot td {
position: -webkit-sticky; /* for Safari */
position: sticky;
bottom: -1px;
background: #fff; /* set background color for the overcome transparent header cell */
color: #555;
font-size: 11px;
z-index: 4;
box-shadow: 0 0 5px 0 rgba(90, 90, 90, 0.15);
} Position: sticky property used to make the table header and footer fixed.
We need to apply a background color for the header and footer cells.
That settles the desktop view with a fixed header and footer table.
Let’s move to make responsive mobile views with some modern techniques.
Step 3
Now, let us make a responsive form-view table for devices smaller than tablets with some tweaks of the media query.
@media screen and (max-width:767px) {
.cm-table-w-scroll table thead, .cm-table-w-scroll table tfoot {
display: none; /* hide header and footer labels */
}
.cm-table-w-scroll table tbody tr {
display: block;
margin: 10px 15px 20px;
box-shadow: 0 0 5px 0 rgba(90, 90, 90, 0.5);
border-radius: 4px;
}
.cm-table-w-scroll table tbody tr td[data-title]:before {
content: attr(data-title); /* this will show the label of data */
font-size: 13px;
padding-right: 10px;
font-weight: 500;
}
.cm-table-w-scroll table tbody tr td {
display: flex; /* this will align label and value in same line */
justify-content: space-between;
white-space: normal;
text-align: end;
}
} Finally!, Using three steps, we can achieve table responsiveness with form view without extra plugins.
The concept is that you can use data attributes to put information in HTML and use those attributes in CSS to achieve great things.
Conclusion:
There is no single solution to make any <table>appropriately responsive without a scroll. However, the Modern Way Table gives better clearness of data in a meaningful way. Specifically in small devices such as mobiles. Also, it is more user-friendly and convenient.
Mr. Habib Saiyed