CSS 如何设置表格布局算法

为了回答问题：“如何使用CSS设置表格布局算法”，我们需要了解什么是‘布局’。在HTML中，布局指定了网站的基本组织和视觉样式。它使您能够使用基本的HTML标签构建网站。

表格布局

由于其复杂性，表格布局是最不建议的HTML布局之一。顾名思义，它是基于table>元素的。table>元素允许您按行和列排列数据。

table>标签是一个容器标签，因为它充当了开启和结束标签，所以我们可以在元素内使用多个HTML元素，即使需要三个meta标签将数据排列到表格中。

第一个使用tr>标签，代表“表行”，在表格中添加一行新的数据，而第二个使用th>标签，代表“表头”，用于存储表格的标题。最后一个是“td”，即表格数据，用于获取必须保留在表格中的数据。

示例

以下是在网页中使用表格标签的示例。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Tables</title>
</head>
<body>
   <table border = "1">
      <tr>
         <td>Name</td>
         <td>Age</td>
      </tr>
      <tr>
         <td>Vibha</td>
         <td>30</td>
      </tr>
   </table>
</body>
</html>

什么是CSS的表格布局属性

表格布局是CSS中的一个属性，它用于为HTML文档中的现有标签添加自定义样式。该属性用于设置有助于布置表格标签元素的算法，例如表头、表行和表数据。

它被几乎所有的web浏览器支持。它是不可继承的属性，并具有离散的动画类型。所使用的计算值由浏览器指定。该属性可以具有的所有可能值如下所示：

Auto - 这是大多数浏览器使用的值，使表格布局是自动的。通过提供带有auto的table-layout属性，使表格的单元格和列可伸展，以容纳整个内容。
Fixed - 通过此值，我们通过设置第一行的宽度或在表格和col元素上设置宽度，为表格和列提供固定宽度。在第一行之后的所有单元格对表格宽度没有影响。

可以在下载和检查第一张表格行后，使用“fixed”布局方法生成完整的表格。与“automatic”布局选项相比，这样可以加快渲染速度，但是跟随的单元格内容可能不适合可用的列宽。因此，选择是我们是否希望网站加载更快还是专注于UI的呈现部分。

只有在表格有定义的宽度时，单元格才会使用overflow属性来确定是否裁剪任何溢出的内容；否则，它们不允许内容溢出单元格。

除了这些值，我们还可以将initial或inherit作为此属性的值。initial使属性设置为它的默认值，而inherit使属性继承其父元素的值。

示例

以下是使用CSS中的table-layout属性设置底层表格布局算法的示例。我们使用了上述可能的两个值。

<!DOCTYPE html>
<html>
<head>
   <title>table-layout property in CSS</title>
   <style>
      table {
         border-collapse: collapse;
         border: 2px solid rgb(156, 112, 112);
      }
      th,
      td {
         border: 2px solid rgb(130, 99, 99);
      }
      table#tableAuto {
         table-layout: auto;
         width: 300px;
      }
      table#tableFixed {
         table-layout: fixed;
         width: 300px;
      }
      div {
         max-width: 300px;
         padding: 12px;
         border: 2px solid rgb(144, 102, 102);
      }
      h1 {
         color: rgb(111, 164, 111);
      }
   </style>
</head>
<body>
   <center>
      <h1>Examples of table layout property</h1>
      <h2>table-layout property in CSS</h2>
      <div>
         <h3>Property value set to auto</h3>
         <table id="tableAuto">
            <tr>
               <th>Some Name</th>
               <th>Some Age</th>
               <th>Some Roll No</th>
            </tr>
            <tr>
               <td>Some Name 1</td>
               <td>Some Age 1</td>
               <td>Some Roll No 1</td>
            </tr>
            <tr>
               <td>Some Name 2</td>
               <td>Some Age 2</td>
               <td>Some Roll no 2</td>
            </tr>
         </table>
      </div>
      <br />
      <div>
         <h3>The property value set to fixed</h3>
         <table id="tableFixed">
            <tr>
               <th>Some Name</th>
               <th>Some Age</th>
               <th>Some Roll no</th>
            </tr>
            <tr>
               <td>Some Name 1</td>
               <td>Some Age 1</td>
               <td>Some Roll no 1</td>
            </tr>
            <tr>
               <td>Some Name 2</td>
               <td>Some Age 2</td>
               <td>Some Roll no 2</td>
            </tr>
         </table>
      </div>
   </center>
</body>
</html>

结论

总之，使用CSS设置表格布局算法是确保您的表格看起来有条理和专业的好方法。只需几个简单的步骤，您就可以轻松创建一个美观的表格布局，几乎不费力。此外，通过利用现代CSS功能，如flexbox和网格系统，可以轻松地为任何设备或屏幕大小快速生成响应式设计。最终，使用CSS设置表格布局算法是在轻松创建美丽网页方面的强大工具。