
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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 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.
- Related Articles
- Excel Tutorial – How to Combine Columns, Rows, and Cells?
- How to add table rows Dynamically in Android Layout?
- How to Copy and Paste Multiple Non-Adjacent Cells/Rows/Columns in Excel?
- How to create table rows & columns in HTML?
- How to multiply a matrix columns and rows with the same matrix rows and columns in R?
- How to form a two-dimensional array with given width (columns) and height (rows) in JavaScript ?
- How to create a GridLayout with rows and columns in Java?
- With JavaScript DOM delete rows in a table?
- Create Three Equal Columns with Bootstrap grid Layout
- Create three unequal Columns with Bootstrap grid layout
- Create two unequal columns with Bootstrap Grid Layout
- Conditional formatting rows or cells if two columns equal in Excel
- How to sort rows in a table using JavaScript?
- How to add rows to a table using JavaScript DOM?
- How to display MySQL Table Name with columns?
