数据结构
网络
关系数据库管理系统
操作系统
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+ 阅读量
