HTML表格、框架-使用大全

本节小结本节小结思考题框架表格主页静态网站设计网络技术系：李毓丽本节小结本节小结思考题框架表格主页使用表格•制作表格•添加或删除行和列•格式化表格•为表格添加题注•嵌套表格本节小结本节小结思考题框架表格主页表格在网页中除了作为一个显示对象以外，还有一个重要的作用就是用于排版页面内容制作表格本节小结本节小结思考题框架表格主页表格标记标记描述TABLE在HTML文档中创始一个表格TR在表格中创建一行TD在一行中创建一个单元格TH在一行中创建一个标题单元格CAPTION为表格创建题注本节小结本节小结思考题框架表格主页基本语法tabletrth…/th……/trtrtd…/td……/tr……/tableth与td标记不同的地方是th/th之间的内容会加粗且默认居中显示，而td/td之间的内容则不加粗且默认居左显示本节小结本节小结思考题框架表格主页表格示例示例代码本节小结本节小结思考题框架表格主页•表格中每一行使用一个tr/tr表示；行中的每一列使用一个td/td或th/th表示•添加或删除行和列可以分别通过添加或删除行和列标记来实现添加或删除行和列本节小结本节小结思考题框架表格主页添加或删除行和列实现方法•添加新行–可以通过插入额外的TR和TD标记来添加新的一行•在表内创建新列–可以通过对每一行添加TH或TD标记在表格中创建新的列•删除表中的行和列–可以通过删除包围指定行和列的TD标记和TR标记来删除表格中的列和行本节小结本节小结思考题框架表格主页表格的格式化包括以下一些内容：•为表格添加边框及设置边框粗细及边框颜色•为表格添加背景图像或背景颜色•指定表格的对齐方式•设置表格的宽度、高度•设置表格单元格内容与边框的间距及单元格之间的间距•指定行、列的背景图像或背景颜色•指定行、列内容的对齐方式•设置行、列的边框颜色•设置行、列的宽度和高度•单元格的跨行和跨列设置格式化表格本节小结本节小结思考题框架表格主页表格属性属性描述border设置表格边框宽度，单位为像素（默认不显示边框），设置border=0将取消边框width设置表格宽度，单位为像素或浏览器窗口的百分比height设置表格高度，单位为像素或浏览器窗口的百分比Bordercolor、bordercolordark、bordercolorlight设置表格边框颜色/亮边框颜色（左上边框颜色）/暗边框颜色（右下边框颜色）bgcolor设置表格的背景颜色background设置表格的背景图像cellspacing设置相邻单元格之间的间距cellpadding设置单元格边框与内容的间距align设置表格的水平对齐（默认左对齐）本节小结本节小结思考题框架表格主页表格标记属性设置语法tableborder=“value”bordercolor=“color_value”bordercolorlight=“color_value”bordercolordark=“color_value”bgcolor=“color_value”background=“image_path”width=“value”height=“value”align=“left/center/right”cellspacing=“value”cellpadding=“value”本节小结本节小结思考题框架表格主页表格标记属性示例示例代码本节小结本节小结思考题框架表格主页行标记TR属性属性描述align设置行中各单元格内容的水平对齐方式（默认左对齐）valign行中各单元格内容内容的垂直对齐方式（默认居中对齐bgcolor设置行的背景颜色background设置行的背景图像bordercolor设置行的边框颜色bordercolorlight设置行的亮边框颜色（右下边框颜色）bordercolordark设置行的暗边框颜色（左下边框颜色）本节小结本节小结思考题框架表格主页行标记属性设置语法tralign=“left/center/right”valign=“left/center/right”bordercolor=“color_value”bordercolorlight=“color_value”bordercolordark=“color_value”bgcolor=“color_value”background=“image_path”本节小结本节小结思考题框架表格主页行标记属性示例示例代码本节小结本节小结思考题框架表格主页TD、TH标记属性属性描述align设置单元格内容的水平对齐方式（td的默认左对齐，th的默认居中对齐）valign设置单元格内容的垂直对齐（默认居中对齐）bgcolor设置单元格的背景颜色background设置单元格的背景图像bordercolor设置单元格的边框颜色bordercolorlight设置单元格的亮边框颜色（右下边框颜色）bordercolordark设置单元格的暗边框颜色（左上边框颜色）width设置单元格的宽度，单位为像素或表格宽度的百分比height设置单元格的高度rowspan设置单元格的跨行操作colspan设置单元格的跨列操作nowrap当文本的宽度超过单元格宽度时，不允许文本在单元格内换行。所有文本在一行内显示本节小结本节小结思考题框架表格主页单元格宽度属性解释•如果没有设置单元格宽度，则浏览器将会根据单元格中的内容来自动调整单元格的宽度•如果设置了单元格宽度，但没有设置nowarp属性，则单元格中的内容在超出了单元格宽度设置允许的情况下自动对文本进行换行显示•如果设置了单元格宽度，但同时又设置了nowarp属性，则此时，单元格宽度设置不起作用，所有文本将在一行内显示本节小结本节小结思考题框架表格主页单元格标记属性设置语法tdalign=“left/center/right”valign=“left/center/right”bordercolor=“color_value”bordercolorlight=“color_value”bordercolordark=“color_value”bgcolor=“color_value”background=“image_path”width=“value”height=“value”rowspan=“value”colspan=“value”nowrap本节小结本节小结思考题框架表格主页单元格标记属性示例示例代码本节小结本节小结思考题框架表格主页表格各标记属性设置的注意事项※表格标记中的bordercolorlight、bordercolordark颜色显示的位置正好跟行标记及单元格标记中的这两个属性相反※内层的边框颜色设置会和外层的边框颜色混合成另一种颜色※同时设置背景颜色和背景图像时，背景颜色将被背景图像覆盖掉※只有较新版的浏览器才支持背景颜色和背景图像的设置，不支持背景图像的设置的浏览器会显示浏览器的默认背景颜色来代替图像本节小结本节小结思考题框架表格主页背景图像属性设置的规则•选择基本上不传达信息的小巧而精致的图像•选择带有较少形状、模式或颜色的简单图像•选择能够突出文档意图的图像•在尽可能多的浏览器中查看带有表格背景图像的HTML文档，确保跨浏览器的兼容性本节小结本节小结思考题框架表格主页背景颜色属性设置的规则•如果文本颜色是深色的，应该选择浅色作为背景颜色•如果文本颜色是浅色的，应该选择深色作为背景颜色•选择在美学角度来看令人愉快的颜色•如果表述的主题是快节奏或激动人心的，应该选择明快的颜色•如果表述的是慢节奏和基调忧郁的内容，应该选择暗淡的颜色•始终选择216种无抖动颜色之一本节小结本节小结思考题框架表格主页•表格题注作用：•概括表格的内容•提供关于表格内容的一些信息•基本语法caption…/caption•语法解释caption标记之间的就是表格的标题，这个标记必须在table标记对之内使用为表格添加题注本节小结本节小结思考题框架表格主页caption标记对齐属性属性描述align设置水平对齐方式，取值：left/center/right，默认取centervalign设置垂直对齐方式，取值：top/bottom，默认取top本节小结本节小结思考题框架表格主页表格题注设置示例示例代码本节小结本节小结思考题框架表格主页•在网页中，排版通常需要通过表格的嵌套来完成•表格的嵌套是指在一个表格的单元格中插入另一个表格嵌套表格本节小结本节小结思考题框架表格主页表格嵌套设置示例示例代码本节小结本节小结思考题框架表格主页•在网页排版中使用嵌套表格的原因有二：•一是利于简化表格制作：网页的排版有时会很复杂，在外部需要有一个表格控制总体布局，如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难•二是提高浏览器响应速度：浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，表格下载耗时相对长，浏览者要等很长时间才能看到网页的内容本节小结本节小结思考题框架表格主页小结制作表格时需要同时使用tabletrtd或th标记对表格的内容必须放置在td/td或th/th之间每一行必须使用一个tr/tr标记对行中的所有列都必须放置在tr/tr标记对之间通过表格、行及单元格标记的属性，可以对表格进行格式化，如设置显示边框、边框宽度、边框颜色等本节小结本节小结思考题框架表格主页在排版网页时通常需要嵌套表格，所谓表格的嵌套，是指在一个表格的单元格中插入另一个表格小结本节小结本节小结思考题框架表格主页思考题1.在显示表格边框，应如何设置？2.如何设置表格的宽度、高度、对齐方式、边框颜色、单元格间距及单元格边距？3.如何设置单元格的对齐方式、背景颜色、背景图像?4.在网页排版时，应如何嵌套表格?本节小结本节小结思考题框架表格主页使用框架结构•框架概述•框架结构组成标记•框架集标记frameset•框架标记frame•不支持框架标记noframe•浮动框架iframe•框架与链接本节小结本节小结思考题框架表格主页框架概述•HTML框架允许在浏览器中同时显示多个HTML文档–多个页面能够同时在同一浏览器可独立滚动的窗口中显示–用来把浏览器窗口分成几个独立的部分–每一部分可以分别包含一个单独的HTML文档•借助于框架分割浏览器窗口可以显著改进外观和可用性本节小结本节小结思考题框架表格主页框架的特征•可以水平或垂直分割•垂直框架具有垂直边框•水平框架具有水平边框•也可以在框架中嵌套框架•在定义框架间的交互之前必须先设定布局本节小结本节小结思考题框架表格主页使用框架的优点•使网页内容看起来更美观•减少了网站的下载时间•提高了网站的可用性•导航部分仍然可见，因为内容在单独的框架中改变•框架允许开发者将内容与导航和结构元素分离•有助于轻松、快速地更新内容本节小结本节小结思考题框架表格主页使用框架的缺点•老版本的浏览器不支持框架•开发者需要创建并组织多个文件来充实页面，使站点创建更复杂•框架结构的Web站点不允许访问者在一个框架结构的文档中为页面加入书签•框架结构的Web站点会增加服务器负载，导致过多的文档请求•框架结构的Web站点会使搜索引擎产生问题•在框架结构的Web站点中很难跟踪一个页面本节小结本节小结思考题框架表格主页创建框架•确定要创建的框架大小•创建框架集文档，确定各框架的位置和特性•指定框架和其中的内容•格式化框架•预先为在非框架结构的浏览器中显示框架做好准备※注意：使用框架结构时，HTML文档中不能出现body标记对，此时body需要由frameset代替本节小结本节小结思考题框架表格主页框架结构组成标记•框架集标记FRAMESET：主要是定义浏览器窗口的分割方式，以及各分割窗口（框