表格标记的应用

为了合理地组织文本，网页中常常要用到表格排版以及做出各种效果。

1.制作固定宽度的表格

如不定义表格中每个单元格的宽度，当向单元格中插入网页元素时，表格往往会变形，因此要利用固定宽度的表格和单元格精确地包含其中的内容。制作固定宽度的表格通常有以下两种方法。

1）定义所有列的宽度，但不定义整个表格的宽度。这时候，只要单元格内的内容不超过单元格的宽度，表格就不会变形。

<body>
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="200">需排版的内容1</td>
      <td width="360">需排版的内容2</td>
      <td width="200">需排版的内容3</td>
    </tr>
  </table>
</body>

2）定义整个表格的宽度，如760px、98% 等，再留一列的宽度不定义。

由于网页的总宽度、每列的宽度都要固定，所以制作固定宽度的表格是用表格进行网页布局的基础，而网页布局时一般是不需要制定布局表格高度的。因为随着单元格中内容的增加，布局表格的高度也会自适应增加。

只有在单元格中插入图像时，为了保证单元而过和图像之间没有间隙，需要把单元格的宽和高设置为图像的宽和高，填充、间距和边框都设置为0，并保证单元格标记内除图像元素，没有其他空格或换行符。

2.用普通表格进行排版

1-3-1板式布局时一种最常见的网页版面布局方式，是学习其他复杂版面布局的基础，它可以通过四个表格来实现。其中表格的高度会随着内容的增加而增高。

<body>
  <table align="center" width="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
       <td bgcolor="#3399ff">Page Header</td>
     </tr>
  </table>
   <table align="center" width="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td bgcolor="#ccccff">Nav bar</td>
     </tr>
  </table>
  <table align="center" width="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td bgcolor="#0099ff" valign="middle" width="200">Left Bar</td>
      <td bgcolor="#ccccff" valign="middle">Page Conten </td>
      <td bgcolor="#cc00cc" valign="middle" width="200">Slide Bar</td>
    </tr>
  </table>
  <table align="center" width="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td bgcolor="#3399ff">Page Footer</td>
    </tr>
  </table>
</body>

3.特殊效果表格的制作

1）制作1px（细线）边框的表格

我们在上节中做的表格要么没有边框，要么是边框重叠，通过此例子来做1px的边框。

用间距做边框。原理是通过把表格的背景色和单元格的背景色调整成不同的颜色，使间距看起来想一个边框一样，再将表格的边框设为0，间距为1，即实现1px边框的表格。

<body>
  <table border="0" cellpadding="1" bgcolor="#ff0000">
    <tr>
      <td bgcolor="#ffffff">1px边框表格单元格1</td>
      <td bgcolor="#ffffff">1px边框表格单元格1</td>
    </tr>
    <tr>
      <td bgcolor="#ffffff">1px边框表格单元格1</td>
    <td bgcolor="#ffffff">1px边框表格单元格1</td>
    </tr>
  </table>
</body>

2）制作双线边框表格

将表格的边框颜色（bordercolor）属性设置为某种颜色后，边框的立体感消失，此时只要间距（cellspacing）不设为0，表格的边框和单元格的边框就不会重合，如果设置表格的边框宽度为1px，则显示为双细线边框表格。

<body>
<table width="180"

border="1" cellpadding="6" cellspacing="3" bordercolor="#000000"
									bgcolor="#FFFFFF"

>     <tr>
      <td bgcolor="#CCCCCC">标题</td>
    </tr>
    <tr>
      <td height="128" valign="top" bordercolor="#ffffff">内容</td>
    </tr>
  </table>
</body>

3）用单元格制作垂直竖线

将表格的边框（border）、间距（cellspacing）和填充（cellpadding）设置为0，表格的宽度设置为你要做的垂直竖线的宽度，将表格中的行的高度设置为垂直竖线的高度。