网页设计之表格

表格
【表格的概念】 表格的概念】
什么是表格
表格
1 超链接 图像
表格将文本与图片按 行、列来排列，使得页 面更规则、更整齐，并 使条目更清晰。
表单
其他HTML 标记
表格
【表格的结构】 表格的结构】
表格标记<table>…</tab源自文库e>的格式如下： 的格式如下： 表格标记 的格式如下
<table> <tr> <td>第一行第一单元格 第一行第一单元格</td> 第一行第一单元格 <td>第一行第二单元格 <td>第一行第二单元格</td> 第一行第二单元格</td> <td>第一行第三单元格 第一行第三单元格</td> 第一行第三单元格 </tr> <tr> <td>第二行第一单元格 第二行第一单元格</td> 第二行第一单元格 <td>第二行第二单元格 第二行第二单元格</td> 第二行第二单元格 <td>第二行第三单元格 第二行第三单元格</td> 第二行第三单元格 </tr> </table>
表格
超链接 图像
1
表单
其他 HTML标 记
例子
表格
【表格的结构】 表格的结构】
利用<TABLE>这个标签来告诉电脑，这是一个表格； 这个标签来告诉电脑，这是一个表格； 利用 这个标签来告诉电脑 一组<TR></TR>是设定一横列的开始； 是设定一横列的开始； 一组 是设定一横列的开始 一组<TD></TD>则是设定一个栏位； 则是设定一个栏位； 一组 则是设定一个栏位 文字就是要摆在<TD></TD>这里面。 这里面。 文字就是要摆在 这里面
表格
【表格边框的属性】 表格边框的属性】
• Cellpadding：设置单元格边距，即单元格中的文本离单元 ：设置单元格边距， 格边框的距离。 格边框的距离。
• align：整个表格的对齐方式，其值可为 、right和 ：整个表格的对齐方式，其值可为left、 和 center <table border="0" cellspace="10" cellpadding="5" align="center">
表格
【表格外框属性frame】 表格外框属性 】
<table frame="value"> value值可以为：box、above、below、hsides、 vsides 、 值可以为： 值可以为 、 、 、 、 lhs、rhs和void。 、 和 。
above
below
hsides
vsides
为单元格指定的尺寸有时与浏览器中显示的不符， 为单元格指定的尺寸有时与浏览器中显示的不符，因为 会受到整表大小和其他单元格大小的影响。 会受到整表大小和其他单元格大小的影响。
表格
【标题单元格】 标题单元格】
如果单元格是标题单元格，可以用 标记取代<td>标记， 标记， 如果单元格是标题单元格，可以用<th>标记取代 标记取代 标记 <th>单元格中的内容会以粗体居中的格式显示。如下行所示： 单元格中的内容会以粗体居中的格式显示。如下行所示： 单元格中的内容会以粗体居中的格式显示 <th>table header appear bold and centered</th> 也可以在<table>和</table>标记之间添加 和 标记之间添加<caption>标记 也可以在 标记之间添加 标记 定义表格的标题，其格式如下： 定义表格的标题，其格式如下： <caption align="top"> 标题文字 </caption> align：“top”或“bottom”，“top”指定标题在表格正上方 ： 或 ， 指定标题在表格正上方 并居中显示， 指定标题显示在表格的正下方。 并居中显示，“bottom”指定标题显示在表格的正下方。 指定标题显示在表格的正下方
【表格边框的颜色】 表格边框的颜色】
有三个属性描述表格边框线的颜色 : bordercolor：边框颜色 ： bordercolordark：暗边框 ： bordercolorlight：亮边框 ：
Bordercolor=“blue”
Bordercolorlight=“red”
Bordercolordark=“black”
表格
【表格边框的属性】 表格边框的属性】
border ：设置表格的边框粗细，如果值为 （默认值），则不显 设置表格的边框粗细，如果值为0（默认值）， ），则不显 示表格边框 。
单元格间距， • cellspacing：设置单元格间距，即单元格边框线之间的距离。 ：设置单元格间距 即单元格边框线之间的距离。
表格
【单元格中内容的对齐方式】 单元格中内容的对齐方式】
格式如下： 格式如下： <td align="alignment" valign="alignment"> align： 水平对齐方式，其值可以为：left、center和 right。 ： 水平对齐方式，其值可以为： 、 和 。 valign：垂直对齐方式，其值可以为：top、middle和 ：垂直对齐方式，其值可以为： 、 和 bottom。 。
表格
【表格行、列或单元格的填充色】 表格行、列或单元格的填充色】
格式如下： 格式如下：
<table bgcolor="blue"> <tr bgcolor="#0000ff"> <td bgcolor="rgb(0,0,255) "> <th bgcolor="rgb(0%,0%,100%)">
表格
表格
【表格或单元格的大小】 表格或单元格的大小】
格式如下： 格式如下： <table width="size" height="size"> size：可用像素或用占浏览器显示区域的百分比值。 ：可用像素或用占浏览器显示区域的百分比值。 <td width="size" height="size">
【数据的输入】 数据的输入】
【表格特效】 表格特效】
【网页的布局】 网页的布局】
lhs void
rhs
例子
表格
【表格内框属性rules】 表格内框属性 】
<table rules="value"> value值可以为：all、rows、cols、none 值可以为： 、 值可以为 、 、
rows
cols
none 背景表 格例子
表格
【表格中单元格的合并】 表格中单元格的合并】
格式如下： 格式如下： 跨列合并： 跨列合并： <td colspan="value"> value值为要合并的列数 值为要合并的列数
表单 其他HTML 标记 1
表格
超链接 图像
跨行合并： 跨行合并： <td rowspan="value"> value值为要合并的行数 值为要合并的行数
例子
表格的作用