René's URL Explorer Experiment

{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/#article","isPartOf":{"@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/"},"author":{"name":"Era Balliu","@id":"https://www.webcodegeeks.com/#/schema/person/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"Javascript Table Example","datePublished":"2016-04-18T13:15:24+00:00","dateModified":"2018-01-10T14:27:57+00:00","mainEntityOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/"},"wordCount":1396,"commentCount":0,"publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https://www.webcodegeeks.com/javascript/javascript-table-example/#respond"]}]},{"@type":"WebPage","@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/","url":"https://www.webcodegeeks.com/javascript/javascript-table-example/","name":"Javascript Table Example - Web Code Geeks - 2026","isPartOf":{"@id":"https://www.webcodegeeks.com/#website"},"primaryImageOfPage":{"@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/#primaryimage"},"image":{"@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/#primaryimage"},"thumbnailUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","datePublished":"2016-04-18T13:15:24+00:00","dateModified":"2018-01-10T14:27:57+00:00","description":"Tables are one of the things that we use extensively in our everyday life for a number of reasons. They are easy to understand and help us manipulate our","breadcrumb":{"@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.webcodegeeks.com/javascript/javascript-table-example/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/#primaryimage","url":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2014/10/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https://www.webcodegeeks.com/javascript/javascript-table-example/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.webcodegeeks.com/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https://www.webcodegeeks.com/category/javascript/"},{"@type":"ListItem","position":3,"name":"Javascript Table Example"}]},{"@type":"WebSite","@id":"https://www.webcodegeeks.com/#website","url":"https://www.webcodegeeks.com/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https://www.webcodegeeks.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.webcodegeeks.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://www.webcodegeeks.com/#organization","name":"Exelixis Media P.C.","url":"https://www.webcodegeeks.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/logo/image/","url":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","contentUrl":"https://www.webcodegeeks.com/wp-content/uploads/2022/06/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https://www.webcodegeeks.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/webcodegeeks","https://x.com/webcodegeeks"]},{"@type":"Person","@id":"https://www.webcodegeeks.com/#/schema/person/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.webcodegeeks.com/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http://www.webcodegeeks.com/","https://www.facebook.com/era.balliu.7","https://www.instagram.com/eraballiu/","https://www.linkedin.com/in/eraballiu","https://www.pinterest.com/001r2gw0jt0ln6d/","https://x.com/BalliuEra","https://www.youtube.com/c/eraballiu"],"url":"https://www.webcodegeeks.com/author/era-balliu/"}]}

{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","@id":"#Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https:\/\/www.webcodegeeks.com\/"}},{"@type":"ListItem","position":2,"item":{"name":"JavaScript","@id":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"}}]}

{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2016-04-18T16:15:24+03:00","datePublished":"2016-04-18T16:15:24+03:00","dateModified":"2018-01-10T16:27:57+02:00","headline":"Javascript Table Example","name":"Javascript Table Example","keywords":[],"url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-table-example\/","description":"Tables are one of the things that we use extensively in our everyday life for a number of reasons. They are easy to understand and help us manipulate our data by putting everything into rows and colum","copyrightYear":"2016","articleSection":"JavaScript","articleBody":"Tables are one of the things that we use extensively in our everyday life for a number of reasons. They are easy to understand and help us manipulate our data by putting everything into rows and columns. If you're keen on notebooks, you just draw the tables in them. If you want them on your website? You code them in, of course! How to do that in Javascript? Let's see!\r\n1. Getting familiar with tables\r\nWe are all familiar with tables as a concept, but how do we program them? Where exactly do we start? First of all let's explain the elements that we'd use in order to make it easier for us to code and manipulate them later on. A table is constructed by a caption, a table head (you'll find it as thead most of the time so we'll use that as to not get confused), a tbody and a tfoot. It can only have one of each of these, except for the tbody which can be whatever number you want them to. If you don't specify how many tbodies you need, the cells and rows will all be placed in the tbody the DOM provides regardless of you specifying it or not. If it seems a bit intrusive on DOM's part, you'll just have to go with it, otherwise we'd have no table at all, so it's for our best!\r\n \r\n\r\n \r\nEach of these have their own text nodes, which can be directly dependent on them (as it happens with captions), or organized in cells and rows in the case of thead, tbody and tfoot. These nodes will be where we place the text we want to display using the table. The picture below would give us a general impression of how the browser would render the table.\r\n\r\n\r\n\r\nAs you can see, here we've only used a single tbody, which in turn contains two rows. Each row contains two cells which will contain the text. However, you can alter the number of these components to your liking. Additionally, some of these components come with their own methods. For caption, thead and tfoot we have methods such as createCaption(), deleteCaption(), createTFoot(), deleteTFoot(), createTHead(), and deleteTHead() in our disposal, whose functions are pretty self-explanatory. We didn't mention tbody because you'll have to create you own methods for that. We'll show you how later on.\r\n\r\nCool, but how to create tables? Let's get on to it right away!\r\n2. Creating Tables\r\nIt's very easy to create tables, whether it's by using HTML only or by using also Javascript. We'll show you both ways, and you can choose whichever you like best for you own project.\r\n2.1 Creating Tables using only HTML\r\nOriginally, tables were created only by using HTML code, but that was replaced very fast by Javascript. That is because while this way of creating them is fairly easy, it can be annoying when the dimensions of the tables grew. And you might remember that at one point even the webpages were constructed based on tables to take advantage of their grid system effect. But let's see how we can do that by taking a look at the code snippet below:\r\n\r\nindex.html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Tables<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<table border=\"1\"\r\n       summary=\"\">\r\n    <caption><em>Test table<\/em><\/caption>\r\n\r\n    <tr><th rowspan=\"2\"><th colspan=\"2\">Average\r\n        <th rowspan=\"2\">Green<br>eyes\r\n\r\n    <tr>\r\n        <th>height<\/th>\r\n        <th>weight<\/th>\r\n    <\/tr>\r\n    <tr>\r\n        <th>males<\/th>\r\n        <td>183cm<\/td>\r\n        <td>65kg<\/td>\r\n        <td>40%<\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <th>females<\/th>\r\n        <td>170cm<\/td>\r\n        <td>54kg<\/td>\r\n        <td>35%<\/td>\r\n    <\/tr>\r\n<\/table>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n\r\nNow let's explain what we did there. You already know what all the content within the <head> tags mean, which would be just the title and standard stuff that make a valid HTML Document. What is of interest to us is the content of the <body> tag. As you see, we've simply built a table using all the tags that me mentioned. We used <table> to define our table, <caption> whose content would give us the caption of the table. The latter one can be placed right below the opening tag of the table or just before the ending one. That is to your preference completely.\r\n\r\nAfter doing that we've used <tr> to divide our table into rows, inside of which we have placed the <th> and <td> for the theads and text cells (or tdata) respectively.\r\n\r\nIt's fairly easy when the tables we want to built are this small, but what if they become a little bigger and more complex? To avoid making everything a mess, we use Javascript.\r\n2.2 Creating Tables using Javascript\r\nIf you know the general structure of the tables, like the one we explained in the first section, then you'll find this part very easy. There's a common rule that is used for this usually, which goes like this: you start to create each element starting from the bigger container, and append them starting with the smaller one.\r\n\r\nThat means that the first element we create is the <table>. After that we create the <tbody> and moreover we create <tr> elements using a loop to do that. You guessed right, those are contained in the <tbody> element and we can easily create a number of them just by changing the loop conditionals. Inside each <tr> we create a number of <td> elements, again, using a loop to do it.\r\n\r\nThen we start appending the elements we created to one another in the opposite direction. We start with attaching the <td> elements to their parent <tr>, and the latter to their containing <tbody>. Lastly, we append the <tbody> to the <table> and our table is finally appended to the <body> of our HTML document. Let's see it in action:\r\n\r\nindex.js\r\nvar body = document.getElementsByTagName(\"body\")[0];\r\n\r\n\r\n  var ourTable     = document.createElement(\"table\");\r\n  var ourTableBody = document.createElement(\"tbody\");\r\n\r\n\r\n  for (var i = 0; i < 4; i++) {\r\n\r\n    var row = document.createElement(\"tr\");\r\n\r\n    for (var j = 0; j <2; j++) {\r\n\r\n\r\n      var cell = document.createElement(\"td\");\r\n      var cellText = document.createTextNode(\"cell in row \"+i+\", column \"+j);\r\n      cell.appendChild(cellText);\r\n      row.appendChild(cell);\r\n    }\r\n\r\n\r\n    ourTableBody.appendChild(row);\r\n  }\r\n\r\n\r\n  ourTable.appendChild(ourTableBody);\r\n\r\n  body.appendChild(ourTable);\r\n\r\n  ourTable.setAttribute(\"border\", \"2\");\r\n\r\nIt's pretty evident if you keep in mind the rule we mentioned above, right? Usually all this code snippet is placed inside a function wrapper which is triggered so that our table is created. Also, you can add whatever attributes or other table parts necessary to your table, this was only a very basic one just to illustrate what we meant.\r\n3. Table Attributes\r\nThe table object used to come with a number of attributes, many of which became deprecated after HTML5, since they're no longer useful as they're replaced with other methods with the same function. The attributes that are still in usage are: caption, tFoot and tHead.\r\n\r\n\tcaption - returns the contents of the caption element of the table\r\n\ttHead - returns a reference to the thead element of the table\r\n\ttFoot - returns a reference to the tfoot element of the table\r\n\r\nSome of the attributes that are deprecated but replaced with other methods are:\r\n\r\n\talign - sets or returns the alignment of the table regarding the surrounding text. Replaced by style.cssFloat.\r\n\tbackground - sets or returns the background of the table. Replaced by style.background.\r\n\tborder - sets or returns the width or the table border. Replaced by style.border.\r\n\tframe - sets or returns the outer borders that should be displayed.\r\n\theight - sets or returns the height of the table. Replaced by style.height.\r\n\tsummary - sets or returns a long description of the table\r\n\r\nThere are a number of other useful attributes, which you can use according to the needs of your webpage.\r\n4. Changing the border width of the table\r\nIn this section we will teach you to set the border width of your table, since, as we mentioned above, the attribute related to it was discarded. You can follow the same example for every other attribute related to style such as the background color, or the alignment of the table, as the procedure is essentially the same. Take a look at the code below:\r\n\r\nindex.js\r\nfunction set_border() {\r\n  \r\n    myBody = document.getElementsByTagName(\"body\")[0];\r\n  \r\n    myBodyElements = myBody.getElementsByTagName(\"table\");\r\n  \r\n    myTable = myBodyElements[0];\r\n    myTable.style.border = \"10px\";\r\n  }\r\n\r\nWhat we've done here is create a function that when triggered will change the border size of the table. First we get the <body> element by it's tag name and then in the same way go to the table whose border size we want to adjust. In case you want to reach another element inside the table such as a single row or cell you can get them in the same way. After fixing in place the element we want we use the style.border method to just change it, by giving it a value. Simple, right?\r\n5. Download the source code\r\nThis was an example of Tables in Javascript.\r\nDownload\r\nYou can download the full source code of this example here: Tables","publisher":{"@id":"#Publisher","@type":"Organization","name":"Web Code Geeks","logo":{"@type":"ImageObject","url":"\/wp-content\/uploads\/2015\/12\/WebCodeGeeks-logo.png"},"sameAs":["http:\/\/feeds.feedburner.com\/WebCodeGeeks","https:\/\/www.facebook.com\/webcodegeeks","https:\/\/twitter.com\/webcodegeeks","https:\/\/www.youtube.com\/channel\/UCcJkBzpdp8TWzzu0bSjzikw","https:\/\/github.com\/webcodegeeks"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-table-example\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Era Balliu","url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"},"image":{"@type":"ImageObject","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":1200,"height":150}}