How to layout table cells, rows, and columns with JavaScript?

Javascript Object Oriented Programming Front End Technology

In this tutorial, we will learn how to lay out table cells, rows, and columns with JavaScript.

We can construct and edit DOM (Document Object Model) elements using JavaScript. There are two ways to add HTML components, such as tables, to an HTML document. The first is to include the HTML table tag directly into our HTML webpage, and the second is to create the full table within our JavaScript code. The second method is the most commonly used for building and adding tables to the DOM.

The tr abbreviation refers to the table row. This reflects the complete table row. To put data into the table, inside the table's heading, body, or footer, we must first construct a row and then insert the data within that row using the td tag. The abbreviation for table data is td. It represents the table's single cell.

Following are the methods to lay out table cells, rows, and columns using JavaScript.

Using the Style tableLayout Property

The widths of table and column components and the width of the first row of cells determine table and column widths. Column widths are unaffected by cells in succeeding rows.

All rows may show as soon as they are received; the fixed layout is faster than the auto layout. The horizontal arrangement is determined only by the width of the table and columns, with no respect for the width of the contents of cells.

Syntax

document.getElementById("myID").style.tableLayout = "fixed";
document.getElementById("myID").style.tableLayout = "auto";

The table’s ID is fetched using the getElementById() method. The table cells, rows, and columns layout is set to "fixed" or "auto".

Example 1

Setting the Style tableLayout property to "fixed"

In the example, we have created a table of border 3 px with solid black color. A table is created with Serial No. And Languages as headings. The width of the table contents is 180px. The languages are HTML, CSS, JavaScript, Python, and Java. The table cells, rows, and columns are set by default to auto. We changed the layout of this table to fixed, which is determined by the width of the table and columns and ignores the width of the contents.


<html>
<head>
<style>
   table, td {
      border: 3px solid black;
   }
   #mytableID {
      width: 100%;
   }
</style>
</head>
<body>
   <h3>Setting the Style tableLayout property to "fixed"</h3>
   <p id = "myFunction()"></p>
   <table id = "mytableID">
      <tr>
         <td> <b>Serial. No.</b> </td>
         <td> <b>Languages</b> </td>
      </tr>
      <tr>
         <td> 1. </td>
         <td> HTML </td>
      </tr>
      <tr>
         <td> 2. </td>
         <td> CSS </td>
      </tr>
      <tr>
         <td> 3. </td>
         <td> JavaScript </td>
      </tr>
      <tr>
         <td> 4. </td>
         <td> Python </td>
      </tr>
      <tr>
         <td> 5. </td>
         <td> Java </td>
      </tr>
   </table>
</body>
<script>
   function myFunction() {
      document.getElementById("mytableID").style.tableLayout = "fixed";
   }
</script>
</html>

Example 2

Setting the Style tableLayout property to "auto".

In this example, we made a table with a 3 px border and a solid black border color. A table is made with the headers Serial No. And JavaScript Frameworks. The width of the table contents is set to 100%. The frameworks are NodeJS, VueJS, React, Angular, and EmberJS. The table cells, rows, and columns are default to auto. This value is defined by the column width of the widest unbreakable content.


<html>
<head>
<style>
   table, td {
      border: 3px solid black;
   }
   #mytableID {
      width: 100%;
   }
</style>
</head>
<body>
   <h3> Setting the Style tableLayout property to "auto". </h3>
   <p id = "myFunction()"></p>
   <table id = "mytableID">
      <tr>
         <td> <b>Serial. No.</b> </td>
         <td> <b>JavaScript Frameworks</b> </td>
      </tr>
      <tr>
         <td> 1. </td>
         <td> NodeJS </td>
      </tr>
      <tr>
         <td> 2. </td>
         <td> VueJS </td>
      </tr>
      <tr>
         <td> 3. </td>
         <td> React </td>
      </tr>
      <tr>
         <td> 4. </td>
         <td> Angular </td>
      </tr>
      <tr>
         <td> 5. </td>
         <td> EmberJS </td>
      </tr>
   </table>
</body>
<script>
   function myFunction() {
      document.getElementById("mytableID").style.tableLayout =
      "auto";
   }
</script>
</html>

Example 3

In the below example, we demonstrate using both "fixed" and "auto" value of the Style tableLayout property.


<html>
<head>
<style>
   table, td {
      border: 3px solid black;
   }
   #mytableID {
      width: 100%;
   }
   #mytableID1 {
      width: 100%;
   }
</style>
</head>
<body>
   <h2> Layout table cells, rows, and columns using <i>table layout
   auto</i> method </h2>
   <h3 >Table layout: Fixed</h3>
   <table id = "mytableID">
      <tr>
      <td> <b>Serial. No.</b> </td>
      <td> <b>JavaScript Frameworks</b> </td>
      </tr>
      <tr>
      <td> 1. </td>
      <td> NodeJS </td>
      </tr>
      <tr>
      <td> 2. </td>
      <td> VueJS </td>
      </tr>
      <tr>
      <td> 3. </td>
      <td> React </td>
      </tr>
      <tr>
      <td> 4. </td>
      <td> Angular </td>
      </tr>
      <tr>
      <td> 5. </td>
      <td> EmberJS </td>
      </tr>
   </table>
   <h3 >Table layout: Fixed</h3>
   <table id = "mytableID1">
      <tr>
         <td> <b>Serial. No.</b> </td>
         <td> <b>Languages</b> </td>
      </tr>
      <tr>
         <td> 1. </td>
         <td> HTML </td>
      </tr>
      <tr>
         <td> 2. </td>
         <td> CSS </td>
      </tr>
      <tr>
         <td> 3. </td>
         <td> JavaScript </td>
      </tr>
      <tr>
         <td> 4. </td>
         <td> Python </td>
      </tr>
      <tr>
         <td> 5. </td>
         <td> Java </td>
      </tr>
   </table>
</body>
<script>
   document.getElementById("mytableID").style.tableLayout = "auto";
   document.getElementById("mytableID1").style.tableLayout = "fixed";
</script>
</html>

In this tutorial, we have learned about the layout of the table cells, table rows, and table columns. The content of the cells is also taken in the picture. The table layout is set to "fixed" or "automatic," which creates a difference in the look of the table contents.