如何使用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”（自动），这会使表格内容的外观有所不同。

更新于：2022年10月12日

1K+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告