40、CSS布局技巧：表格显示与多种布局策略解析

CSS布局技巧：表格显示与多种布局策略解析

1. CSS表格显示原理

CSS表格显示可以类比电子表格，表格由列和行组成，列和行的交叉处是单元格。在电子表格中，每个单元格可放置数值或文本；而在CSS表格显示里，每个单元格包含一个HTML块级元素。

例如，若页面有三张图片和三段文字，想以两列三行布局，概念上可用表格实现。由于只能在表格中放置块级元素，所以图片需用 <div> 包裹。表格会自动扩展以适应单元格的宽度和高度。

2. 使用CSS表格显示创建两列布局

2.1 添加HTML结构

要让浏览器将列显示为表格，需添加HTML结构来表示表格的列、行以及整个表格。具体步骤如下：
1. 创建一个 <div> 表示整个表格，将列和行嵌套在其中。
2. 为表格的每一行创建一个 <div> ，用于包含该行内容。以Starbuzz页面为例，只有一行。
3. 每列只需一个块级元素，可使用现有的“main” <div> 和“sidebar” <div> 。

以下是Starbuzz页面的HTML结构示例：

<div id="tableContainer">
  <div id="tableRow">
    <div id="main">
      ...
    </div>