HTML表格、框架-使用大全.pptx

静态网站设计
网络技术系：李毓丽
使用表格
制作表格
添加或删除行和列
格式化表格
为表格添加题注
嵌套表格
表格在网页中除了作为一个显示对象以外，还有一个重要的作用就是用于排版页面内容
制作表格
表格标描 述
align
设置单元格内容的水平对齐方式（td的默认左对齐，th的默认居中对齐）
valign
设置单元格内容的垂直对齐（默认居中对齐）
bgcolor
设置单元格的背景颜色
background
设置单元格的背景图像
bordercolor
设置单元格的边框颜色
bordercolorlight
设置单元格的亮边框颜色（右下边框颜色）
bordercolordark
设置单元格的暗边框颜色（左上边框颜色）
width
设置单元格的宽度，单位为像素或表格宽度的百分比
height
设置单元格的高度
rowspan
设置单元格的跨行操作
colspan
设置单元格的跨列操作
nowrap
当文本的宽度超过单元格宽度时，不允许文本在单元格内换行。所有文本在一行内显示
单元格宽度属性解释
如果没有设置单元格宽度，那么浏览器将会根据单元格中的内容来自动调整单元格的宽度
如果设置了单元格宽度，但没有设置nowarp属性，那么单元格中的内容在超出了单元格宽度设置允许的情况下自动对文本进行换行显示
如果设置了单元格宽度，但同时又设置了nowarp属性，那么此时，单元格宽度设置不起作用，所有文本将在一行内显示
单元格标记属性设置语法
<td align=“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，默认取center
valign
设置垂直对齐方式，取值：top/bottom，默认取top
表格题注设置例如
示例代码
在网页中，排版通常需要通过表格的嵌套来完成
表格的嵌套是指在一个表格的单元格中插入另一个表格
嵌套表格
表格嵌套设置例如
示例代码
在网页排版中使用嵌套表格的原因有二：
一是利于简化表格制作：网页的排版有时会很复杂，在外部需要有一个表格控制总体布局，如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难
二是提高浏览器响应速度：浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，表格下载耗时相对长，浏览者要等很长时间才能看到网页的内容
小 结
制作表格时需要同时使用<table