网站名称网站标题搜索框左边中间右边网站底部信息产生如下的表格:这是一张整体的表格,第一行和第四行分别跨度了三列,这里用colspan="3"来限制,而第" />
竭诚为您提供优质文档/双击可除html表格中图片铺满
篇一:html表格布局实例
[html]表格布局之实例版
|[>]
前面我们讲了html表格的基础知识,今天我们通过一个实例让大家更清晰的了解下表格的用途。
例如:我们做一个简单的网站布局,代码如下:
bordercolor="#00ff99">
网站名称
网站标题
搜索框
左边
中间
右边
网站底部信息
产生如下的表格:
这是一张整体的表格,第一行和第四行分别跨度了三列,这里用
colspan="3"来限制,而第二行的“搜索框”占用了两
列的位置,用colspan="2"控制;align="center"是对表格
内文字的对齐限制,center表示中间,right表示靠右,left 靠左。
表格的基础设置,可以参考:
[html]利用表格规划网站布局
[html]如何制作多行多列的表格
[html]设定表格的尺寸和边框
如果你现在可以根据自己的想法制作出一个表格了,那么你就是向自己制作模板迈近了一步。^o^
表格布局现在仍然很多人在用,方便实在。
网页设计现有两种布局方法,一种即是表格布局,另一种是现在w3c极力推荐的css布局。不过,就目前来说,由于xhtml并未完全占据主流,表格布局依然是大多数网页设计师的首选。
你所描述的问题属于表格的对齐问题,解决方式有以下几种:
如果两个表格的宽度不一致,那么选择默认的对齐方式,也即左对齐,在html中的标签和属性是:就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式,例如居中对齐,而第二个表格并没有设置对齐方式,所以默认为左对齐,这样就出现了上述问题。
我的一些表格布局的经验:
1、表格布局第一步:先插入一个表格,宽度是760-780px (记住,一定要用px,不要用百分比),高度不用设置,然
后令这个表格居中。以后所有的内容都限制在这个表格中。
2、熟练使用表格嵌套。也就是说,在一个表格中再插
入另一个表格。举个例子,把你要设计的页面分成大的几个部分,然后利用表格的行数和列数来控制它们的布局,如果某一个单元格中的内容又要分成几部分,可以继续在这个单元格中插入表格,方法同上。
3、补充:表格的边框一定要为0,即table中的border 属性值为"0"。也就是让表格在网页预览中不可见,这样才
能实现表格布局的目的。
如何利用表格实现画中画,也就是页中页效果
网页的排版大多使用表格,利用一个表个单元可以嵌入一个网页,你知道吗?这样做有很多好处,比如你把经常更
新的区域划分一个表格单元,然后在这个表
格单元中嵌入你想要更新的内容,今后更新主页只需上传这个被嵌套的页面就可以了,没有必要对首页进行更新,是不是很方便。我写个最简单的例子代码:<html><head>
<title>范例</title>
<body>
<tableborder="1"width="100%">
<tr>
<td>
<
iFRamesrc="example.htm"width="300"heitht="100"><
/iFRame></td>
</tr>
</table>
</body>
</html>
插入被嵌入页的关键代码是:<
iFRamesrc="example.htm"width="300"heitht="100"
></iFRame>。
example.htm是被嵌入的页面,标签<iFRame>还有一些可用的参数设置如下:marginwidth:网页中内容在表格右
侧的预留宽度;例如:marginwidth="20",单位是pix,下同。
marginheight:网页中内容在表格顶部预留的高度;
hspace:网页右上角的的横坐标;
vspace:网页右上角的纵坐标;
frameborder:是否显示边缘;填"1"表示"是",填"0"表示"否"
scrolling:是否出现滚动条;填"1"表示"是",填"0"表示"否"
表格背景图片的一个技巧
大家都知道在一个较大的表格中放入背景图片,背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小,比如下面的一个渐变图,你看上去像是一整张图片,它其实用的就是表格背景重复填充特性,而用的图片就是右边的那张,大小只有1.3k,在此如果要用一张大的图片是很不划算的。你若要插入一根水平线,用这方法也很有效。
如何使鼠标指到表格,表格背景变色
这个特效用的是表格样式表,要达到此效果你只需在<td>代码中加入
onmouseout="this.style.backgroundcolor="""onmouseov
er="this.style.backgroundcolor="#FFcccc"",例:表格布局常见问题解答
发布时间:20xx-05-20
1、表格布满页面的问题
我们在很多地方看到为了使页面适应不同的分辨率,通常将表格的大小按百分比设置。刚开始学做网页的时候,我已经把表格的宽度设置为100%,但在浏览器上还是不能满屏显示,四周总有一圈空白,我曾对此感到迷惑不解,后来在论坛请教才知道这不是表格的错。如果你用dreamweaver制作网页,这个问题很好解决,选择菜单modify-->pageproperties,在弹出的对话框里设置left、top为0就ok了!
2.表格的变形问题
网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况,这也是最另人恼火的事,怎么办呢秋实曾在天极网页陶吧撰文详细的阐述过这个问题,我们来看看他是怎么解决的。
a、因为表格排列设置而在不同分辨率下所出现的错位
这种变形情况是:
1、在800*600的分辨率下时,一切正常,而到了1024*800时,则多个表格或者有的居中,有的却
左排列或右排列,很难看,这是什么原因呢?
在解决这个问题之前,我们讲一下表格的排列。表格有左、中、右三种排列方式,如果没特别进行设置,则默认为居左排列,不用说了,这就是问题之所在。在800*600的分辨率下,表格恰好就有编辑区域那么宽,不容易察觉,而到了1024*800的时候,就出现的,解决的办法比较简单,即都设置为居中,或
左或右。
2、同样是这种分辨率切换,表格的上下排列不一致。
上边的所说的是水平错位,而这种则是纵向错位,多发生在一个表格单元里嵌入另一个表格的情况。其原因在于,嵌入的表格默认为竖向居中排列,在800*600分辨率时,这种错位看不出来,而到1024*800
就出现了,解决办法如前,根据情况对排列进行设置,而不是采用其默认设置。
b、采用百分比而出现的变形
这里所说的百分比是指表格的高或宽设置为上层标记
所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的,常出现在ie浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,这是因为表格的百分比也要
随
着窗口的大小而改变成相应的百分比宽度。
当然了,解决办法是不要设置成百分比,我提倡的是,如果表格没有外围嵌套标记,则将宽等设置成固定宽度,如有外围嵌套标记,则将外转嵌套标记的宽度设置为固定值,而表格的宽或高可设置为百分
比,这样就不会出现变形了。
c、表格单元格之间互相干扰引起的变形
这种变形情况通常是在工具里制作主页时没有空隙,而在浏览时却发现莫名其妙地多出一些空隙,
而又不知原因在哪,很是令人讨厌。
本人也经常遇到类似的情况,解决办法一是先看表格设置有没有上面所谈的两种情况,如没有,可
能就是在划分表格时,同一行的单元格之间相互牵制所出现的问题。
我们知道,同一行的表格单元在诸如dreamweaver或Frontpage中经常频繁地被拆分,所以,同一行的单元格与另一个单元格的宽与高不一致,这时,你就要注意两个单元格属性:colspan、rowspan。colspan表示的是横向扩展,而rowspan则表示的是纵向扩展,这个扩展的意思即当前表格单元相邻的横向与竖向
的表格单元数,也可这样理解为表格单元的高或宽是相
HTML语言源代码实例1.第一个HTML示例
3.强制不换行标签
1.下面设定网页15秒后自动跳转到哈尔滨师范大学网站首面的正确代码是(C )。 A. B. C. D. 2.在HTML页面中插入半角的大于号>,应使用的代码是(D)。 A. ± B. ¢ C. < D. > 3.下面的文字修饰标记中,可以给文字加删除线的标记是(B)。 A. B. 常用html语言表 一、HTML各种命令的代码: 1、文本标签(命令) 将段落按左、中、右对齐 html背景颜色代码大全 aliceblue (#F0F8FF )antiquewhite (#FAEBD7 )王水 (#00FFFF )海蓝宝石 (#7FFFD4 ) 湛蓝 (#F0FFFF )米色 (#F5F5DC )浓汤 (#FFE4C4 )黑色 (#000000 )blanchedalmond (#FFEBCD )蓝色 (#0000FF )blueviolet (#8A2BE2 )棕色 (#A52A2A ) burlywood (#DEB887 )cadetblue (#5F9EA0 )沙特勒斯 (#7FFF00 )巧克力 (#D2691E ) 珊瑚 (#FF7F50 )cornflowerblue (#6495ED )cornsilk (#FFF8DC )深红 (#DC143C ) 青色 (#00FFFF )darkblue (#00008B )darkcyan (#008B8B )darkgoldenrod (#B8860B ) darkgray (#A9A9A9 )darkgreen (#006400 )darkkhaki (#BDB76B )darkmagenta (#8B008B )darkolivegreen (#556B2F )darkorange (#FF8C00 )darkorchid (#9932CC )darkred (#8B0000 ) darksalmon (#E9967A )darkseagreen (#8FBC8B )darkslateblue (#483D8B )darkslategray (#2F4F4F ) darkturquoise (#00CED1 )darkviolet (#9400D3 )deeppink (#FF1493 )deepskyblue (#00BFFF ) dimgray (#696969 )dodgerblue (#1E90FF )耐火砖 (#B22222 )floralwhite (#FFFAF0 ) forestgreen (#228B22 )紫红色 (#FF00FF )gainsboro (#DCDCDC )ghostwhite (#F8F8FF ) 黄金 (#FFD700 )一枝黄花 (#DAA520 )灰色 (#808080 )绿色 (#008000 ) greenyellow (#ADFF2F )甘露 (#F0FFF0 )hotpink (#FF69B4 )indianred (#CD5C5C ) 靛蓝 (#4B0082 )象牙 (#FFFFF0 )卡其 (#F0E68C )薰衣草 (#E6E6FA ) lavenderblush (#FFF0F5 )lawngreen (#7CFC00 )lemonchiffon (#FFFACD )lightblue (#ADD8E6 ) lightcoral (#F08080 )lightcyan (#E0FFFF )lightgoldenrodyellow (#FAFAD2 )lightgreen (#90EE90 ) lightgrey 1、文字大小、颜色、加粗、倾斜的代码 *文字加大、加色的代码是:;文字 效果:文字 font size 的参数范围1 至7;最大字体为7 (若要再大须用font style 的代码。参看本帖第10条阴影字)*文字加粗的代码是:;文字 *文字倾斜的代码是;文字 *底线字:文字 2、文字对齐的代码: 靠左对齐: 文字 置中对齐: 文字 靠右对齐: 文字 3、插入文字链接的代码: 不另开视窗的链接代码:椰风蕉雨另打开一个新视窗的代码: target="_blank">椰风蕉雨 一、选择题 1.HTML 文件必须使用 htm 或者(B)作为文件扩展名。 A.doc B. html C. jsp D. aspx 2.HTMl是指(A)。 A.超文本标签语言 B. 汇编语言 C. 服务端端语言 D.脚本语言 3.WWW是(B)的意思。 A.网页B.万维网C.浏览器D.超文本传输协议 4.在网页中显示特殊字符,如果要输入“<”,应使用(D)。 A.lt; B.≪ C.< D.< 5.以下说法中,错误的是:(D)。 A.获取WWW服务时,需要使用浏览器作为客户端程序。 B.WWW服务和电子邮件服务是Internet提供的最常用的两种服务。 C.网站就是一系列逻辑上可以视为一个整体的页面的集合。 D.所有网页的扩展名都是 .htm。 6.以下说法中,错误的是:(B)。 A.网页的本质就是HTML源代码。 B.网页就是主页。 C.使用“记事本”编辑网页时,通常应将其保存为 .htm 或 .html 后缀。 D.本地网站通常就是一个完整的文件夹。 7.浏览网页时,通常使用以下协议:(C)。 A.mailto B.FTP C.HTTP D.TCP/IP 8.在网页中显示特殊字符,如果要输入空格,应使用(D)。 A.nbsp; B.&Nbsp; C.  D. 9.以下软件中,不能直接用来编辑 HTML 文件的是:(C)。 A.记事本 B.FrontPage C.Flash D.Dreamweaver 10.以下有关 HTML 标记符的属性的说法中,错误的是:(C)。 A.在HTML中,所有的属性都放置在开始标记符的尖括号里。 B.属性与HTML标记符的名称之间用空格分隔。 C.属性的值放在相应属性之后,用等号分隔;而不同的属性之间用分号分隔。 D.HTML 属性通常也不区分大小写。 二、填空题 1.如果要为网页指定黑色的背景颜色,应使用以下html语句: HTML 常用代码大全 Html 常用代码 1.文件类型 (放在档案的开头与结尾) 2.文件主题 HTML5 常用语法一览 HTML头部标记 元信息标记属性 注:HTML5中不支持scheme属性,新增charset属性,具体查看:HTML5 标签HTML 主体标记 标题字标记 注: 具体查看 HTML5 字体标记属性 注:请查看HTML 5 标签 在 HTML 4.01 中,不赞成使用该元素。 在 HTML 5 中,不支持该元素,但是允许由所见即所得的编辑器来插入该元素。在 HTML 5 中,仅支持 style 属性。 列表标记 超链接标记 链接目标窗口属性target 图片标记属性 图片排列align属性值 注:请查看HTML 5 标签表格标记 注:在 HTML 5 中, 不支持 C. D. 4.下面表示文件的地址中,属于相对地址的是(. A)。 5.中国大陆常用的字符集是(A)。 A. GB2312 B. BIG5 C. ASCII D. ISO8859-1 6.HTML的颜色属性值中,RED的代码是( D ) A.″#808080″B.″#0000FF″C.″#00FF00″D.″#FF0000″ 7.在HTML页面中输入半角的空格,应使用的代码是(A)。 A. B. #nbsp; C. &Space; D. #Space; 8.下面的文字修饰标记中,可以令文字用显示为下标的标记是(D)。 A. B. C. D. A. contents/1_1.html B. FTP://192.168.0.222 C. https://www.doczj.com/doc/a713537417.html, D. /WebSites/News/Index.html 9.在HTML文档中,排列内容的最佳手段是使用(C)。 10.要从为文字“转至第3章第2节”建立超连接,以实现单击该文字后在新窗口中打开文档Chapt3.html(该文档与当前文档在同一目录下),并定位到书签“Sect_2”,正确代码是(B)。 A. 第3章第2节 B. 第3章第2节 C. 第3章第2节 D. 第3章第2节 11.在HTML文档中,要定义一个宽400像素,高200像素的表格,正确的标记是(D)。 A.
B.
C.
D.
12.在使用表格标记
,则下面说法正确的是(B)。 A. 表格显示上下外边框 B. 表格只显示右边框 C. 表格只显示左边框 D. 表格显示左右边框 13.把窗口分割成上下两个框架,高度分别为40%和60%,正确的代码是(D)。 A. B. C. D. 14 网页的基本构成元素不包括( D )。 A 文本 B 图像 C 超连接 D 角本
常用html语言表
加入一条水平线
设置水平线的大小(高度)
设置水平线的宽度(百分比或绝对像素点)
创建一个没有阴影的水平线 3、链接(命令) 创建一个超链接 创建一个自动发送电子邮件的链接 创建一个位于文档内部的靶位 创建一个指向位于文档内部靶位的链接 4、格式排版(命令) 创建一个新的段落
插入一个回车换行符 创建一个定义列表
创建一个标有数字的列表
创建一个标有圆点的列表
html背景颜色
html常用代码
, 这样就会分成两行显示,整个贴文看起来也不会是一大片了,而是段落分明。网页设计与制作试题html基础)有答案
html常用代码大全
(显示原始码之用) 12 小字 13 下标 14 上标 15 居中
HTML5 常用语法一览表
至
标签 在 HTML 4.01 中,h1 - h6 元素的 "align" 属性不被赞成使用。在 HTML 5 中,h1 - h6 元素的 "align" 属性不被支持。 文字的修饰标记
标签的任何属性。 不支持
标签的任何属性。 仅支持 标签 "colspan" 和 "rowspan" 属性。 表单标记