資料結構
網路
關係資料庫管理系統
作業系統
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。表格單元格、行和列預設設定為自動。我們將此表格的佈局更改為**固定**，該佈局由表格和列的寬度決定，並忽略內容的寬度。
<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。表格單元格、行和列預設為自動。此值由最寬的不可中斷內容的列寬定義。
<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+ 閱讀量
