今天上午学习了表格的应用以及如何用表格进行页面布局。以下面代码为例:
<!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="../../动态壁纸/壁纸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>一行添加背景图。