主页关于链接归档相册

HTML 使用 table 布局的一些记录

代码

这学期终于有了前端课，虽然基本全会了，但终归是野路子出家，有很多东西还是第一次见到的。
比如本篇要扯的 table 布局

先说结论：现代别用，难用、繁琐、局限性大。不如直接无脑起 <div> 来得简单且美观。

基础

首先来起一个简单表格：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>30</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

会显示如下：

姓名姓名性别
小明25男
小红30女

<table> 标签表示一个表格，其中 <thead> 表示表格头部，<tbody> 表示表格主体。<tr> 标签表示表格中的一行，<th> 标签表示表头单元格，<td> 标签表示数据单元格。

用于页面布局

表格里面可以是任何东西，如表格里面套 <p>、<code>、<div> 等等，所以也可以利用表格来布局。
这里先起一个常见的头部、内容和侧边栏的布局：

<table>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td class="sidebar">Sidebar</td>
    <td class="content">Main Content</td>
  </tr>
</table>

这段 HTML 中，表格创建了两行。第一行中使用 colspan 属性将表格单元格合并为一列，并作为头部。
第二行中使用两个单元格来放置侧边栏和主要内容。
因为默认表格比较丑陋（指边框），所以再附上一点 CSS：

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 10px;
  border: 1px solid #ccc;
}

td.sidebar {
  width: 25%;
}

td.content {
  width: 75%;
}

将表格的宽度设置为 100 %，使其充满整个屏幕。这里还使用了 border-collapse 属性来合并单元格边框，使其看起来更加整洁。最后，我们使用 CSS 类来设置侧边栏和主要内容单元格的宽度，使其按比例分配空间。

总结

只能说 HTML 表格（table）布局和其他常见的布局方式相比，如CSS布局、flex布局等，在实现不同的布局需求时，各有优缺点。

优点：

  • 简单易懂：使用 HTML 表格布局比较简单易懂，特别是对于新手而言，可以很容易地理解和掌握。
  • 跨浏览器兼容性好：HTML 表格布局在不同的浏览器中都具有很好的兼容性，可以稳定地呈现相同的布局效果。

缺点：

  • 不够灵活：HTML 表格布局通常比较死板，不太适合实现更加复杂的布局需求，例如响应式设计。
  • 语义化不够明确：如果使用 HTML 表格布局来实现非表格数据的布局，会使HTML文档的语义化变得不够明确。
  • 代码冗长：在一些复杂的布局情况下，使用HTML表格布局可能需要写很多的 HTML 和 CSS 代码，导致代码冗长，不易维护。

相比之下，CSS 布局和 flex 布局可以更加灵活地实现各种复杂的布局需求，而且语义化更加明确，可读性和可维护性更高。但是，在一些特定的场景下，HTML 表格布局仍然是一个不错的选择，例如呈现表格数据时（毕竟是本职工作）。

the end.

↑