首页 > 代码库 > 表格及布局——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>首页 </span>
<span>产品中心 </span>
<span>关于我们 </span>
<span>联系我们 </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号音像制品经营许可证 京音网８号
</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上午