这学期终于有了前端课，虽然基本全会了，但终归是野路子出家，有很多东西还是第一次见到的。
比如本篇要扯的 table 布局
先说结论：现代别用，难用、繁琐、局限性大。不如直接无脑起 <div> 来得简单且美观。
基础
首先来起一个简单表格：
代码语言：javascript复制<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 表格布局仍然是一个不错的选择，例如呈现表格数据时（毕竟是本职工作）。
