{"id":5569,"date":"2018-02-22T17:42:43","date_gmt":"2018-02-22T17:42:43","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=5569"},"modified":"2023-09-30T10:43:19","modified_gmt":"2023-09-30T10:43:19","slug":"7-examples-materialize-tables-along-custom-styles","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/","title":{"rendered":"The Tables in Materialize CSS"},"content":{"rendered":"

The materialize framework has built-in CSS classes for creating and styling the HTML tables in your web pages. The tables are responsive by default; so they adapt the shape of device size. In smaller screens, the tables are aligned centrally automatically.<\/p>\n

Besides, by using the responsive-table<\/strong> class, the table header is adjusted according to the user\u2019s screen with horizontal scroll bar; an example is coming up.<\/p>\n

A demo of basic table by materialize CSS<\/strong><\/h3>\n

The simple table does not require you adding any specific classes as using the materialize CSS. You simply require creating the table markup. The table is without outer border and headers are bold while rows are separated by horizontal lines. Only the reference to the materialize.css<\/strong> is required in the <head> section and the table is created as follows:<\/p>\n

\"materialize<\/p>\n

Complete Code:<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n <head>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/materialize\/1.0.0-alpha.4\/css\/materialize.min.css\">\r\n\r\n <\/head>\r\n\r\n<body class = \"container\"> \r\n<table>\r\n<thead>\r\n  <tr>\r\n      <th>Product ID<\/th>\r\n      <th>Product Name<\/th>\r\n      <th>Product Quanity<\/th>\r\n  <\/tr>\r\n<\/thead>\r\n\r\n<tbody>\r\n  <tr>\r\n    <td>P-001<\/td>\r\n    <td>Mango<\/td>\r\n    <td>105 Dozen<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-002<\/td>\r\n    <td>Apple<\/td>\r\n    <td>35 Kgs<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-001<\/td>\r\n    <td>Oranges<\/td>\r\n    <td>55 Kgs<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-004<\/td>\r\n    <td>Strawberries<\/td>\r\n    <td>15 Kgs<\/td>\r\n  <\/tr>          \r\n<\/tbody>\r\n<\/table>\r\n<\/body>   \r\n<\/html>\r\n<\/pre>\n
You can see, no hovering effect in rows and no outer border for the default style of materialize framework.<\/p>\n
The demo of stripped table<\/strong><\/h3>\n
Adding the stripped<\/strong> class in the <table> tag adds \u201czebra crossing\u201d in the table rows. In that case, every other row is given the light grey background so table data is distinguishable easily. See the table outlook with stripped class:<\/p>\n
\"materialize<\/p>\n
The markup for the <table> tag:<\/strong><\/p>\n
<table class=\"striped\">\r\n\r\n<thead>\r\n\r\n\u00a0 <tr>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Product ID<\/th>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Product Name<\/th>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Product Quanity<\/th>\r\n\r\n\u00a0 <\/tr>\r\n\r\n<\/thead><\/pre>\n
The same data is used as in above example and you can see the striped rows are added.<\/p>\n
The example of highlighted table rows<\/strong><\/h3>\n
Just add the highlight<\/strong> class in the table tag for creating a table with a hovering effect in rows. As the user brings the mouse over any row, it is highlighted.<\/p>\n
You may add the highlight class along with the stripped class or in a simple table for a hovering effect. Have a look at the table created with both stripped and highlight classes:<\/p>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/materialize\/1.0.0-alpha.4\/css\/materialize.min.css\">\r\n\r\n <\/head>\r\n\r\n<body class = \"container\"> \r\n<table class=\"striped highlight\">\r\n<thead>\r\n  <tr>\r\n      <th>Product ID<\/th>\r\n      <th>Product Name<\/th>\r\n      <th>Product Quanity<\/th>\r\n  <\/tr>\r\n<\/thead>\r\n\r\n<tbody>\r\n  <tr>\r\n    <td>P-001<\/td>\r\n    <td>Mango<\/td>\r\n    <td>105 Dozen<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-002<\/td>\r\n    <td>Apple<\/td>\r\n    <td>35 Kgs<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-001<\/td>\r\n    <td>Oranges<\/td>\r\n    <td>55 Kgs<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-004<\/td>\r\n    <td>Strawberries<\/td>\r\n    <td>15 Kgs<\/td>\r\n  <\/tr>          \r\n<\/tbody>\r\n<\/table>\r\n<\/body>   \r\n<\/html>\r\n\r\n<\/pre>\n
Centrally aligned table<\/strong><\/h3>\n
You may use the centered<\/strong> class in the <table> tag for centrally aligning the headings and table data. You may use centered<\/strong> class in the basic table or in combination with stripped<\/strong> and\/or highlight<\/strong> class. Have a look at centered align table.<\/p>\n
The table markup with centered class:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/materialize\/1.0.0-alpha.4\/css\/materialize.min.css\">\r\n\r\n <\/head>\r\n\r\n<body class = \"container\"> \r\n<table class=\"striped centered\">\r\n<thead>\r\n  <tr>\r\n      <th>Product ID<\/th>\r\n      <th>Product Name<\/th>\r\n      <th>Product Quanity<\/th>\r\n  <\/tr>\r\n<\/thead>\r\n\r\n<tbody>\r\n  <tr>\r\n    <td>P-001<\/td>\r\n    <td>Mango<\/td>\r\n    <td>105 Dozen<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-002<\/td>\r\n    <td>Apple<\/td>\r\n    <td>35 Kgs<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-001<\/td>\r\n    <td>Oranges<\/td>\r\n    <td>55 Kgs<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-004<\/td>\r\n    <td>Strawberries<\/td>\r\n    <td>15 Kgs<\/td>\r\n  <\/tr>          \r\n<\/tbody>\r\n<\/table>\r\n<\/body>   \r\n<\/html>\r\n<\/pre>\n
A demo of horizontally scrollable table<\/strong><\/h3>\n
If you have many table headings and table data accordingly then presenting data with the horizontal scroll bar in small devices makes it easier for the users to go through the table information.<\/p>\n
For creating responsive tables with the horizontal scrollbar, use the responsive-table<\/strong> class in the <table> tag. In that case, the table headings appear towards the left side while table rows with a scroll bar, as shown below:<\/p>\n
\"materialize<\/p>\n
The markup:<\/strong><\/p>\n
<table class=\"responsive-table\">\r\n<thead>\r\n  <tr>\r\n      <th>Product ID<\/th>\r\n      <th>Product Name<\/th>\r\n      <th>Product Quanity<\/th>\r\n  <\/tr>\r\n<\/thead><\/pre>\n
Notice this line:<\/p>\n
<table class=”responsive-table”><\/p><\/blockquote>\n
Rest remains the same.<\/p>\n
For viewing this table with the scroll bar in example page, either resize the screen on the desktop or view it on the smartphone.<\/p>\n
Customizing the stripped color example<\/strong><\/h3>\n
In your web project is based on materialized framework, you may need customizing different components as per the need of your project or liking. For example, rather than using the default grayish color for the stripped rows, you may like using some other color for every other row.<\/p>\n
One of the ways of doing this is overriding the default CSS class(es) in the materialized.css. For example, for customizing the striped rows color, you may use the table.striped<\/strong> <\/em>class and provide new color value after the reference of materialize.min.css<\/em> file.<\/p>\n
See this example where I have overridden this class in the <style> section:<\/p>\n
\"materialize<\/p>\n
The CSS:<\/strong><\/p>\n
<style>\r\n\r\ntable.striped > tbody > tr:nth-child(odd) {\r\n\r\n\u00a0 background-color: rgba(170, 213, 213, 0.5);\r\n\r\n}\r\n\r\n\r\n\r\n<\/style><\/pre>\n
The markup:<\/strong><\/p>\n
<table class=\"striped\">\r\n\r\n<thead>\r\n\r\n\u00a0 <tr>\r\n\r\n\u2026..<\/pre>\n
You can see, the same markup is used as for the default striped table.<\/p>\n
Changing the highlight color example<\/strong><\/h3>\n
Similarly, after adding the highlight class in the table tag, you may change the default grayish color while still using the highlight<\/strong> class name.<\/p>\n
See the example below where I changed the highlight class background color just like the above example:<\/p>\n
The CSS for this example:<\/strong><\/p>\n
<style>\r\n\r\ntable.highlight > tbody > tr:hover {\r\n\r\n\u00a0 background-color: rgba(255, 181, 145, 0.5);\r\n\r\n}\r\n\r\n<\/style><\/pre>\n
The table tag:<\/strong><\/p>\n
<table class=”striped highlight”><\/p><\/blockquote>\n
Complete code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/materialize\/1.0.0-alpha.4\/css\/materialize.min.css\">\r\n<style>\r\ntable.highlight > tbody > tr:hover {\r\n  background-color: rgba(255, 181, 145, 0.5);\r\n}\r\n<\/style>\r\n <\/head>\r\n\r\n<body class = \"container\"> \r\n<table class=\"striped highlight\">\r\n<thead>\r\n  <tr>\r\n      <th>Product ID<\/th>\r\n      <th>Product Name<\/th>\r\n      <th>Product Quanity<\/th>\r\n  <\/tr>\r\n<\/thead>\r\n\r\n<tbody>\r\n  <tr>\r\n    <td>P-001<\/td>\r\n    <td>Mango<\/td>\r\n    <td>105 Dozen<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-002<\/td>\r\n    <td>Apple<\/td>\r\n    <td>35 Kgs<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-001<\/td>\r\n    <td>Oranges<\/td>\r\n    <td>55 Kgs<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>P-004<\/td>\r\n    <td>Strawberries<\/td>\r\n    <td>15 Kgs<\/td>\r\n  <\/tr>          \r\n<\/tbody>\r\n<\/table>\r\n<\/body>   \r\n<\/html>\r\n\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The materialize framework has built-in CSS classes for creating and styling the HTML tables in your web pages. The tables are responsive by default; so they adapt the shape of device size. In smaller screens, the tables are aligned centrally automatically.<\/p>\n","protected":false},"author":1,"featured_media":5572,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[82],"tags":[29],"yoast_head":"\n7 Examples of Materialize Tables along with custom styles<\/title>\n<meta name=\"description\" content=\"The materialize framework has built-in CSS classes for creating and styling the HTML tables in your web pages. The tables are responsive by default; so they adapt the shape of device size. In smaller screens, the tables are aligned centrally automatically.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Examples of Materialize Tables along with custom styles\" \/>\n<meta property=\"og:description\" content=\"The materialize framework has built-in CSS classes for creating and styling the HTML tables in your web pages. The tables are responsive by default; so they adapt the shape of device size. In smaller screens, the tables are aligned centrally automatically.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-22T17:42:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-30T10:43:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/02\/1-3-materialize-table-responsive.png\" \/>\n\t<meta property=\"og:image:width\" content=\"416\" \/>\n\t<meta property=\"og:image:height\" content=\"180\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/\",\"url\":\"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/\",\"name\":\"7 Examples of Materialize Tables along with custom styles\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2018-02-22T17:42:43+00:00\",\"dateModified\":\"2023-09-30T10:43:19+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"The materialize framework has built-in CSS classes for creating and styling the HTML tables in your web pages. The tables are responsive by default; so they adapt the shape of device size. In smaller screens, the tables are aligned centrally automatically.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Tables in Materialize CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"7 Examples of Materialize Tables along with custom styles","description":"The materialize framework has built-in CSS classes for creating and styling the HTML tables in your web pages. The tables are responsive by default; so they adapt the shape of device size. In smaller screens, the tables are aligned centrally automatically.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/","og_locale":"en_US","og_type":"article","og_title":"7 Examples of Materialize Tables along with custom styles","og_description":"The materialize framework has built-in CSS classes for creating and styling the HTML tables in your web pages. The tables are responsive by default; so they adapt the shape of device size. In smaller screens, the tables are aligned centrally automatically.","og_url":"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/","article_published_time":"2018-02-22T17:42:43+00:00","article_modified_time":"2023-09-30T10:43:19+00:00","og_image":[{"width":416,"height":180,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/02\/1-3-materialize-table-responsive.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/","url":"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/","name":"7 Examples of Materialize Tables along with custom styles","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2018-02-22T17:42:43+00:00","dateModified":"2023-09-30T10:43:19+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"The materialize framework has built-in CSS classes for creating and styling the HTML tables in your web pages. The tables are responsive by default; so they adapt the shape of device size. In smaller screens, the tables are aligned centrally automatically.","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/7-examples-materialize-tables-along-custom-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"The Tables in Materialize CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/5569"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=5569"}],"version-history":[{"count":9,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/5569\/revisions"}],"predecessor-version":[{"id":10008,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/5569\/revisions\/10008"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/5572"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=5569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=5569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=5569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}