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.
Basic Table in Materialize CSS
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.
Additional Styles for Tables
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.
About the Author
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.
