表格相关CSS显示属性的用途是什么？

Question

我正在学习显示属性，并开始想知道为什么有人会使用 display:table、display:table-cell、display:table-row、display:table-caption 等。

这如何以及为何比使用相应的 HTML 标签更好？

Answer 1

display: table

、

display: table-cell

、

display: table-row

和

display: table-caption

属性是 CSS 的一部分，用于创建类似于表格结构的布局，而不必使用

<table>

、

<tr>

、

<td>

和

<caption>

HTML 标签。

示例 1：创建导航栏

假设您想创建一个具有均匀间隔链接的导航栏。

使用 HTML 表格标签：

<table>
  <tr>
    <td><a href="#">Home</a></td>
    <td><a href="#">About</a></td>
    <td><a href="#">Services</a></td>
    <td><a href="#">Contact</a></td>
  </tr>
</table>

使用 CSS 显示属性：

.navbar {
  display: table;
  width: 100%;
}

.navbar div {
  display: table-cell;
  text-align: center;
}

<div class="navbar">
  <div><a href="#">Home</a></div>
  <div><a href="#">About</a></div>
  <div><a href="#">Services</a></div>
  <div><a href="#">Contact</a></div>
</div>

示例2：表单布局

创建标签和输入字段正确对齐的表单。

使用 HTML 表格标签：

<table>
  <tr>
    <td><label for="username">Username:</label></td>
    <td><input type="text" id="username"></td>
  </tr>
  <tr>
    <td><label for="password">Password:</label></td>
    <td><input type="password" id="password"></td>
  </tr>
</table>

使用 CSS 显示属性：

.form div {
  display: table-row;
}

.form label,
.form input {
  display: table-cell;
  padding: 5px;
}

<div class="form">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username">
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password">
  </div>
</div>

为什么使用 CSS 显示属性？

1. 语义： HTML 表格元素应用于表格数据，而不是用于布局目的。使用 CSS 显示属性将内容与呈现分开。
2. 灵活性：CSS 属性提供了对样式和响应能力的更多控制。
3. 辅助功能：与传统表格布局相比，CSS 可以提供更好的辅助功能。

请记住，这两种方法都有其优点，它们之间的选择取决于布局的具体要求以及您对语义 HTML 的偏好。对于复杂的布局，CSS 属性可能提供更大的灵活性，而对于实际的表格数据，HTML 表格可能更合适。