主页关于链接归档灯泡

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.