Tables are present in most applications, regardless of platform, and are used to present sets of data to the user in an organized and understandable way. In this article, we will learn to work with tables in HTML pages using the Materialize framework, which has the features to visually stylize this type of component.
When referenced on the page, Materialize already applies styles to some components without having to add specific classes. Tables are an example of this, and already have their appearance customized by the framework by default.
In the code below, we have a basic example of table usage on a page that included the reference to the Materialize CSS file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Notebook i7 8GB White</td>
<td>IT</td>
</tr>
<tr>
<td>002</td>
<td>Blue pen</td>
<td>Paper Store</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In this code, we’ve basically included the Materialize CSS file from the Content Delivery Network (CDN) and used the container class in the div that is in the body of the document. This class, however, only limits the width of this div, so that the content is not “attached” to the page margins. From there, we just added a table without any customization.
The result, when we open the document in a browser, is what we see in Figure 1.
Figure 1. Basic Materialize table.
In addition to the standard formatting, the framework offers some classes to apply effects to tables. For example, the bordered, striped and centered classes cause table rows to have borders, alternating colors, and have their contents centered, respectively.
To use them, simply add them to the class attribute of the table, according to the code below:
<table class="bordered striped centered">
...
</table>
The result must be like what we have in Figure 2.
Figure 2. Bordered table, with colored lines and centralized text.
In addition to these, there are the highlight and responsive-table classes, which make the lines stand out by hovering over them and making the table responsive. The following code uses these options:
<table class="bordered striped centered highlight responsive-table">
...
</table>
When active, the responsiveness feature modifies the table layout for viewing on smaller screens. In these cases, the rows are presented in the form of columns and a horizontal scroll bar is added, as we can see in Figure 3.
Figure 3. Responsive table example.
With Materialize, using a few CSS classes we have been able to stylize the tables of our applications with elegant appearance and functionalities that provide better usability. In addition, the framework has several other features applicable to other common components, such as buttons, typography, among others.
Diogo Souza works as a Java Developer at PagSeguro and has worked for companies such as Indra Company, Atlantic Institute and Ebix LA. He is also an Android trainer, speaker at events on Java and mobile world.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
