if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="/m/view.php?aid=3";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}
织梦CMS - 轻松建站从此开始!

金冠娱乐_金冠娱乐场 上海精控光纤设备有限公司

当前位置: 主页 > 网页基础 > HTML >

网页中应用表格爱好者

时间:2010-04-07 09:29来源: 作者: 点击:
你认为已经知道怎么制做表格了吧。当然,你已经了解 table、tr、td和th标签了,甚至还在你的口袋里装入了rowspan和colspan。你确实可以制做一个精美小巧的咖啡色三合板桌子(表格),但难道你不想做一个优雅稳固,上面有玻璃的,足以承受一头大笨象的宴会桌(
会组合头两列。当在colgroup使用span时,不应该再使用col标签。

在col里使用span是更明智的,可以,比如,应用在上述例子像这样:

var _mda_place_id ="58bcc82381892";

你认为已经知道怎么制做表格了吧。当然,你已经了解 table、tr、td和th标签了,甚至还在你的口袋里装入了rowspan和colspan。你确实可以制做一个精美小巧的咖啡色三合板桌子(表格),但难道你不想做一个优雅稳固,上面有玻璃的,足以承受一头大笨象的宴会桌(表格)?

列反罢工

表格行简直使表格列看起来很愚蠢。同样的工作,表格由行与行构建,让列感到十分沮丧。

但是很幸运,colgroup和col标签来拯救热心的列了。

这两个标签允许你定义表格列和尽你所需地样式化它们,对于你需要把列排成行或不同着色特别有用,如果没有它们,你需要样式化每一个单独的单元格。

这是一个使用这些标签的例子:













ThisThatThe other
LadybirdLocustLunch

alternate类的样式将被应用到第二列,或者说每一行的第二个单元格。

你当然可以在colgroup或者col上使用span属性,跟rowspan和colspan有相似的用途

colgroup一起使用可以定义属于列组的行数,比如



 ...

这将把alternate类应用到最后两列。

注意

哦,但是可能有一个陷井,不是吗?那就是:你仅能样式化列的是边框、背景、宽度和可见性。

Internet Explorer在这方面看起来比其他浏览器表现更好因为它装载有漂亮的CSS属性比如 color,但是,正如结果一样,这是因为它疯狂古怪的行为而已。这种奇特的异常可以让Ian Hixie来解释。

摘要和说明插曲

一个简要和容易的提高易用性的思考是,总是为表格应用摘要和说明。

摘要可以在表格起始标签table中用summary属性应用到表格中。这不会显示,但可以辅助非可视化的表格表现。

caption标签在起始标签table后直接定义说明。它默认直接在表格顶端出现,但可以在CSS属性caption-side中设置top、right、bottom或者left值,尽管IE不会在意。



...

表头、表注和滚动表格的探讨

thead、tfoot和tbody允许你把表格分为表头、表注和表格主体。对于大表格尤其有用,在打印的时候,表头和表注应该会在每一页都出现。

这些元素必须按thead-tfoot-tbody的顺序定义,像这样:

Locust mating habits





















 ...

Header 1Header 2Header 3
Footer 1Footer 2Footer 3
Cell 1Cell 2Cell 3

你可以让表格主体tbody在基于Gecko的浏览器(Mozilla、Firefox和Netscape 6+等)滚动,通过应用overflow: auto; max-height: [whatever] 的样式。然后你可以看见表头和表注固定,而表的主体右边有滚动条。你应该谨慎使用max-height属性因为IE不认识,比较安全的做法是使用 height属性,IE将为它应用到每一行。

注意:说回浏览器的差异,目前IE遇到表头和表注时还是没有什么线索,尽管还是当作表格来处理,但打印的时候不会在哦每一页都出现表头和表注,只孤零零地传递滚动的表格。

注意

谨慎对待滚动表格。尽管它们提供十分有用的目的,大部分用户不习惯它们并且认为线性数据是唯一的。

(责任编辑:admin)
织梦二维码生成器 var __dedeqrcode_id=3; var __dedeqrcode_aid=3; var __dedeqrcode_type='arc'; var __dedeqrcode_dir='/plus';
顶一下
(0)
0%
踩一下
(0)
0%
getDigg(3);
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
function LoadCommets(page) { var taget_obj = document.getElementById('commetcontent'); var waithtml = "
评论加载中...
"; var myajax = new DedeAjax(taget_obj, true, true, '', 'x', waithtml); myajax.SendGet2("/plus/feedback_ajax.php?dopost=getlist&aid=3&page="+page); DedeXHTTP = null; } function PostComment() { var f = document.feedback; var nface = '6'; var nfeedbacktype = 'feedback'; var nvalidate = ''; var nnotuser = ''; var nusername = ''; var npwd = ''; var taget_obj = $DE('commetcontentNew'); var waithtml = "
正在发送中...
"; if(f.msg.value=='') { alert("评论内容不能为空!"); return; } if(f.validate) { if(f.validate.value=='') { alert("请填写验证码!"); return; } else { nvalidate = f.validate.value; } } if(f.msg.value.length > 500) { alert("你的评论是不是太长了?请填写500字以内的评论。"); return; } if(f.feedbacktype) { for(var i=0; i < f.feedbacktype.length; i++) if(f.feedbacktype[i].checked) nfeedbacktype = f.feedbacktype[i].value; } if(f.face) { for(var j=0; j < f.face.length; j++) if(f.face[j].checked) nface = f.face[j].value; } if(f.notuser.checked) nnotuser = '1'; if(f.username) nusername = f.username.value; if(f.pwd) npwd = f.pwd.value; var myajax = new DedeAjax(taget_obj, false, true, '', '', waithtml); myajax.sendlang = 'utf-8'; myajax.AddKeyN('dopost', 'send'); myajax.AddKeyN('aid', '3'); myajax.AddKeyN('fid', f.fid.value); myajax.AddKeyN('face', nface); myajax.AddKeyN('feedbacktype', nfeedbacktype); myajax.AddKeyN('validate', nvalidate); myajax.AddKeyN('notuser', nnotuser); myajax.AddKeyN('username', nusername); myajax.AddKeyN('pwd', npwd); myajax.AddKeyN('msg', f.msg.value); myajax.SendPost2('/plus/feedback_ajax.php'); f.msg.value = ''; f.fid.value = 0; if(f.validate) { if($DE('validateimg')) $DE('validateimg').src = "/include/vdimgck.php?"+f.validate.value; f.validate.value = ''; } } function quoteCommet(fid) { document.feedback.fid.value = fid; } LoadCommets(1);
栏目列表
var _mda_place_id ="58bcc92e8b472";
推荐内容
var _mda_place_id ="58bcc82381892";
var _mda_place_id ="58bce8309bc21";
var contentRtPicAD2 = document.getElementById("contentRtPicAD2"); var stop = contentRtPicAD2.offsetTop - 60, docBody = document.documentElement || document.body.parentNode || document.body, hasOffset = window.pageYOffset !== undefined, scrollTop; window.onscroll = function (e) { // cross-browser compatible scrollTop. scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop; if (scrollTop >= stop) { contentRtPicAD2.className = 'stick'; } else { contentRtPicAD2.className = ''; } }