Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to layout table cells, rows, and columns with JavaScript?
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 tableLayout property controls how a table calculates the width of its columns and cells. 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 tableLayout to "fixed"
In the example, we have created a table with a 3px solid black border. A table is created with Serial No. And Languages as headings. The width of the table contents is 100%. 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>
<button onclick="myFunction()">Set Table Layout to Fixed</button>
<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 tableLayout to "auto"
In this example, we made a table with a 3px 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>
<button onclick="myFunction()">Set Table Layout to Auto</button>
<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 - Comparing Both Layout Types
In the below example, we demonstrate using both "fixed" and "auto" values of the Style tableLayout property simultaneously to show the difference.
<html>
<head>
<style>
table, td {
border: 3px solid black;
margin: 20px 0;
}
#mytableID, #mytableID1 {
width: 100%;
}
</style>
</head>
<body>
<h2> Layout table cells, rows, and columns using table layout methods </h2>
<h3>Table layout: Auto</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>
Comparison
| Layout Type | Performance | Column Width Calculation | Best Use Case |
|---|---|---|---|
auto |
Slower | Based on content width | Dynamic content with varying text lengths |
fixed |
Faster | Based on table and first row widths | Consistent layout with known column sizes |
Conclusion
The tableLayout property provides control over table column width calculation. Use "auto" for content-based sizing and "fixed" for consistent, performance-optimized layouts. The choice depends on your specific layout requirements and performance needs.
2K+ Views
