資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何使用JavaScript佈局表格單元格、行和列？
在本教程中，我們將學習如何使用JavaScript佈局表格單元格、行和列。
我們可以使用JavaScript構建和編輯DOM（文件物件模型）元素。向HTML文件新增HTML元件（如表格）有兩種方法。第一種是將HTML表格標籤直接包含到我們的HTML網頁中，第二種是在JavaScript程式碼中建立完整的表格。第二種方法最常用於構建和向DOM新增表格。
tr縮寫指的是表格行。它代表完整的表格行。要在表格的標題、主體或腳註中放入資料，我們必須先建立一個行，然後使用td標籤在該行內插入資料。表格資料的縮寫是td。它代表表格的單個單元格。
以下是使用JavaScript佈局表格單元格、行和列的方法。
使用Style tableLayout屬性
表格和列元件的寬度以及第一行單元格的寬度決定了表格和列的寬度。後續行的單元格不會影響列寬。
所有行都可以在接收到後立即顯示；固定佈局比自動佈局更快。水平排列僅由表格和列的寬度決定，而不考慮單元格內容的寬度。
語法
document.getElementById("myID").style.tableLayout = "fixed";
document.getElementById("myID").style.tableLayout = "auto";
使用getElementById()方法獲取表格的ID。表格單元格、行和列的佈局設定為“fixed”（固定）或“auto”（自動）。
示例1
將Style tableLayout屬性設定為“fixed”（固定）
在這個示例中，我們建立了一個邊框為3px實線黑色的表格。表格建立了序號和語言作為標題。表格內容的寬度為180px。語言包括HTML、CSS、JavaScript、Python和Java。表格單元格、行和列預設設定為auto。我們將此表格的佈局更改為**fixed**，它由表格和列的寬度決定，忽略內容的寬度。
<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>
示例2
將Style tableLayout屬性設定為“auto”（自動）
在這個示例中，我們建立了一個邊框為3px實線黑色的表格。表格建立了序號和JavaScript框架作為標題。表格內容的寬度設定為100%。框架包括NodeJS、VueJS、React、Angular和EmberJS。表格單元格、行和列預設設定為auto。此值由寬度最大的不可中斷內容的列寬決定。
<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>
示例3
在下面的示例中，我們演示瞭如何同時使用Style tableLayout屬性的“fixed”（固定）和“auto”（自動）值。
<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>
在本教程中，我們學習了表格單元格、表格行和表格列的佈局。單元格的內容也包含在圖片中。表格佈局設定為“fixed”（固定）或“auto”（自動），這會使表格內容的外觀有所不同。
1K+ 次瀏覽
