|
锁定老帖子 主题：table 原来还可以这样用啊
该帖已经被评为隐藏帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-10-27
liyiye 写道 kaipingk@gmail.com 写道 支持zbm2001, 学一种东西就要学精，学专，看看现在国内好多网站都是一塌糊涂。 做一个网站是需要很多方面的知识，难道你为了做一个网站把所有的知识点都学透，学深。现实是没有给你太多的时间，让你去研究的，所以我不同意你的看法。当然如果你只是负责其中的一个小的方面，例如只是用html写一些页面，那你当然可以把这个学的很深，很透彻。但是那样又有什么意义啊？ 举个很简单的例子 比如上面列举的<theade> <th><tfoot> 标签，如果你要实现一个表头特殊的效果。如果你不知道有这几个标签，你想到应该是这样子的代码吧 <table> <tr class="table_header"> <td>表头</td> </tr> <tr> <td>neirong</td> </tr> </table> 这样虽然能达到你要的效果。但是在很多方面都有不好的地方。可用性啊，语义性啊。 并且css写起来也会麻烦一下。 所以说基础知识还是很重要的。在时间不允许的时候做一些折中的做法我觉得是可以的，但是如果你发现重复了N遍之后你还是再折中的话，我觉得有必要反思一下了。 |
| 返回顶楼 | |
|
发表时间：2008-10-27
pipilu 写道 汗，才发现好多人说firefox不支持。 我回头看了一下我以前做过的页面，发现应该是ie6和ie7不支持啊。 试了一下。 发现firefox支持对col定义的样式，但对通过col操纵column不支持（比如根据col的id获得col对象后，操纵它的显示和隐藏） 我那个所说的“ie不支持 firefox支持”的情况很凑巧，是这样的： Java代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title></title> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var status = 1; function hiddenCol() { if (status == 1) { document.getElementById("col1").style.display = "none"; status = 0; } else { document.getElementById("col1").style.display = "block"; status = 1; } } //--><!]]> </script> <style type="text/css" media="all"> <!--/*--><![CDATA[/*><!--*/ table { background: #FFFFFF; border-collapse: collapse; } col { border-right: 5px #FF0000 solid; } #col1 { background: #FFF000; } /*]]>*/--> </style> </head> <body> <table cellspacing="0" border="1"> <colgroup> <col id="col1" /> <col id="col2" /> </colgroup> <tbody> <tr><td id="111">asdf</td> <td>asdf</td> </tr> </tbody> </table> <button onclick="hiddenCol()">隐藏列</button> </body> </html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title></title> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var status = 1; function hiddenCol() { if (status == 1) { document.getElementById("col1").style.display = "none"; status = 0; } else { document.getElementById("col1").style.display = "block"; status = 1; } } //--><!]]> </script> <style type="text/css" media="all"> <!--/*--><![CDATA[/*><!--*/ table { background: #FFFFFF; border-collapse: collapse; } col { border-right: 5px #FF0000 solid; } #col1 { background: #FFF000; } /*]]>*/--> </style> </head> <body> <table cellspacing="0" border="1"> <colgroup> <col id="col1" /> <col id="col2" /> </colgroup> <tbody> <tr><td id="111">asdf</td> <td>asdf</td> </tr> </tbody> </table> <button onclick="hiddenCol()">隐藏列</button> </body> </html> 在firefox下，列的红色右边界（就是col那个样式）可以看到。在ie下就不行。 只是简单的试了一下。 我也试了一下，好像两个浏览器对它的解释不同，不是不支持javascript，在firefox下，当你对col的样式设置为隐藏的时候，它的其它样式是显示不了，相当与隐藏了（你直接在col里面设置样式就可以看到）。 |
| 返回顶楼 | |
|
发表时间：2008-10-27
reeze 写道 liyiye 写道kaipingk@gmail.com 写道 支持zbm2001, 学一种东西就要学精，学专，看看现在国内好多网站都是一塌糊涂。 做一个网站是需要很多方面的知识，难道你为了做一个网站把所有的知识点都学透，学深。现实是没有给你太多的时间，让你去研究的，所以我不同意你的看法。当然如果你只是负责其中的一个小的方面，例如只是用html写一些页面，那你当然可以把这个学的很深，很透彻。但是那样又有什么意义啊？ 举个很简单的例子 比如上面列举的<theade> <th><tfoot> 标签，如果你要实现一个表头特殊的效果。如果你不知道有这几个标签，你想到应该是这样子的代码吧 <table> <tr class="table_header"> <td>表头</td> </tr> <tr> <td>neirong</td> </tr> </table> 这样虽然能达到你要的效果。但是在很多方面都有不好的地方。可用性啊，语义性啊。 并且css写起来也会麻烦一下。 所以说基础知识还是很重要的。在时间不允许的时候做一些折中的做法我觉得是可以的，但是如果你发现重复了N遍之后你还是再折中的话，我觉得有必要反思一下了。 基础知识很重要，这个是不可否认的。我一直强调，知识点要先博而后精，像你举的例子一样，你如果不知道有更好的东西，而一味用一些很复杂的东西，还一直想去专研它，那样只是浪费时间而已啊。----个人的一下看法 |
| 返回顶楼 | |
|
发表时间：2008-10-27
楼主说的这个好像在FIREFOX里不能用呀！
不知道这些标签符合W3标准码？ |
| 返回顶楼 | |
|
发表时间：2008-10-27
vs2008 效果圖
這些標記看文檔很累，工具對人幫助比較大 |
| 返回顶楼 | |
|
发表时间：2008-10-27
没错，术业有专攻，做为一个后端程序员把这些让给前端工程师研究吧。
|
| 返回顶楼 | |
|
发表时间：2008-10-28
学习你们经验！
|
| 返回顶楼 | |
|
发表时间：2008-10-28
给一个id,document.getElementById('id').style.display="none";这样也可以啊！看你想实现什么样的功能了，也可以：
var headTable = document.getElementById("headerTable"); dynTr = headTable.insertRow(-1); var tdLableElement1 = dynTr.insertCell(0); tdLableElement1.className = "label1"; var lableElement1 = document.createElement("LABEL"); var txtNode1 = document.createTextNode("Mothly"); lableElement1.appendChild(txtNode1); tdLableElement1.appendChild(lableElement1); |
| 返回顶楼 | |
|
发表时间：2008-10-28
liyiye 写道 pipilu 写道 汗，才发现好多人说firefox不支持。 我回头看了一下我以前做过的页面，发现应该是ie6和ie7不支持啊。 试了一下。 发现firefox支持对col定义的样式，但对通过col操纵column不支持（比如根据col的id获得col对象后，操纵它的显示和隐藏） 我那个所说的“ie不支持 firefox支持”的情况很凑巧，是这样的： Java代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title></title> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var status = 1; function hiddenCol() { if (status == 1) { document.getElementById("col1").style.display = "none"; status = 0; } else { document.getElementById("col1").style.display = "block"; status = 1; } } //--><!]]> </script> <style type="text/css" media="all"> <!--/*--><![CDATA[/*><!--*/ table { background: #FFFFFF; border-collapse: collapse; } col { border-right: 5px #FF0000 solid; } #col1 { background: #FFF000; } /*]]>*/--> </style> </head> <body> <table cellspacing="0" border="1"> <colgroup> <col id="col1" /> <col id="col2" /> </colgroup> <tbody> <tr><td id="111">asdf</td> <td>asdf</td> </tr> </tbody> </table> <button onclick="hiddenCol()">隐藏列</button> </body> </html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title></title> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var status = 1; function hiddenCol() { if (status == 1) { document.getElementById("col1").style.display = "none"; status = 0; } else { document.getElementById("col1").style.display = "block"; status = 1; } } //--><!]]> </script> <style type="text/css" media="all"> <!--/*--><![CDATA[/*><!--*/ table { background: #FFFFFF; border-collapse: collapse; } col { border-right: 5px #FF0000 solid; } #col1 { background: #FFF000; } /*]]>*/--> </style> </head> <body> <table cellspacing="0" border="1"> <colgroup> <col id="col1" /> <col id="col2" /> </colgroup> <tbody> <tr><td id="111">asdf</td> <td>asdf</td> </tr> </tbody> </table> <button onclick="hiddenCol()">隐藏列</button> </body> </html> 在firefox下，列的红色右边界（就是col那个样式）可以看到。在ie下就不行。 只是简单的试了一下。 我也试了一下，好像两个浏览器对它的解释不同，不是不支持javascript，在firefox下，当你对col的样式设置为隐藏的时候，它的其它样式是显示不了，相当与隐藏了（你直接在col里面设置样式就可以看到）。 那firefox下的表现应该是正确的。ie6下的表现就比较费解了，原因如下： 使用这样的javascript语句来移除第一个col：
var elem =document.getElementById("col1");
elem.parentNode.removeChild(elem);
这种情况下ie6和firefox下的表现是一样的。但remove和display:none的表现应该是一样的啊？！，而在firefox下remove这个col，和设这个col的display为none的表现是一样的。在ie6下就有区别。 所以我认为是ie6不规范。 |
| 返回顶楼 | |
|
发表时间：2008-10-28
ide里面都有这个标记的提示吧，留心点的话就发现了。
现在浏览器真多，什么时候弄个组织同时管一管浏览器和标准才像话。 |
| 返回顶楼 | |
