46、HTML 与 XHTML 实用技巧：表格布局与透明图像制作

HTML 与 XHTML 实用技巧：表格布局与透明图像制作

1. 表格布局技巧

表格不仅能用于创建吸引人且易于访问的信息表格，还能用于设计标准 HTML 或 XHTML 中难以实现的创新页面布局。

1.1 多列页面布局

HTML 和 XHTML 中缺少多列文本布局元素，但可以利用表格来实现。

• 基本多列布局 ：使用 <table> 创建基本两列布局，包含一个表格行和三个数据单元格，中间的空单元格用于分隔两列，通过设置 cellspacing 属性增加列间距。示例代码如下：

<table border=0 cellspacing=7>
  <tr>
    <td>Copy for column 1...
    <td><br>
    <td>Copy for column 2...
 </table>

需要注意的是，浏览器不会自动平衡列中的文本长度，需要手动调整。同时，用户调整显示窗口大小时，列内容会相应移动，无需过于纠结列尾文本的对齐。还可以将布局扩展为三列或更多列，但多列页面在小屏幕上可能难以阅读。

• 跨列标题 ：在基本多列布局基础上，通过添加跨列单元格来创建标题和跨列图形。示例代码如下：