首页 > 代码库 > 表格及布局——0606上午

表格及布局——0606上午

今天上午学习了表格的应用以及如何用表格进行页面布局。以下面代码为例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
  </head>
  <body>
    <table width="100%" border="0" cellspacing="1" cellpadding="1">
      <tr height="60">
        <td colspan="3" bgcolor="#CCFFCC">
          <span>首页&nbsp;&nbsp;</span>
          <span>产品中心&nbsp;&nbsp;</span>
          <span>关于我们&nbsp;&nbsp;</span>
          <span>联系我们&nbsp;&nbsp;</span>
        </td>
      </tr>
      <tr height="550">
        <td colspan="3" align="center">
          <img src="http://www.mamicode.com/动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" height="550" width="1000"/>
        </td>
      </tr>
      <tr >
        <td align="center" width="32%">
          这是一条新闻<br />
          这是一条新闻<br />
          这是一条新闻<br />
        </td>
        <td align="center" width="35%">
          这是一件产品<br>
          这是一件产品<br>
          这是一件产品<br>
        </td>
        <td align="center" width="33%">
          这是一个名字<br>
          这是一个名字<br>
          这是一个名字<br>
        </td>
      </tr>
      <tr>
        <td colspan="3" bgcolor="#999999" align="center">
          copyright (c) 我的网 2014-2012,All  RightsReserved | 京CIP证04118号音像制品经营许可证 京音网8号
        </td>
      </tr>
    </table>
  </body>
</html>

在Dreamweaver中可以直接通过设计页面—插入来直接添加一个表格,还可以直接调整相应的行数、列数、宽高、颜色、边距、合并等各种属性。

<table>

<table>代表表格开始

</table>代表表格结束

表格里可以嵌套表格。

<table>相关属性

  width:表格宽度,表示方法有像素和百分比

  border:边框粗细,默认不写为0

  cellspacing:单元格的边距,单元格之间的距离

  cellpadding:单元格的间距,单元格和内容之间的距离

  bordercolor:边框颜色

 

  bgcolor:背景色

  align:表格在页面中的位置
<tr>代表行

  相关属性:

  height:行高
  bgcolor:行的背景色

  <tr>没有宽度,表格一行的宽度在<table>里设置

<td>代表单元格

  相关属性:

  width:单元格的宽度

  height:单元格的高度

  align:水平对齐方式 left左 right右 center中

  valign:(vertial-align)垂直对齐方式 top上 middle中 bottom下

  bgcolor:背景色

  colspan:在行里面合并列(合并几个单元格)

  rowspan:在列里面合并行(合并几个单元格)

<th>

通常是在第一行里面代替<td> 用来做表头单元格的,相当于<td>中的<h1>标题,自动加粗自动居中。

<tbody>

所有数据的行写在<tbody>里面,正常用不到。特殊情况会用到。

拓展:

表格的标题

<caption align=# valign=#> ... </caption>

内容会显示在表格上方

表格可以添加背景图片,background属性,可以用在<table>和<td>中给整个表格和单个单元格添加背景图片,不能够给<tr>一行添加背景图。

表格中边框的显示 

显示所有 4 个边框 <table frame=box>

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

只显示上、下边框 <table frame=hsides>

只显示左、右边框 <table frame=vsides>

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>

表格中分隔线(Rules)的显示

显示所有分隔线 <table rules=all>

只显示组(Groups)与组之间的分隔线 <table rules=groups>

只显示行与行之间的分隔线 <table rules=rows>

只显示列与列之间的分隔线 <table rules=cols>

不显示任何分隔线 <table rules=none>

<thead> ... </thead> - 表的题头(Header) 
<tbody> ... </tbody> - 表的正文(Body) 
<tfoot> ... </tfoot> - 表的脚注(Footer)

表格及布局——0606上午