网页设计表格_第1页
网页设计表格_第2页
网页设计表格_第3页
网页设计表格_第4页
网页设计表格_第5页
已阅读5页，还剩72页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第8章表格清华大学出版社网页设计表格全文共77页，当前为第1页。主要内容熟悉表格的常用属性，制作表格

利用表格来容纳表格式数据

利用表格进行页面的排版布局网页设计表格全文共77页，当前为第2页。8.1表格简介表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。所以说要制作好网页，就要学好表格，熟练掌握和运用表格的各种属性。网页设计表格全文共77页，当前为第3页。8.1.1表格基本标记表格标签在HTML语法中，表格主要通过3个标签来构成：<table>、<tr>、<td>。基本语法：

<table><tr><td>…</td>…</tr><tr><td>…</td>…</tr>…</table>网页设计表格全文共77页，当前为第4页。8.1.1表格基本标记<!--实例8-1-1代码--><html><head><title>定义表格</title></head><body><tablewidth="600"border="1"><tr><!--表格第一行--><td>节次</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td></tr><tr><!--表格第二行--><td>第12节</td><td>体育</td><td>大学英语</td><td>高等数学</td><td>数据结构实验</td><td>Web开发</td></tr><tr><!--表格第三行--><td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><td>数据结构</td><td>Web开发实验</td></tr></table></body></html>网页设计表格全文共77页，当前为第5页。8.1.1表格基本标记网页设计表格全文共77页，当前为第6页。8.1.2设置表格的边框属性表格的边框默认情况下表格边框为0，可以通过给表格添加属性及属性值，实现为表格设置边框线以及美化表格的目的，常见属性如表所示。网页设计表格全文共77页，当前为第7页。8.1.2设置表格的边框属性基本语法：<tableborder=”

”bordercolor=”

”bordercolorlight=”

”bordercolordark=”

”>

语法说明：border属性用于设置边框的粗细；

bordercolor设置表格边框的颜色。bordercolorlight属性用于设置亮边框（表格的左边和上边框）颜色，属性值为各种颜色代码（当border值不为0时设置此值有效）。bordercolordark属性用于设置暗边框（表格的右边和下边框）颜色，属性值为各种颜色代码（当border值不为0时设置此值有效）。网页设计表格全文共77页，当前为第8页。8.1.2设置表格的边框属性<html><head><title>设置表格的边框属性</title></head><body><tableborder=1><tr><td>表格内容</td></tr></table><br><tableborder=5><tr><td>表格内容</td></tr></table><br>网页设计表格全文共77页，当前为第9页。8.1.2设置表格的边框属性<tableborder=5

borderColor=#0080FF><tr><td>表格内容</td></tr></table><br><tableborder=5

borderColorDark=#004B97

borderColorLight=#62B0FF><tr><td>表格内容</td></tr></table><br><tableborder=5

borderColorDark=red

borderColorLight=blue><tr><td>表格内容</td></tr></table></body></html>网页设计表格全文共77页，当前为第10页。8.1.2设置表格的边框属性网页设计表格全文共77页，当前为第11页。8.1.3表格表头表头指表格的第一行或第一列，表头的文字样式为居中、加粗显示，通过<th>标签实现。基本语法：

<table><tr>

<th>…</th>…</tr><tr><td>…</td>…</tr>…</table>网页设计表格全文共77页，当前为第12页。8.1.3表格表头<!--程序8-1-3-->…<tablewidth="600"border="1"><caption>课程表</caption><tr><!--表格表头--><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>…</table>网页设计表格全文共77页，当前为第13页。8.1.3表格表头网页设计表格全文共77页，当前为第14页。8.2.1设置表格背景表格背景表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。基本语法：<tablebgcolor=”

”>网页设计表格全文共77页，当前为第15页。8.2.1设置表格背景<!--程序8-2-1-->…<tablewidth="600"border="1"bgcolor="#f5f5dc">…</table>网页设计表格全文共77页，当前为第16页。8.2.1设置表格背景网页设计表格全文共77页，当前为第17页。8.2.2设置表格的背景图像表格背景图像表格背景图像可以是GIF、JPEG或PNG三种图像格式。基本语法：<tablebackgruond=”

”>网页设计表格全文共77页，当前为第18页。8.2.2设置表格的背景图像<!--程序8-2-2-->…<tablewidth="600"border="1"background="kechengbiao.gif">…</table>网页设计表格全文共77页，当前为第19页。8.2.2设置表格的背景图像网页设计表格全文共77页，当前为第20页。8.3表格大小表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。利用width和height属性指定像素值来设置表格及单元格的宽度和高度，也可以通过表格宽度占浏览器窗口的百分比值来设置表格的大小网页设计表格全文共77页，当前为第21页。8.3.1设置表格的宽度和高度表格的宽度和高度默认情况下，表格的宽度和高度会根据内容自动调整。基本语法：<tablewidth=”

”height=”

”>网页设计表格全文共77页，当前为第22页。8.3.1设置表格的宽度和高度单元格的宽度和高度width属性和height属性不但可以设置表格的大小，还可以设置表格单元格的大小，为某一单元格设置width属性和height属性，将影响整行或整列单元的大小。基本语法：<tdwidth=”

”height=”

”>…</td>网页设计表格全文共77页，当前为第23页。8.3.1设置表格的宽度和高度<!--程序8-3-1--><head><title>定义表格的宽度和高度</title></head><body><tablewidth="600"height="200"border="1"><caption>课程表</caption><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>网页设计表格全文共77页，当前为第24页。8.3.1设置表格的宽度和高度<tr><tdheight="100">第12节</td><td>体育</td><td>大学英语</td><td>高等数学</td><td>数据结构实验</td><td>Web开发</td></tr><tr><td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><td>数据结构</td><td>Web开发实验</td></tr></table></body></html>网页设计表格全文共77页，当前为第25页。8.3.1设置表格的宽度和高度网页设计表格全文共77页，当前为第26页。8.4.1设置表格的水平对齐属性水平对齐在水平方向上，使用align属性可以设置表格或单元格的对齐方式为：left（居左）、center（居中）、right（居右）。如果没特别进行设置，则默认为居左排列。垂直对齐：在垂直方向上，使用valign属性可以设置单元格内数据的对齐方式为：top（居上）、middle（居中）、bottom（居底）或baseline（基底对齐）。如果没特别进行设置，则默认为居中排列。网页设计表格全文共77页，当前为第27页。8.4.1设置表格的水平对齐属性<!--程序8-4-1-->…<tablewidth="600"border="1"align="center">…</table>网页设计表格全文共77页，当前为第28页。8.4.1设置表格的水平对齐属性网页设计表格全文共77页，当前为第29页。8.4.2设置表格数据对齐方式

1、行数据水平对齐

在<tr>标签中使用align属性，用于设定表格中某一行的数据单元的水平对齐方式。可以设置表格的对齐方式为：left、center、right。默认值为left。基本语法：<tralign=””>…</tr>网页设计表格全文共77页，当前为第30页。8.4.2设置表格数据对齐方式

2、单元格数据水平对齐在<td>标签中使用align属性，用于设定表格中某一单元格数据的水平对齐方式。可以设置表格的对齐方式为：left、center、right。默认值为left。基本语法：<tdalign=””>…</td>网页设计表格全文共77页，当前为第31页。8.4.2设置表格数据对齐方式<!--程序8-4-2-1-><html><head><title>设定表格水平对齐</title></head><body><tablewidth=“800"border="1"align="center"><caption>课程表</caption><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th>网页设计表格全文共77页，当前为第32页。8.4.2设置表格数据对齐方式<th>星期五</th></tr><tralign="center"><td>第12节</td><td>体育</td><td>大学英语</td><td>高等数学</td><td>数据结构实验</td><td>Web开发</td></tr><tr><tdalign="right">第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><td>数据结构</td><td>Web开发实验</td></tr><tr><tdcolspan="6">适用时间：2008~2009第一学期083007班</td></tr></table></body></html>网页设计表格全文共77页，当前为第33页。8.4.2设置表格数据对齐方式网页设计表格全文共77页，当前为第34页。8.4.2设置表格数据对齐方式

3、行数据垂直对齐

在<tr>标签中使用valign属性，用于设定表格中某一行的数据单元的垂直对齐方式。可以设置表格的对齐方式为：top、middle、bottom或baseline。默认值为middle。基本语法：<trvalign=””>…</tr>网页设计表格全文共77页，当前为第35页。8.4.2设置表格数据对齐方式

2、单元格数据垂直对齐在<td>标签中使用valign属性，用于设定表格中某一单元格数据的垂直对齐方式。可以设置表格的对齐方式为：top、middle、bottom或baseline。默认值为middle。基本语法：<tdvalign=””>…</td>网页设计表格全文共77页，当前为第36页。8.4.2设置表格数据对齐方式

<!--程序8-4-2-2--><html><head><title>设定表格行内容垂直对齐</title></head><body><tablewidth="600"height="500"border="1"align="center"><caption>课程表</caption><trvalign="top"><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>网页设计表格全文共77页，当前为第37页。8.4.2设置表格数据对齐方式<tr><tdvalign="bottom">第12节</td><td>体育</td><td>大学英语</td><td>高等数学</td><td>数据结构实验</td><td>Web开发</td></tr><tr><td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><td>数据结构</td><td>Web开发实验</td></tr><tr><tdcolspan="6">适用时间：2008~2009第一学期083007班</td></tr></table></body></html>网页设计表格全文共77页，当前为第38页。8.4.2设置表格数据对齐方式网页设计表格全文共77页，当前为第39页。8.5.1设置表格单元格间距单元格的间距通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。单元格间距属性值以像素为单位或表格宽度百分比。基本语法：<tablecellspacing="">网页设计表格全文共77页，当前为第40页。8.5.1设置表格单元格间距<!--程序8-5-1--><html><head><title>定义表格单元格间距</title></head><body><tablewidth="600"border="1"cellspacing="15"><caption>课程表</caption><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>…网页设计表格全文共77页，当前为第41页。8.5.1设置表格单元格间距网页设计表格全文共77页，当前为第42页。8.5.2设置表格单元格边距单元格边距单元格边距是指单元格中的内容与单元格边框的距离，以像素为单位或表格宽度百分比。基本语法：<tablecellpadding="">网页设计表格全文共77页，当前为第43页。8.5.2设置表格单元格边距<!--程序8-5-2--><head><title>定义表格单元格边距</title></head><body><tablewidth="600"border="1"cellspacing="15"cellpadding="10"><caption>课程表</caption><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr>…

网页设计表格全文共77页，当前为第44页。8.5.2设置表格单元格边距网页设计表格全文共77页，当前为第45页。8.6设置边框样式边框的样式在前面我们使用border属性时，每个单元格之间以及表格本身会出现边框，我们可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。基本语法：<tableframe=”

”rules=”

”>网页设计表格全文共77页，当前为第46页。8.6设置边框样式Frame属性的取值网页设计表格全文共77页，当前为第47页。8.6设置边框样式rules属性的取值网页设计表格全文共77页，当前为第48页。8.6设置边框样式<!--程序8-6-->…<tablewidth=”600"border="1"frame="hsides"

rules="all">…</table>网页设计表格全文共77页，当前为第49页。8.6设置边框样式网页设计表格全文共77页，当前为第50页。8.7横跨行和列跨行合并单元格的rowspan属性可实现单元格的跨行合并（纵向合并）。基本语法：<tdrowspan=”

”>…</td>网页设计表格全文共77页，当前为第51页。8.7横跨行和列<!--程序8-7-1--><html><head><title>设定跨行的表格</title></head><body><tablewidth="600"border="1"cellpadding="0"cellspacing="0“align="center"><caption>课程表</caption><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><tr><tr><td>第12节</td><td>体育</td>网页设计表格全文共77页，当前为第52页。8.7横跨行和列

<td>大学英语</td><td>高等数学</td><tdrowspan=“2”valign=“middle”>数据结构实验</td><!--此处定义了一个单元格占了两行-->

<td>Web开发</td></tr><tr><td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><!--此处开始少了一个单元格，因为上一行已经定义--><td>Web开发实验</td></tr><tr><tdcolspan="6">适用时间：2008~2009第一学期083007班</td></tr></table></body></html>网页设计表格全文共77页，当前为第53页。8.7横跨行和列网页设计表格全文共77页，当前为第54页。8.7横跨行和列跨列合并colspan属性可以进行单元格的跨列合并（横向合并）。基本语法：<tdcolspan="">…</td>网页设计表格全文共77页，当前为第55页。8.7横跨行和列

<!--程序8-7-2--><html><head><title>设定跨列的表格</title></head><body><tablewidth="600"border="1"cellpadding="0"cellspacing="0"align="center"><caption>课程表</caption><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><tr><tr><!---此行和上下两行相比少了一列定义，最后一个单元格实际上占了两列--><td>第12节</td><td>体育</td><td>大学英语</td><td>高等数学</td>网页设计表格全文共77页，当前为第56页。8.7横跨行和列

<tdcolspan="2"align="center">数据结构</td><!--此处定义了一个单元格占了两列--><!--此处少了一个单元格，因为上一单元格已经定义--></tr><tr><td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><td>数据结构实验</td><td>Web开发实验</td></tr><tr><tdcolspan="6">适用时间：2008~2009第一学期083007班</td></tr></table></body></html>网页设计表格全文共77页，当前为第57页。8.7横跨行和列网页设计表格全文共77页，当前为第58页。8.8表格标题表格标题就是对表格内容的简单说明，用<caption>标签实现。基本语法：<caption>…</caption>

网页设计表格全文共77页，当前为第59页。8.8表格标题<!--程序8-8-->…<tablewidth="600"border="1">

<caption>课程表</caption><tr><td>节次</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td></tr>…</table网页设计表格全文共77页，当前为第60页。8.8表格标题网页设计表格全文共77页，当前为第61页。8.9设置划分结构的表格为了清楚区分表格结构，为表格中相似的区域添加边界，HTML语言规定了<thead>、<tbody>、<tfoot>3个标签分别对应于表格的表首、表主体和表尾。基本语法：<thead>…</thead><tbody>…</tbody><tfoot>…</tfoot>网页设计表格全文共77页，当前为第62页。8.9设置划分结构的表格使用了<thead>、<tbody>、<tfoot>标签后，可以使用colgroup标签来标识列组，colgroup标签常用属性：属性属性值说明width%px定义列的宽度spannumber定义所要跨度列的数量alignleftcenterrightjustifychar定义表格单元格内或是列内文字的水平对齐方式valigntopmiddlebottombaseline定义表格单元格内或是列内文字的垂直对齐方式网页设计表格全文共77页，当前为第63页。8.9设置划分结构的表格<html><head><title>定义表格结构</title></head><body><tablewidth="800"border="1"><caption>课程表</caption><colgroupspan="2"style="color:#0000FF;"><colalign="left"style="background-color:#FF0000;"/><colalign="right"/>

</colgroup><thead><!--表格表头--><tr><th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><tr></thead>

网页设计表格全文共77页，当前为第64页。8.9设置划分结构的表格<tbody><!--表格表体--><tr><td>第12节</td><td>体育</td><td>大学英语</td><td>高等数学</td><td>数据结构实验</td><td>Web开发</td></tr><tr><td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><td>数据结构</td><td>Web开发实验</td></tr></tbody><tfoot><!--表格的页脚--><tr><tdcolspan="6">适用时间：2008~2009第一学期083008班</td></tr></tfoot></table></body></html>

网页设计表格全文共77页，当前为第65页。8.9设置划分结构的表格网页设计表格全文共77页，当前为第66页。8.10使用表格进行网页布局利用表格可以对网页进行布局。对网页进行布局时，需要使用表格的嵌套。表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格。对嵌套表格，可以像对任何其他表格一样进行格式设置，但是其宽度受它所在单元格的宽度的限制。利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的编排。不过，需要注意的是，嵌套层次越多，网页的载入速度就会越慢。网页设计表格全文共77页，当前为第67页。8.10使用表格进行网页布局

<!--程序8-10--><html><head><title>表格嵌套</title></head><body><tablewidth="700"border="1"cellpadding="0"cellspacing="0"align="center"><caption>课程表</caption><tr><tdwidth="100">083007班</td><td><!--此处嵌套了一个班的课程表--><tablewidth="100%"border="1"cellpadding="0"cellspacing="0"frame="void"><tr>网页设计表格全文共77页，当前为第68页。8.10使用表格进行网页布局

<th>节次</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td>第12节</td><td>体育</td><td>大学英语</td><td>高等数学</td><td>数据结构</td><td>Web开发</td></tr>

网页设计表格全文共77页，当前为第69页。8.10使用表格进行网页布局

<tr><td>第34节</td><td>大学英语</td><td>高等数学</td><td>数据结构</td>

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论