First you will need to download the TableCloth files from CSS Globe. <\/a><\/p>\nExtract the files and save them, we will use them later. For the next part of the tutorial we need to have a table made already. If you don\u2019t have a table made you can use this code<\/p>\n
\r\n<html>\r\n\r\n<head>\r\n\r\n<title>Styling Tables with TableCloth<\/title>\r\n\r\n<\/head>\r\n\r\n<table>\r\n\r\n <tr>\r\n\r\n <th>First Name<\/th>\r\n <th>Last name<\/th>\r\n <th>Age<\/th>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>John<\/td>\r\n <td>Ward<\/td>\r\n <td>21<\/td>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>Mike<\/td>\r\n <td>Maguire<\/td>\r\n <td>21<\/td>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>Sara<\/td>\r\n <td>Lee<\/td>\r\n <td>61<\/td>\r\n\r\n <\/tr>\r\n\r\n <tr>\r\n\r\n <td>Walter<\/td>\r\n <td>Reed<\/td>\r\n <td>1<\/td>\r\n\r\n <\/tr>\r\n\r\n<\/table>\r\n<\/html>\r\n<\/pre>\nSave the file as table.htm and open it with your browser. The table should look like this
\n![\"Styling](\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/01.jpg\" "\\"Styling")
<\/a><\/p>\nThe table is very plain looking, but that can be changed with a few lines of code. We will add two lines of code in the head of our page.<\/p>\n
<\/p>\n
<\/p>\nStyling Tables with TableCloth<\/title><\/p>\n<link href=\"tablecloth\/tablecloth.css\" rel=\"stylesheet\" type=\"text\/css\" media=\"screen\" \/>\n<script type=\"text\/javascript\" src=\"tablecloth\/tablecloth.js\"><\/script><\/p>\n<p><\/head><\/p>\n<p>Now we need to copy the tablecloth folder into the directory with our table.htm<br \/>\n<a href='http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/02.jpg'><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/02.jpg\" alt=\"Styling HTML Tables with TableCloth\" title=\"Styling HTML Tables with TableCloth\" width=\"373\" height=\"258\" class=\"alignnone size-medium wp-image-1564\" \/><\/a><\/p>\n<p>Note that there are two folders named \u201ctablecloth\u201d when you extract the files, we want to copy the folder that contains these files:<br \/>\n<a href='http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/03.jpg'><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/03.jpg\" alt=\"Styling HTML Tables with TableCloth\" title=\"Styling HTML Tables with TableCloth\" width=\"583\" height=\"182\" class=\"alignnone size-medium wp-image-1565\" \/><\/a><\/p>\n<p>After you copy the files over and add the changes to the header of table.htm, refresh the page. Your table should now be styles by tablecloth.<br \/>\n<a href='http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/04.jpg'><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/04.jpg\" alt=\"Styling HTML Tables with TableCloth\" title=\"Styling HTML Tables with TableCloth\" width=\"635\" height=\"213\" class=\"alignnone size-medium wp-image-1566\" \/><\/a><\/p>\n<p>By default the table columns are highlighted when you hover over them with the mouse.<br \/>\n<a href='http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/05.jpg'><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/05.jpg\" alt=\"Styling HTML Tables with TableCloth\" title=\"Styling HTML Tables with TableCloth\" width=\"635\" height=\"213\" class=\"alignnone size-medium wp-image-1567\" \/><\/a><\/p>\n<p>Also when you click on an item the entire columns turns a green color.<br \/>\nImage06<\/p>\n<p>These values can be changed in the tablecloth.js file which is located in the tablecloth folder. This info is near the top of the file in the config section. <\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\n\t\/\/ if set to true then mouseover a table cell will highlight entire column (except sibling headings)\r\n\tvar highlightCols = true;\r\n\t\r\n\t\/\/ if set to true then mouseover a table cell will highlight entire row\t(except sibling headings)\r\n\tvar highlightRows = false;\t\r\n\t\r\n\t\/\/ if set to true then click on a table sell will select row or column based on config\r\n\tvar selectable = true;\r\n\r\n<\/pre>\n<p>So if you wanted only the rows to be highlighted you would change the config to look like this.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\n\t\/\/ if set to true then mouseover a table cell will highlight entire column (except sibling headings)\r\n\tvar highlightCols = false;\r\n\t\r\n\t\/\/ if set to true then mouseover a table cell will highlight entire row\t(except sibling headings)\r\n\tvar highlightRows = true;\t\r\n\t\r\n\t\/\/ if set to true then click on a table sell will select row or column based on config\r\n\tvar selectable = true;\r\n\r\n<\/pre>\n<p>Then the table would look like this on mouse over.<br \/>\n<a href='http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/07.jpg'><img loading=\"lazy\" src=\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/07.jpg\" alt=\"Styling HTML Tables with TableCloth\" title=\"Styling HTML Tables with TableCloth\" width=\"635\" height=\"213\" class=\"alignnone size-medium wp-image-1568\" \/><\/a><\/p>\n<p>You can even highlight both column and row if you would like or turn of the green highlighting on click. As you can see the file is easy to manipulation and the lines are commented so it should be easy to figure out. There is also a CSS file included that you can modify. I am not going to go into modifying the default style in this tutorial. All it takes to modify the style is some basic CSS knowledge. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial I will show you how to apply some simple style to your tables by applying the TableCloth style sheet and JavaScript file. TableCloth is a free, light way, way to add style to existing HTML tables. It only required two lines of code added to your table. With table clothe you can also modify how the HTML tables react to your input by changing the JavaScript file. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[44,30,17],"tags":[164,49,69,70,57],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Styling HTML Tables with TableCloth<\/title>\n<meta name=\"description\" content=\"In this tutorial I will show you how to apply some simple style to your tables by applying the TableCloth style sheet and JavaScript file. TableCloth is a free, light way, way to add style to existing HTML tables. It only required two lines of code added to your table. With table clothe you can also modify how the HTML tables react to your input by changing the JavaScript file.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnathan Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/01.jpg\",\"contentUrl\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/01.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#webpage\",\"url\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth\",\"name\":\"Styling HTML Tables with TableCloth\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#primaryimage\"},\"datePublished\":\"2008-06-16T05:01:58+00:00\",\"dateModified\":\"2008-10-26T18:47:25+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\"},\"description\":\"In this tutorial I will show you how to apply some simple style to your tables by applying the TableCloth style sheet and JavaScript file. TableCloth is a free, light way, way to add style to existing HTML tables. It only required two lines of code added to your table. With table clothe you can also modify how the HTML tables react to your input by changing the JavaScript file.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teamtutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Styling HTML Tables with TableCloth\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\",\"name\":\"Johnathan Ward\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"caption\":\"Johnathan Ward\"},\"description\":\"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.\",\"sameAs\":[\"http:\/\/johnathanward.com\",\"https:\/\/twitter.com\/spyderman4g63\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styling HTML Tables with TableCloth","description":"In this tutorial I will show you how to apply some simple style to your tables by applying the TableCloth style sheet and JavaScript file. TableCloth is a free, light way, way to add style to existing HTML tables. It only required two lines of code added to your table. With table clothe you can also modify how the HTML tables react to your input by changing the JavaScript file.","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:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth","twitter_misc":{"Written by":"Johnathan Ward","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#primaryimage","inLanguage":"en-US","url":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/01.jpg","contentUrl":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/06\/01.jpg"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#webpage","url":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth","name":"Styling HTML Tables with TableCloth","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#primaryimage"},"datePublished":"2008-06-16T05:01:58+00:00","dateModified":"2008-10-26T18:47:25+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9"},"description":"In this tutorial I will show you how to apply some simple style to your tables by applying the TableCloth style sheet and JavaScript file. TableCloth is a free, light way, way to add style to existing HTML tables. It only required two lines of code added to your table. With table clothe you can also modify how the HTML tables react to your input by changing the JavaScript file.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-html-tables-with-tablecloth#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teamtutorials.com\/"},{"@type":"ListItem","position":2,"name":"Styling HTML Tables with TableCloth"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9","name":"Johnathan Ward","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","caption":"Johnathan Ward"},"description":"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.","sameAs":["http:\/\/johnathanward.com","https:\/\/twitter.com\/spyderman4g63"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1562"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=1562"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1562\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=1562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=1562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=1562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}