CSS 如何设置表格布局算法

为了回答这个问题。为了回答 “如何使用CSS设置表格布局算法”，我们需要了解什么是 “布局”。HTML中的布局规定了一个网站的基本组织和视觉风格。它让你有能力用基本的HTML标签建立网站。

表格布局

由于其复杂性，表式布局是最不建议使用的HTML布局之一。顾名思义，它是基于<table>元素的。<table>元素允许你在行和列中安排数据。

<table>标签是一个容器标签，因为它既是开头标签又是结尾标签，我们可以在一个元素中使用多个HTML元素，尽管需要三个元标签来将数据排列到表格中。

第一个使用<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中的table-layout属性

表格布局是CSS中的众多属性之一，用于为HTML文档中预先存在的标签添加自定义样式。这个属性用于设置算法，在布置表格标签的元素时很有帮助，如表格标题、表格行和表格数据。

几乎所有的网络浏览器都支持它。它是不可继承的属性，具有离散的动画类型。使用的计算值是由浏览器指定的。该属性可能具有的所有值的列表如下

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

在下载和检查完第一行表格后，可以使用 “固定 “布局方法制作完整的表格。比起 “自动 “布局选项，这可以加快渲染速度，但下面的单元格内容可能不适合可用的列宽。因此，选择权在我们手上，我们是想让网站加载得更快，还是专注于用户界面的表现部分。

只有当表格有定义的宽度时，单元格才会，使用溢出属性来决定是否剪下任何溢出的内容；否则，他们不会允许材料溢出单元格。

除了这些值，我们还可以为这个属性提供初始或继承的值。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来设置表格布局的算法是一个强大的工具，可以轻松地创建漂亮的网页。