网页设计表格 - 360文档中心

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

合并单元格示例
<HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLE BORDER = 2 BGCOLOR = lavender CELLSPACING = 2 CELLPADDING = 6> <CAPTION>创建表</CAPTION> <TH ALIGN = CENTER COLSPAN = 3>第一季度</TH> <TH ALIGN = CENTER COLSPAN = 3>第二季度</TH> <TR> <TD>一月</TD> <TD>二月</TD> <TD>三月</TD> <TD>四月</TD> <TD>五月</TD> <TD>六月</TD> </TR> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR> <TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD> </TR> </TABLE> </BODY> </HTML>
表格与框架
---Table And Fra百度文库e
Version 3.0
表格
• 用于表示多维数据
– 比如成绩单、比分表等
• 传统的网页设计中，也使用格式来进行布局和定位
表格的结构
列
列标题行
创建表
<TABLE>
<TR>
<TD>数据单元格1</TD> <TD>数据单元格2</TD> <TD>数据单元格3</TD> </TR> <TR> <TD>数据单元格4</TD> <TD>数据单元格5</TD> <TD>数据单元格6</TD> </TR> </TABLE>
单元格中数据的对齐方式
• Align = left • Align = center • Align = right

Valign = top Valign = middle Valign = bottom
<TD ALIGN ="right" VALIGN = "bottom"> 数据单元格 1</TD>
删除行或列
1. 要删除行，需要删除相应的 <TR> 标记及该 <TR> 标记内的所有 <TD> 标记。 2. 要删除列，应将定义该列的所有 <TD> 标记都删除。
合并单元格
1. 在 <TH> 或 <TD> 标记中使用 COLSPAN 属性，可以设置单元格所跨的列数，例如 COLSPAN=3表示跨3列。 2. 在 <TH> 或 <TD> 标记中使用 ROWSPAN 属性，可以设置单元格所跨的行数，例如 ROWSPAN=3表示跨3行。
插入行或列
1. 要在表格中插入新行，只要在新行要出现的地方插入 <TR> 和 <TD>标记即可。 2. 要在表格中插入新列，需要在每行相应的位置添加单元格<TD>。
插入行
<HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <TR> <TD>数据单元格1</TD> <TD>数据单元格2</TD> <TD>数据单元格3</TD> </TR> <TR> <TD>数据单元格4</TD> <TD>数据单元格5</TD> <TD>数据单元格6</TD> </TR> <TR> <TD>新行1</TD> <TD>新行2</TD> <TD>新行3</TD> </TR> </TABLE> </BODY> </HTML>
请大家分析课本列实例
增加单元间隔和单元填充
1. CELLSPACING 属性定义单元格之间的间距（以像素为单位）。CELLPADDING 属性定义表的单元格边界与单元格内容之间的间距（以像素为单位）。 2. <TABLE BORDER = 2 CELLSPACING = 2 CELLPADDING = 6>
与表相关的标记
<TABLE> … /TABLE> <TR> … </TR> 表标记行标记
<TD> … </TD>
<CAPTION> …<CAPTION>
单元格标记
标题标记列标记
<TH> … </TH>
使用表的相关标记创建表
<HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <CAPTION>创建表</CAPTION> <TH ALIGN = CENTER>一月</TH> <TH ALIGN = CENTER>二月</TH> <TH ALIGN = CENTER>三月</TH> <TH ALIGN = CENTER>四月</TH> <TH ALIGN = CENTER>五月</TH> <TH ALIGN = CENTER>六月</TH> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR> <TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD> </TR> </TABLE> </BODY> </HTML>