🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 124 (from laksa152)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa124.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://www.jquery-az.com/jquery-json-html-table-plug-2-demos/\')), getAhrefsUnparsedNoserviceFromURL(\'https://www.jquery-az.com/jquery-json-html-table-plug-2-demos/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/www.jquery-az.com\/jquery-json-html-table-plug-2-demos\/","crawl_time":1776351389,"first_indexed_time":1510077197,"http_code":200,"src_unparsed":"com,jquery-az!www,\/jquery-json-html-table-plug-2-demos\/ s443","src_root_hash":"3168237931127874724","history_drop_reason":null,"meta_title":"A jQuery JSON to HTML table plug-in with 2 Demos","meta_descriptions":["The json-to-table is a light-weight plug-in for converting data from JSON to HTML table. Learn using it @ jQuery-az.com"],"attrs_boilerpipe_text":"The\njson-to-table\nis a light-weight and simple plug-in for converting data from JSON to HTML table. The jQuery-based plug-in presents the data in an HTML table which is not a data table, basically.\nIt has a few options for styling the table like borders, font, background color etc. See the demos below to learn more about it.\nDeveloper page\nDownload plug-in\nHow to set up this plug-in on your web site?\nFirst, download the plug-in from above-given links. You will see the compressed and development version of the plug-in files. Include the compressed version (JSON-to-Table.min.1.0.0) on the web page you intend to use JSON data and present it in HTML table. For example:\n<script src=”js\/json-to-table\/JSON-to-Table.min.1.0.0.js”><\/script>\nMake sure to include this file after the jQuery library.\nIn the script section, call the createTable method as used in the demos below.\nA Demo of loading and presenting JSON data from external file\nIn this example, an external JSON file that contains some data is used. The location of the JSON file can be as per your project directory.\nSet the path of\n.json\nfile in\ngetJSON\nmethod and initiate the plug-in along with different options for styling as shown in the demo page.\nSee online demo and code\nThe script for this demo:\n<script type=\"text\/javascript\">\r\n\r\n    $(document).ready(function () {\r\n\r\n        $.getJSON(\"js\/json-to-table\/sample-data.json\", function (data) {\r\n\r\n            $('.json-table').createTable(data, {\r\n\r\n                \/\/ Specify the style of the table by plug-in options\r\n\r\n                borderWidth: '2px',\r\n\r\n                borderColor: '#356A6A',\r\n\r\n                borderStyle: 'dotted',\r\n\r\n                fontFamily: 'Arial, Verdana, sans-serif',\r\n\r\n\r\n\r\n                \/\/ The options for specifying the table header\r\n\r\n                thBg: '#C5E2E2',\r\n\r\n                thColor: '#1F3D3D',\r\n\r\n                thHeight: '29px',\r\n\r\n                thFontFamily: 'Verdana, sans-serif',\r\n\r\n                thFontSize: '13px',\r\n\r\n                thTextTransform: 'capitalize',\r\n\r\n\r\n\r\n                \/\/ Seting the style of table body and data\r\n\r\n                trBg: '#F7FBFB',\r\n\r\n                trColor: '#091111',\r\n\r\n                trHeight: '23px',\r\n\r\n                trFontFamily: '\"Open Sans\", sans-serif',\r\n\r\n                trFontSize: '12px',\r\n\r\n\r\n\r\n                \/\/ Table Body's Column Style\r\n\r\n                tdPaddingLeft: '8px',\r\n\r\n                tdPaddingRight: '8px'\r\n\r\n            });\r\n\r\n        });\r\n\r\n\r\n\r\n    });\r\n\r\n<\/script>\nYou can see that a lot of options are used for specifying the table presentation that includes border style, color, and font. Besides, the style of the header is also set by using a number of options like thBg, thColor, thFontFamily and so on.\nSee the code panel on the demo page for full options. Mostly, these are self-descriptive.\nThe simple markup used in the demo:\n<h2>A Demo of JSON to table with External JSON data file<\/h2>\r\n\r\n<div class=\"json-table\"><\/div>\nUsing data from JSON object variable demo\nIn this example of showing the JSON to table plug-in, the data is set in a variable. The JSON object variable is used where that data is assigned which is finally displayed in an HTML table.\nSee online demo and code\nThe sample data specified as using the variable for JSON:\n{\r\n\r\n            \"id\": 2,\r\n\r\n            \"first_name\": \"Raana\",\r\n\r\n            \"last_name\": \"Roomi\",\r\n\r\n            \"email\": \"rannarom@gmail.org\",\r\n\r\n            \"gender\": \"Male\",\r\n\r\n            \"ip_address\": \"192.168.1.1\"\r\n\r\n        }\nSee the complete demo data in the example page’s code panel. After setting all data, just refer this as initiating the plug-in:\n$('#json-table-2').createTable(data, {});\nWhere json-table-2 is the ID of div that displays the table for JSON data.\nFor more on this simple plug-in, visit the developer’s page.","attrs_markdown":"[Skip to content](https:\/\/www.jquery-az.com\/jquery-json-html-table-plug-2-demos\/#content \"Skip to content\")\n\n[![](https:\/\/www.jquery-az.com\/wp-content\/uploads\/2023\/12\/cropped-jaz1-1.png)](https:\/\/www.jquery-az.com\/)\n\nMenu\n\nMenu\n\n- [Programming]()\n  - [Python](https:\/\/www.jquery-az.com\/python-tutorials\/)\n  - [Java](https:\/\/www.jquery-az.com\/java-tutorials\/)\n  - [C\\#](https:\/\/www.jquery-az.com\/c-sharp-tutorials\/)\n  - [C++](https:\/\/www.jquery-az.com\/cpp\/)\n  - [VBA](https:\/\/www.jquery-az.com\/vba\/)\n  - [Kotlin](https:\/\/www.jquery-az.com\/kotlin-tutorials\/)\n- [Web]()\n  - [HTML](https:\/\/www.jquery-az.com\/html-tutorials\/)\n  - [CSS](https:\/\/www.jquery-az.com\/css-tutorials\/)\n  - [Bootstrap 3](https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/)\n  - [Bootstrap 4](https:\/\/www.jquery-az.com\/bootstrap-4\/)\n  - [Bootstrap 5](https:\/\/www.jquery-az.com\/bootstrap-5\/)\n  - [Materialize](https:\/\/www.jquery-az.com\/materialize-tutorials\/)\n  - [jQuery](https:\/\/www.jquery-az.com\/jquery-tips\/)\n  - [jQuery UI](https:\/\/www.jquery-az.com\/jquery-ui\/)\n  - [Tailwind CSS](https:\/\/www.jquery-az.com\/tailwind-css\/)\n  - [AngularJS](https:\/\/www.jquery-az.com\/angularjs-tutorials\/)\n  - [Bulma](https:\/\/www.jquery-az.com\/bulma-tutorials\/)\n- [Web Elements]()\n  - [Tables](https:\/\/www.jquery-az.com\/tag\/table\/)\n  - [Forms](https:\/\/www.jquery-az.com\/tag\/forms\/)\n  - [Buttons](https:\/\/www.jquery-az.com\/tag\/buttons\/)\n  - [Menus](https:\/\/www.jquery-az.com\/tag\/menus\/)\n  - [Animations](https:\/\/www.jquery-az.com\/tag\/animations\/)\n  - [Text](https:\/\/www.jquery-az.com\/tag\/text\/)\n  - [Effects](https:\/\/www.jquery-az.com\/tag\/effects\/)\n  - [Sliders](https:\/\/www.jquery-az.com\/tag\/sliders\/)\n  - [Dropdown](https:\/\/www.jquery-az.com\/tag\/dropdown\/)\n  - [Modals](https:\/\/www.jquery-az.com\/tag\/modals\/)\n  - [Date & Time](https:\/\/www.jquery-az.com\/tag\/date-time\/)\n- [Scripting]()\n  - [PHP](https:\/\/www.jquery-az.com\/php-tutorials\/)\n  - [JavaScript](https:\/\/www.jquery-az.com\/javascript-tutorials\/)\n  - [Bash](https:\/\/www.jquery-az.com\/bash-shell-tutorials\/)\n- [Database]()\n  - [SQL](https:\/\/www.jquery-az.com\/sql-tutorials\/)\n  - [MySQL](https:\/\/www.jquery-az.com\/mysql-tutorials\/)\n- [More](https:\/\/www.jquery-az.com\/jquery-json-html-table-plug-2-demos\/)\n  - [Github](https:\/\/www.jquery-az.com\/git-github-tutorials\/)\n  - [What Why How](https:\/\/www.jquery-az.com\/whats-whys-hows\/)\n\n![jQuery json table](https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/09\/171.0_1-jQuery-json-table.png)\n\n# The JSON to HTML table conversion plug-in\nJuly 15, 2025\n\nSeptember 9, 2017\n\nby [Atiq Zia](https:\/\/www.jquery-az.com\/author\/jqueryaz\/ \"View all posts by Atiq Zia\")\n\nThe *json-to-table* is a light-weight and simple plug-in for converting data from JSON to HTML table. The jQuery-based plug-in presents the data in an HTML table which is not a data table, basically.\n\nIt has a few options for styling the table like borders, font, background color etc. See the demos below to learn more about it.\n\n###### [**Developer page**](https:\/\/github.com\/shahnewazshamim\/json-to-table) [**Download plug-in**](https:\/\/github.com\/shahnewazshamim\/json-to-table\/archive\/master.zip)\n### **How to set up this plug-in on your web site?**\nFirst, download the plug-in from above-given links. You will see the compressed and development version of the plug-in files. Include the compressed version (JSON-to-Table.min.1.0.0) on the web page you intend to use JSON data and present it in HTML table. For example:\n\n> \\<script src=”js\/json-to-table\/JSON-to-Table.min.1.0.0.js”\\>\\<\/script\\>\n\nMake sure to include this file after the jQuery library.\n\nIn the script section, call the createTable method as used in the demos below.\n\n### **A Demo of loading and presenting JSON data from external file**\nIn this example, an external JSON file that contains some data is used. The location of the JSON file can be as per your project directory.\n\nSet the path of **.json** file in **getJSON** method and initiate the plug-in along with different options for styling as shown in the demo page.\n\n![jQuery json table](https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/09\/171.0_1-jQuery-json-table.png)\n\n**See online demo and code**\n\n**The script for this demo:**\n```\n<script type=\"text\/javascript\">\r\n\r\n    $(document).ready(function () {\r\n\r\n        $.getJSON(\"js\/json-to-table\/sample-data.json\", function (data) {\r\n\r\n            $('.json-table').createTable(data, {\r\n\r\n                \/\/ Specify the style of the table by plug-in options\r\n\r\n                borderWidth: '2px',\r\n\r\n                borderColor: '#356A6A',\r\n\r\n                borderStyle: 'dotted',\r\n\r\n                fontFamily: 'Arial, Verdana, sans-serif',\r\n\r\n\r\n\r\n                \/\/ The options for specifying the table header\r\n\r\n                thBg: '#C5E2E2',\r\n\r\n                thColor: '#1F3D3D',\r\n\r\n                thHeight: '29px',\r\n\r\n                thFontFamily: 'Verdana, sans-serif',\r\n\r\n                thFontSize: '13px',\r\n\r\n                thTextTransform: 'capitalize',\r\n\r\n\r\n\r\n                \/\/ Seting the style of table body and data\r\n\r\n                trBg: '#F7FBFB',\r\n\r\n                trColor: '#091111',\r\n\r\n                trHeight: '23px',\r\n\r\n                trFontFamily: '\"Open Sans\", sans-serif',\r\n\r\n                trFontSize: '12px',\r\n\r\n\r\n\r\n                \/\/ Table Body's Column Style\r\n\r\n                tdPaddingLeft: '8px',\r\n\r\n                tdPaddingRight: '8px'\r\n\r\n            });\r\n\r\n        });\r\n\r\n\r\n\r\n    });\r\n\r\n<\/script>\n```\nYou can see that a lot of options are used for specifying the table presentation that includes border style, color, and font. Besides, the style of the header is also set by using a number of options like thBg, thColor, thFontFamily and so on.\n\nSee the code panel on the demo page for full options. Mostly, these are self-descriptive.\n\n**The simple markup used in the demo:**\n```\n<h2>A Demo of JSON to table with External JSON data file<\/h2>\r\n\r\n<div class=\"json-table\"><\/div>\n```\n### **Using data from JSON object variable demo**\nIn this example of showing the JSON to table plug-in, the data is set in a variable. The JSON object variable is used where that data is assigned which is finally displayed in an HTML table.\n\n![jQuery json table object](https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/09\/171.0_2-jQuery-json-table-o.png)\n\n###### **See online demo and code**\nThe sample data specified as using the variable for JSON:\n```\n{\r\n\r\n            \"id\": 2,\r\n\r\n            \"first_name\": \"Raana\",\r\n\r\n            \"last_name\": \"Roomi\",\r\n\r\n            \"email\": \"rannarom@gmail.org\",\r\n\r\n            \"gender\": \"Male\",\r\n\r\n            \"ip_address\": \"192.168.1.1\"\r\n\r\n        }\n```\nSee the complete demo data in the example page’s code panel. After setting all data, just refer this as initiating the plug-in:\n```\n$('#json-table-2').createTable(data, {});\n```\nWhere json-table-2 is the ID of div that displays the table for JSON data.\n\nFor more on this simple plug-in, visit the developer’s page.\n\n1. [A jQuery Linked Select Dropdown Plugin](https:\/\/www.jquery-az.com\/a-jquery-linked-select-dropdown-plugin-with-2-examples\/ \"A jQuery Linked Select Dropdown Plugin\")\n2. [jQuery Alerts](https:\/\/www.jquery-az.com\/beautiful-jquery-alerts-with-12-demos-by-using-different-plug-ins\/ \"jQuery Alerts\")\n3. [jQuery fadeIn, fadeOut, and fadeToggle](https:\/\/www.jquery-az.com\/jquery-fadein-fadeout-fadetoggle-8-demos-of-table-menu-div-and-others\/ \"jQuery fadeIn, fadeOut, and fadeToggle\")\n4. [jQuery \\$.find and \\$.children Methods](https:\/\/www.jquery-az.com\/learn-jquery-find-and-children-methods-compared-with-examples\/ \"jQuery $.find and $.children Methods\")\n5. [jQuery Ajax Tutorial](https:\/\/www.jquery-az.com\/jquery-ajax-tutorial-syntax-and-using-in-div-form-tabs-accordion-and-table-demos\/ \"jQuery Ajax Tutorial\")\n\nCategories [jQuery](https:\/\/www.jquery-az.com\/jquery-tips\/)\n\nTags [List of HTML\/Bootstrap\/Materialize\/CSS Table Tutorials](https:\/\/www.jquery-az.com\/tag\/table\/)\n\n[jQuery plug-in for Glitch Effect](https:\/\/www.jquery-az.com\/jquery-plug-in-for-glitch-effect\/)\n\n[The jQuery based color picker widget](https:\/\/www.jquery-az.com\/jquery-color-picker-widget-mobile-rgb-options\/)\n\n## jQuery Tutorials\n- [jQuery animate()](https:\/\/www.jquery-az.com\/jquery-animate-ui-examples-free-code\/)\n- [jQuery click()](https:\/\/www.jquery-az.com\/use-jquery-click-8-examples-free-code\/)\n- [jQuery on](https:\/\/www.jquery-az.com\/jquery-on-click-change-events-7-examples\/)\n- [jQuery toggle](https:\/\/www.jquery-az.com\/jquery-toggle-method-showhide-elements-6-examples\/)\n- [jQuery each](https:\/\/www.jquery-az.com\/jquery-each-method-6-examples-different-collections\/)\n- [jQuery append](https:\/\/www.jquery-az.com\/use-jquery-append-add-html-content-examples\/)\n- [jQuery fadeIn, fadeOut, fadeToggle](https:\/\/www.jquery-az.com\/jquery-fadein-fadeout-fadetoggle-8-demos-of-table-menu-div-and-others\/)\n- [jQuery hide \/ show](https:\/\/www.jquery-az.com\/how-to-use-jquery-hide-show-methods-with-div-table-lists-demos\/)\n- [jQuery AJAX](https:\/\/www.jquery-az.com\/jquery-ajax-tutorial-syntax-and-using-in-div-form-tabs-accordion-and-table-demos\/)\n- [jQuery Post](https:\/\/www.jquery-az.com\/jquery-post-method-to-load-text-file-and-database-data-in-accordion\/)\n- [jQuery alert](https:\/\/www.jquery-az.com\/beautiful-jquery-alerts-with-12-demos-by-using-different-plug-ins\/)\n- [jQuery addClass](https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/)\n- [jQuery removeClass](https:\/\/www.jquery-az.com\/4-examples-to-use-jquery-removeclass-with-bootstrap-table-div-and-others\/)\n- [jQuery toggleClass](https:\/\/www.jquery-az.com\/jquery-toggleclass\/)\n- [jQuery \/ JavaScript setTimeout](https:\/\/www.jquery-az.com\/using-settimeout-in-javascriptjquery-code-with-6-demos\/)\n- [jQuery hover](https:\/\/www.jquery-az.com\/learn-jquery-hover-method-with-css-effects-3-demos\/)\n- [jQuery \\$.parent and \\$.parents](https:\/\/www.jquery-az.com\/jquery-parent-and-parents-methods-compared-with-4-examples\/)\n- [jQuery find and children](https:\/\/www.jquery-az.com\/learn-jquery-find-and-children-methods-compared-with-examples\/)\n- [jQuery Carousel \/ image rotator](https:\/\/www.jquery-az.com\/jquery-css-carousel-image-rotator-plug-in-with-3-demos\/)\n\n## Tailwind CSS Tools\n- [Tailwind Button Generator](https:\/\/www.jquery-az.com\/tools\/tailwind-button-gen.php)\n- [Tailwind Table Tool](https:\/\/www.jquery-az.com\/tools\/tailwind-table-tool.php)\n- [Modal Maker](https:\/\/www.jquery-az.com\/tools\/tailwind-modal-maker.php)\n- [Tailwind Card Maker](https:\/\/www.jquery-az.com\/tools\/tailwind-card-maker.php)\n- [Popover](https:\/\/www.jquery-az.com\/tools\/tailwind-popover-maker.php)\n- [Tailwind Badge Maker](https:\/\/www.jquery-az.com\/tools\/tailwind-badge-maker.php)\n- [Tailwind Alerts Tool](https:\/\/www.jquery-az.com\/tools\/tailwind-alert-tool.php)\n- [Tailwind Pagination Maker](https:\/\/www.jquery-az.com\/tools\/tailwind-paginated-maker.php)\n- [Tailwind Progress Maker](https:\/\/www.jquery-az.com\/tools\/tailwind-progress-gen.php)\n- [Tooltips](https:\/\/www.jquery-az.com\/tools\/tailwind-tooltips-maker.php)\n- [Tailwind Breadcrumbs Maker](https:\/\/www.jquery-az.com\/tools\/tailwind-breadcrumbs-maker.php)\n- [Tailwind Text Maker](https:\/\/www.jquery-az.com\/tools\/tailwind-text-maker.php)\n- [Tailwind Dropdown Maker](https:\/\/www.jquery-az.com\/tools\/tailwind-dropdown-maker.php)\n- [Tailwind Link Maker](https:\/\/www.jquery-az.com\/tools\/tailwind-link-maker.php)\n- [Accordion Creator](https:\/\/www.jquery-az.com\/tools\/tailwind-accordion-tool.php)\n\n## LATEST\n- [VBA DateDiff Function](https:\/\/www.jquery-az.com\/vba-datediff-function\/)\n- [INDEX Function in Excel](https:\/\/www.jquery-az.com\/excel-index-function\/)\n\n## Online Free Tools\n[Gradient Generator](https:\/\/www.jquery-az.com\/tools\/gradient-gen.html)\n\n## About\n- [Cookies & Privacy Policy](https:\/\/www.jquery-az.com\/privacy-policy\/)\n- [About & Terms](https:\/\/www.jquery-az.com\/about-us\/)\n- [Contact](https:\/\/www.jquery-az.com\/contact\/)\n\n## Official Sites\n- [Python](https:\/\/www.python.org\/)\n- [Bootstrap](https:\/\/getbootstrap.com\/)\n- [PHP](https:\/\/www.php.net\/)\n\n## Get Connected\n- [YouTube](https:\/\/www.youtube.com\/@jquery-az)\n- [Facebook](https:\/\/www.facebook.com\/jqueryaz23\/)\n- [LinkedIn](https:\/\/www.linkedin.com\/in\/jquery-az)\n\njQuery-AZ 2025. All Rights Reserved.","attrs_readable_markdown":"The *json-to-table* is a light-weight and simple plug-in for converting data from JSON to HTML table. The jQuery-based plug-in presents the data in an HTML table which is not a data table, basically.\n\nIt has a few options for styling the table like borders, font, background color etc. See the demos below to learn more about it.\n\n###### [**Developer page**](https:\/\/github.com\/shahnewazshamim\/json-to-table) [**Download plug-in**](https:\/\/github.com\/shahnewazshamim\/json-to-table\/archive\/master.zip)\n### **How to set up this plug-in on your web site?**\nFirst, download the plug-in from above-given links. You will see the compressed and development version of the plug-in files. Include the compressed version (JSON-to-Table.min.1.0.0) on the web page you intend to use JSON data and present it in HTML table. For example:\n\n> \\<script src=”js\/json-to-table\/JSON-to-Table.min.1.0.0.js”\\>\\<\/script\\>\n\nMake sure to include this file after the jQuery library.\n\nIn the script section, call the createTable method as used in the demos below.\n\n### **A Demo of loading and presenting JSON data from external file**\nIn this example, an external JSON file that contains some data is used. The location of the JSON file can be as per your project directory.\n\nSet the path of **.json** file in **getJSON** method and initiate the plug-in along with different options for styling as shown in the demo page.\n\n![jQuery json table](https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/09\/171.0_1-jQuery-json-table.png)\n\n**See online demo and code**\n\n**The script for this demo:**\n```\n<script type=\"text\/javascript\">\r\n\r\n    $(document).ready(function () {\r\n\r\n        $.getJSON(\"js\/json-to-table\/sample-data.json\", function (data) {\r\n\r\n            $('.json-table').createTable(data, {\r\n\r\n                \/\/ Specify the style of the table by plug-in options\r\n\r\n                borderWidth: '2px',\r\n\r\n                borderColor: '#356A6A',\r\n\r\n                borderStyle: 'dotted',\r\n\r\n                fontFamily: 'Arial, Verdana, sans-serif',\r\n\r\n\r\n\r\n                \/\/ The options for specifying the table header\r\n\r\n                thBg: '#C5E2E2',\r\n\r\n                thColor: '#1F3D3D',\r\n\r\n                thHeight: '29px',\r\n\r\n                thFontFamily: 'Verdana, sans-serif',\r\n\r\n                thFontSize: '13px',\r\n\r\n                thTextTransform: 'capitalize',\r\n\r\n\r\n\r\n                \/\/ Seting the style of table body and data\r\n\r\n                trBg: '#F7FBFB',\r\n\r\n                trColor: '#091111',\r\n\r\n                trHeight: '23px',\r\n\r\n                trFontFamily: '\"Open Sans\", sans-serif',\r\n\r\n                trFontSize: '12px',\r\n\r\n\r\n\r\n                \/\/ Table Body's Column Style\r\n\r\n                tdPaddingLeft: '8px',\r\n\r\n                tdPaddingRight: '8px'\r\n\r\n            });\r\n\r\n        });\r\n\r\n\r\n\r\n    });\r\n\r\n<\/script>\n```\nYou can see that a lot of options are used for specifying the table presentation that includes border style, color, and font. Besides, the style of the header is also set by using a number of options like thBg, thColor, thFontFamily and so on.\n\nSee the code panel on the demo page for full options. Mostly, these are self-descriptive.\n\n**The simple markup used in the demo:**\n```\n<h2>A Demo of JSON to table with External JSON data file<\/h2>\r\n\r\n<div class=\"json-table\"><\/div>\n```\n### **Using data from JSON object variable demo**\nIn this example of showing the JSON to table plug-in, the data is set in a variable. The JSON object variable is used where that data is assigned which is finally displayed in an HTML table.\n\n![jQuery json table object](https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/09\/171.0_2-jQuery-json-table-o.png)\n\n###### **See online demo and code**\nThe sample data specified as using the variable for JSON:\n```\n{\r\n\r\n            \"id\": 2,\r\n\r\n            \"first_name\": \"Raana\",\r\n\r\n            \"last_name\": \"Roomi\",\r\n\r\n            \"email\": \"rannarom@gmail.org\",\r\n\r\n            \"gender\": \"Male\",\r\n\r\n            \"ip_address\": \"192.168.1.1\"\r\n\r\n        }\n```\nSee the complete demo data in the example page’s code panel. After setting all data, just refer this as initiating the plug-in:\n```\n$('#json-table-2').createTable(data, {});\n```\nWhere json-table-2 is the ID of div that displays the table for JSON data.\n\nFor more on this simple plug-in, visit the developer’s page.","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

3 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.1 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://www.jquery-az.com/jquery-json-html-table-plug-2-demos/
Last Crawled	2026-04-16 14:56:29 (3 days ago)
First Indexed	2017-11-07 17:53:17 (8 years ago)
HTTP Status Code	200
Meta Title	A jQuery JSON to HTML table plug-in with 2 Demos
Meta Description	The json-to-table is a light-weight plug-in for converting data from JSON to HTML table. Learn using it @ jQuery-az.com
Meta Canonical	null
Boilerpipe Text	The json-to-table is a light-weight and simple plug-in for converting data from JSON to HTML table. The jQuery-based plug-in presents the data in an HTML table which is not a data table, basically. It has a few options for styling the table like borders, font, background color etc. See the demos below to learn more about it. Developer page Download plug-in How to set up this plug-in on your web site? First, download the plug-in from above-given links. You will see the compressed and development version of the plug-in files. Include the compressed version (JSON-to-Table.min.1.0.0) on the web page you intend to use JSON data and present it in HTML table. For example: <script src=”js/json-to-table/JSON-to-Table.min.1.0.0.js”></script> Make sure to include this file after the jQuery library. In the script section, call the createTable method as used in the demos below. A Demo of loading and presenting JSON data from external file In this example, an external JSON file that contains some data is used. The location of the JSON file can be as per your project directory. Set the path of .json file in getJSON method and initiate the plug-in along with different options for styling as shown in the demo page. See online demo and code The script for this demo: <script type="text/javascript"> $(document).ready(function () { $.getJSON("js/json-to-table/sample-data.json", function (data) { $('.json-table').createTable(data, { // Specify the style of the table by plug-in options borderWidth: '2px', borderColor: '#356A6A', borderStyle: 'dotted', fontFamily: 'Arial, Verdana, sans-serif', // The options for specifying the table header thBg: '#C5E2E2', thColor: '#1F3D3D', thHeight: '29px', thFontFamily: 'Verdana, sans-serif', thFontSize: '13px', thTextTransform: 'capitalize', // Seting the style of table body and data trBg: '#F7FBFB', trColor: '#091111', trHeight: '23px', trFontFamily: '"Open Sans", sans-serif', trFontSize: '12px', // Table Body's Column Style tdPaddingLeft: '8px', tdPaddingRight: '8px' }); }); }); </script> You can see that a lot of options are used for specifying the table presentation that includes border style, color, and font. Besides, the style of the header is also set by using a number of options like thBg, thColor, thFontFamily and so on. See the code panel on the demo page for full options. Mostly, these are self-descriptive. The simple markup used in the demo: <h2>A Demo of JSON to table with External JSON data file</h2> <div class="json-table"></div> Using data from JSON object variable demo In this example of showing the JSON to table plug-in, the data is set in a variable. The JSON object variable is used where that data is assigned which is finally displayed in an HTML table. See online demo and code The sample data specified as using the variable for JSON: { "id": 2, "first_name": "Raana", "last_name": "Roomi", "email": "rannarom@gmail.org", "gender": "Male", "ip_address": "192.168.1.1" } See the complete demo data in the example page’s code panel. After setting all data, just refer this as initiating the plug-in: $('#json-table-2').createTable(data, {}); Where json-table-2 is the ID of div that displays the table for JSON data. For more on this simple plug-in, visit the developer’s page.
Markdown	[Skip to content](https://www.jquery-az.com/jquery-json-html-table-plug-2-demos/#content "Skip to content") [![](https://www.jquery-az.com/wp-content/uploads/2023/12/cropped-jaz1-1.png)](https://www.jquery-az.com/) Menu Menu - [Programming]() - [Python](https://www.jquery-az.com/python-tutorials/) - [Java](https://www.jquery-az.com/java-tutorials/) - [C\#](https://www.jquery-az.com/c-sharp-tutorials/) - [C++](https://www.jquery-az.com/cpp/) - [VBA](https://www.jquery-az.com/vba/) - [Kotlin](https://www.jquery-az.com/kotlin-tutorials/) - [Web]() - [HTML](https://www.jquery-az.com/html-tutorials/) - [CSS](https://www.jquery-az.com/css-tutorials/) - [Bootstrap 3](https://www.jquery-az.com/bootstrap-tips-tutorials/) - [Bootstrap 4](https://www.jquery-az.com/bootstrap-4/) - [Bootstrap 5](https://www.jquery-az.com/bootstrap-5/) - [Materialize](https://www.jquery-az.com/materialize-tutorials/) - [jQuery](https://www.jquery-az.com/jquery-tips/) - [jQuery UI](https://www.jquery-az.com/jquery-ui/) - [Tailwind CSS](https://www.jquery-az.com/tailwind-css/) - [AngularJS](https://www.jquery-az.com/angularjs-tutorials/) - [Bulma](https://www.jquery-az.com/bulma-tutorials/) - [Web Elements]() - [Tables](https://www.jquery-az.com/tag/table/) - [Forms](https://www.jquery-az.com/tag/forms/) - [Buttons](https://www.jquery-az.com/tag/buttons/) - [Menus](https://www.jquery-az.com/tag/menus/) - [Animations](https://www.jquery-az.com/tag/animations/) - [Text](https://www.jquery-az.com/tag/text/) - [Effects](https://www.jquery-az.com/tag/effects/) - [Sliders](https://www.jquery-az.com/tag/sliders/) - [Dropdown](https://www.jquery-az.com/tag/dropdown/) - [Modals](https://www.jquery-az.com/tag/modals/) - [Date & Time](https://www.jquery-az.com/tag/date-time/) - [Scripting]() - [PHP](https://www.jquery-az.com/php-tutorials/) - [JavaScript](https://www.jquery-az.com/javascript-tutorials/) - [Bash](https://www.jquery-az.com/bash-shell-tutorials/) - [Database]() - [SQL](https://www.jquery-az.com/sql-tutorials/) - [MySQL](https://www.jquery-az.com/mysql-tutorials/) - [More](https://www.jquery-az.com/jquery-json-html-table-plug-2-demos/) - [Github](https://www.jquery-az.com/git-github-tutorials/) - [What Why How](https://www.jquery-az.com/whats-whys-hows/) ![jQuery json table](https://www.jquery-az.com/wp-content/uploads/2017/09/171.0_1-jQuery-json-table.png) # The JSON to HTML table conversion plug-in July 15, 2025 September 9, 2017 by [Atiq Zia](https://www.jquery-az.com/author/jqueryaz/ "View all posts by Atiq Zia") The json-to-table is a light-weight and simple plug-in for converting data from JSON to HTML table. The jQuery-based plug-in presents the data in an HTML table which is not a data table, basically. It has a few options for styling the table like borders, font, background color etc. See the demos below to learn more about it. ###### [Developer page](https://github.com/shahnewazshamim/json-to-table) [Download plug-in](https://github.com/shahnewazshamim/json-to-table/archive/master.zip) ### How to set up this plug-in on your web site? First, download the plug-in from above-given links. You will see the compressed and development version of the plug-in files. Include the compressed version (JSON-to-Table.min.1.0.0) on the web page you intend to use JSON data and present it in HTML table. For example: > \<script src=”js/json-to-table/JSON-to-Table.min.1.0.0.js”\>\</script\> Make sure to include this file after the jQuery library. In the script section, call the createTable method as used in the demos below. ### A Demo of loading and presenting JSON data from external file In this example, an external JSON file that contains some data is used. The location of the JSON file can be as per your project directory. Set the path of .json file in getJSON method and initiate the plug-in along with different options for styling as shown in the demo page. ![jQuery json table](https://www.jquery-az.com/wp-content/uploads/2017/09/171.0_1-jQuery-json-table.png) See online demo and code The script for this demo: ``` <script type="text/javascript"> $(document).ready(function () { $.getJSON("js/json-to-table/sample-data.json", function (data) { $('.json-table').createTable(data, { // Specify the style of the table by plug-in options borderWidth: '2px', borderColor: '#356A6A', borderStyle: 'dotted', fontFamily: 'Arial, Verdana, sans-serif', // The options for specifying the table header thBg: '#C5E2E2', thColor: '#1F3D3D', thHeight: '29px', thFontFamily: 'Verdana, sans-serif', thFontSize: '13px', thTextTransform: 'capitalize', // Seting the style of table body and data trBg: '#F7FBFB', trColor: '#091111', trHeight: '23px', trFontFamily: '"Open Sans", sans-serif', trFontSize: '12px', // Table Body's Column Style tdPaddingLeft: '8px', tdPaddingRight: '8px' }); }); }); </script> ``` You can see that a lot of options are used for specifying the table presentation that includes border style, color, and font. Besides, the style of the header is also set by using a number of options like thBg, thColor, thFontFamily and so on. See the code panel on the demo page for full options. Mostly, these are self-descriptive. The simple markup used in the demo: ``` <h2>A Demo of JSON to table with External JSON data file</h2> <div class="json-table"></div> ``` ### Using data from JSON object variable demo In this example of showing the JSON to table plug-in, the data is set in a variable. The JSON object variable is used where that data is assigned which is finally displayed in an HTML table. ![jQuery json table object](https://www.jquery-az.com/wp-content/uploads/2017/09/171.0_2-jQuery-json-table-o.png) ###### See online demo and code The sample data specified as using the variable for JSON: ``` { "id": 2, "first_name": "Raana", "last_name": "Roomi", "email": "rannarom@gmail.org", "gender": "Male", "ip_address": "192.168.1.1" } ``` See the complete demo data in the example page’s code panel. After setting all data, just refer this as initiating the plug-in: ``` $('#json-table-2').createTable(data, {}); ``` Where json-table-2 is the ID of div that displays the table for JSON data. For more on this simple plug-in, visit the developer’s page. 1. [A jQuery Linked Select Dropdown Plugin](https://www.jquery-az.com/a-jquery-linked-select-dropdown-plugin-with-2-examples/ "A jQuery Linked Select Dropdown Plugin") 2. [jQuery Alerts](https://www.jquery-az.com/beautiful-jquery-alerts-with-12-demos-by-using-different-plug-ins/ "jQuery Alerts") 3. [jQuery fadeIn, fadeOut, and fadeToggle](https://www.jquery-az.com/jquery-fadein-fadeout-fadetoggle-8-demos-of-table-menu-div-and-others/ "jQuery fadeIn, fadeOut, and fadeToggle") 4. [jQuery \$.find and \$.children Methods](https://www.jquery-az.com/learn-jquery-find-and-children-methods-compared-with-examples/ "jQuery $.find and $.children Methods") 5. [jQuery Ajax Tutorial](https://www.jquery-az.com/jquery-ajax-tutorial-syntax-and-using-in-div-form-tabs-accordion-and-table-demos/ "jQuery Ajax Tutorial") Categories [jQuery](https://www.jquery-az.com/jquery-tips/) Tags [List of HTML/Bootstrap/Materialize/CSS Table Tutorials](https://www.jquery-az.com/tag/table/) [jQuery plug-in for Glitch Effect](https://www.jquery-az.com/jquery-plug-in-for-glitch-effect/) [The jQuery based color picker widget](https://www.jquery-az.com/jquery-color-picker-widget-mobile-rgb-options/) ## jQuery Tutorials - [jQuery animate()](https://www.jquery-az.com/jquery-animate-ui-examples-free-code/) - [jQuery click()](https://www.jquery-az.com/use-jquery-click-8-examples-free-code/) - [jQuery on](https://www.jquery-az.com/jquery-on-click-change-events-7-examples/) - [jQuery toggle](https://www.jquery-az.com/jquery-toggle-method-showhide-elements-6-examples/) - [jQuery each](https://www.jquery-az.com/jquery-each-method-6-examples-different-collections/) - [jQuery append](https://www.jquery-az.com/use-jquery-append-add-html-content-examples/) - [jQuery fadeIn, fadeOut, fadeToggle](https://www.jquery-az.com/jquery-fadein-fadeout-fadetoggle-8-demos-of-table-menu-div-and-others/) - [jQuery hide / show](https://www.jquery-az.com/how-to-use-jquery-hide-show-methods-with-div-table-lists-demos/) - [jQuery AJAX](https://www.jquery-az.com/jquery-ajax-tutorial-syntax-and-using-in-div-form-tabs-accordion-and-table-demos/) - [jQuery Post](https://www.jquery-az.com/jquery-post-method-to-load-text-file-and-database-data-in-accordion/) - [jQuery alert](https://www.jquery-az.com/beautiful-jquery-alerts-with-12-demos-by-using-different-plug-ins/) - [jQuery addClass](https://www.jquery-az.com/jquery-addclass-with-html-table-button-links-and-list-demos/) - [jQuery removeClass](https://www.jquery-az.com/4-examples-to-use-jquery-removeclass-with-bootstrap-table-div-and-others/) - [jQuery toggleClass](https://www.jquery-az.com/jquery-toggleclass/) - [jQuery / JavaScript setTimeout](https://www.jquery-az.com/using-settimeout-in-javascriptjquery-code-with-6-demos/) - [jQuery hover](https://www.jquery-az.com/learn-jquery-hover-method-with-css-effects-3-demos/) - [jQuery \$.parent and \$.parents](https://www.jquery-az.com/jquery-parent-and-parents-methods-compared-with-4-examples/) - [jQuery find and children](https://www.jquery-az.com/learn-jquery-find-and-children-methods-compared-with-examples/) - [jQuery Carousel / image rotator](https://www.jquery-az.com/jquery-css-carousel-image-rotator-plug-in-with-3-demos/) ## Tailwind CSS Tools - [Tailwind Button Generator](https://www.jquery-az.com/tools/tailwind-button-gen.php) - [Tailwind Table Tool](https://www.jquery-az.com/tools/tailwind-table-tool.php) - [Modal Maker](https://www.jquery-az.com/tools/tailwind-modal-maker.php) - [Tailwind Card Maker](https://www.jquery-az.com/tools/tailwind-card-maker.php) - [Popover](https://www.jquery-az.com/tools/tailwind-popover-maker.php) - [Tailwind Badge Maker](https://www.jquery-az.com/tools/tailwind-badge-maker.php) - [Tailwind Alerts Tool](https://www.jquery-az.com/tools/tailwind-alert-tool.php) - [Tailwind Pagination Maker](https://www.jquery-az.com/tools/tailwind-paginated-maker.php) - [Tailwind Progress Maker](https://www.jquery-az.com/tools/tailwind-progress-gen.php) - [Tooltips](https://www.jquery-az.com/tools/tailwind-tooltips-maker.php) - [Tailwind Breadcrumbs Maker](https://www.jquery-az.com/tools/tailwind-breadcrumbs-maker.php) - [Tailwind Text Maker](https://www.jquery-az.com/tools/tailwind-text-maker.php) - [Tailwind Dropdown Maker](https://www.jquery-az.com/tools/tailwind-dropdown-maker.php) - [Tailwind Link Maker](https://www.jquery-az.com/tools/tailwind-link-maker.php) - [Accordion Creator](https://www.jquery-az.com/tools/tailwind-accordion-tool.php) ## LATEST - [VBA DateDiff Function](https://www.jquery-az.com/vba-datediff-function/) - [INDEX Function in Excel](https://www.jquery-az.com/excel-index-function/) ## Online Free Tools [Gradient Generator](https://www.jquery-az.com/tools/gradient-gen.html) ## About - [Cookies & Privacy Policy](https://www.jquery-az.com/privacy-policy/) - [About & Terms](https://www.jquery-az.com/about-us/) - [Contact](https://www.jquery-az.com/contact/) ## Official Sites - [Python](https://www.python.org/) - [Bootstrap](https://getbootstrap.com/) - [PHP](https://www.php.net/) ## Get Connected - [YouTube](https://www.youtube.com/@jquery-az) - [Facebook](https://www.facebook.com/jqueryaz23/) - [LinkedIn](https://www.linkedin.com/in/jquery-az) jQuery-AZ 2025. All Rights Reserved.
Readable Markdown	The json-to-table is a light-weight and simple plug-in for converting data from JSON to HTML table. The jQuery-based plug-in presents the data in an HTML table which is not a data table, basically. It has a few options for styling the table like borders, font, background color etc. See the demos below to learn more about it. ###### [Developer page](https://github.com/shahnewazshamim/json-to-table) [Download plug-in](https://github.com/shahnewazshamim/json-to-table/archive/master.zip) ### How to set up this plug-in on your web site? First, download the plug-in from above-given links. You will see the compressed and development version of the plug-in files. Include the compressed version (JSON-to-Table.min.1.0.0) on the web page you intend to use JSON data and present it in HTML table. For example: > \<script src=”js/json-to-table/JSON-to-Table.min.1.0.0.js”\>\</script\> Make sure to include this file after the jQuery library. In the script section, call the createTable method as used in the demos below. ### A Demo of loading and presenting JSON data from external file In this example, an external JSON file that contains some data is used. The location of the JSON file can be as per your project directory. Set the path of .json file in getJSON method and initiate the plug-in along with different options for styling as shown in the demo page. ![jQuery json table](https://www.jquery-az.com/wp-content/uploads/2017/09/171.0_1-jQuery-json-table.png) See online demo and code The script for this demo: ``` <script type="text/javascript"> $(document).ready(function () { $.getJSON("js/json-to-table/sample-data.json", function (data) { $('.json-table').createTable(data, { // Specify the style of the table by plug-in options borderWidth: '2px', borderColor: '#356A6A', borderStyle: 'dotted', fontFamily: 'Arial, Verdana, sans-serif', // The options for specifying the table header thBg: '#C5E2E2', thColor: '#1F3D3D', thHeight: '29px', thFontFamily: 'Verdana, sans-serif', thFontSize: '13px', thTextTransform: 'capitalize', // Seting the style of table body and data trBg: '#F7FBFB', trColor: '#091111', trHeight: '23px', trFontFamily: '"Open Sans", sans-serif', trFontSize: '12px', // Table Body's Column Style tdPaddingLeft: '8px', tdPaddingRight: '8px' }); }); }); </script> ``` You can see that a lot of options are used for specifying the table presentation that includes border style, color, and font. Besides, the style of the header is also set by using a number of options like thBg, thColor, thFontFamily and so on. See the code panel on the demo page for full options. Mostly, these are self-descriptive. The simple markup used in the demo: ``` <h2>A Demo of JSON to table with External JSON data file</h2> <div class="json-table"></div> ``` ### Using data from JSON object variable demo In this example of showing the JSON to table plug-in, the data is set in a variable. The JSON object variable is used where that data is assigned which is finally displayed in an HTML table. ![jQuery json table object](https://www.jquery-az.com/wp-content/uploads/2017/09/171.0_2-jQuery-json-table-o.png) ###### See online demo and code The sample data specified as using the variable for JSON: ``` { "id": 2, "first_name": "Raana", "last_name": "Roomi", "email": "rannarom@gmail.org", "gender": "Male", "ip_address": "192.168.1.1" } ``` See the complete demo data in the example page’s code panel. After setting all data, just refer this as initiating the plug-in: ``` $('#json-table-2').createTable(data, {}); ``` Where json-table-2 is the ID of div that displays the table for JSON data. For more on this simple plug-in, visit the developer’s page.
Shard	124 (laksa)
Root Hash	3168237931127874724
Unparsed URL	com,jquery-az!www,/jquery-json-html-table-plug-2-demos/ s443