`
liyiye
  • 浏览: 423926 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

table 原来还可以这样用啊

 
阅读更多

     因为页面的需要,要对table的每一列进行显示和隐藏的操作,感觉没有什么好的方法,没有想到上网找了一下,居然发现了一个好的标签(狠汗颜), <COLGROUP>

     以下是一个小例子:

 

/********************************/

 

   <TABLE   border=1   width=90%>  
      <COLGROUP     bgcolor=red>  
          <col   style="display:   none">  
          <col   bgcolor=green>  
          <col >  
     </COLGROUP>  
  <TBODY>  
  <TR>  
  <TD>1111</TD>  
  <TD>222</TD>  
  <TD>3333</TD>  
  </TR>  
  <TR>  
  <TD>1111</TD>  
  <TD>222</TD>  
  <TD>3333</TD>  
  </TR>  
  <TR>  
  <TD>1111</TD>  
  <TD>222</TD>  
  <TD>3333</TD>  
  </TR>  
  </TABLE>

/********************************/

 

col 可以对table的没一列进行一些样式的设置

 

 

  • 大小: 19 KB
分享到:
评论
57 楼 香克斯 2008-10-29  
zbm2001的观点很支持。
现在浮躁的人太多了,能这么静下心来研究基础和规范的人少啊
56 楼 hesy_007 2008-10-29  
现在table的机会不多了,基本上都是div + css 了。
55 楼 ftplove 2008-10-29  
学习方法跟学习态度的问题

态度我认为应该是在某一领域做专,做精

方法我认为应该跟本身所处在的阶段有关
初级阶段:能把某一领域的知识掌握30-40%差不多,这样就可以在这个领域能干活了
中级阶段:能把某一领域的某一个方面的知识掌握70-80%,成为这个方面的专家
高级阶段:能把某一领域的知识掌握70-80%,成为这个领域的专家

54 楼 DeadFire 2008-10-29  
不得不服javaeye论坛,这样一贴居然都有六页回复了。

我记得javaeye论坛每天删贴数量大于发帖数量的(所以注册这么长时间这才第二帖),难不成这么几年改变了。
53 楼 weizh 2008-10-28  
恩,不错。不过目前我的项目中似乎整个网站都没有出现table标签。
52 楼 letle 2008-10-28  
学无止境!
51 楼 maming2000 2008-10-28  
ide里面都有这个标记的提示吧,留心点的话就发现了。
现在浏览器真多,什么时候弄个组织同时管一管浏览器和标准才像话。
50 楼 pipilu 2008-10-28  
liyiye 写道
pipilu 写道

汗,才发现好多人说firefox不支持。
我回头看了一下我以前做过的页面,发现应该是ie6和ie7不支持啊。
试了一下。
发现firefox支持对col定义的样式,但对通过col操纵column不支持(比如根据col的id获得col对象后,操纵它的显示和隐藏)
我那个所说的“ie不支持 firefox支持”的情况很凑巧,是这样的:
Java代码 &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
      &lt;title&gt;&lt;/title&gt; 
      &lt;script type="text/javascript"&gt;
      &lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!-- 
      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;
          }
      }
      //--&gt;&lt;!]]&gt; 
      &lt;/script&gt;
      &lt;style type="text/css" media="all"&gt;
      &lt;!--/*--&gt;&lt;![CDATA[/*&gt;&lt;!--*/
      table {
          background: #FFFFFF;
          border-collapse: collapse;
      }
      col {
          border-right: 5px #FF0000 solid;
      }
      
      #col1 {
          background: #FFF000;
      }
      /*]]&gt;*/--&gt; 
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table cellspacing="0" border="1"&gt;
      &lt;colgroup&gt;
          &lt;col id="col1" /&gt;
          &lt;col id="col2" /&gt;
      &lt;/colgroup&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td id="111"&gt;asdf&lt;/td&gt;
          &lt;td&gt;asdf&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button onclick="hiddenCol()"&gt;隐藏列&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script type="text/javascript"&gt;
&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
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;
}
}
//--&gt;&lt;!]]&gt;
&lt;/script&gt;
&lt;style type="text/css" media="all"&gt;
&lt;!--/*--&gt;&lt;![CDATA[/*&gt;&lt;!--*/
table {
background: #FFFFFF;
border-collapse: collapse;
}
col {
border-right: 5px #FF0000 solid;
}

#col1 {
background: #FFF000;
}
/*]]&gt;*/--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table cellspacing="0" border="1"&gt;
&lt;colgroup&gt;
&lt;col id="col1" /&gt;
&lt;col id="col2" /&gt;
&lt;/colgroup&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;td id="111"&gt;asdf&lt;/td&gt;
&lt;td&gt;asdf&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;button onclick="hiddenCol()"&gt;隐藏列&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
在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不规范。

49 楼 ThinkInJava 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);
48 楼 liucl_tiger 2008-10-28  
学习你们经验!
47 楼 ytcheng 2008-10-27  
没错,术业有专攻,做为一个后端程序员把这些让给前端工程师研究吧。
46 楼 inshua 2008-10-27  
vs2008 效果圖

這些標記看文檔很累,工具對人幫助比較大
45 楼 ywg2008 2008-10-27  
楼主说的这个好像在FIREFOX里不能用呀!

不知道这些标签符合W3标准码?
44 楼 shanlingyunjavafuns 2008-10-27  
路过!看看!
43 楼 liyiye 2008-10-27  
reeze 写道

liyiye 写道kaipingk@gmail.com 写道
支持zbm2001, 学一种东西就要学精,学专,看看现在国内好多网站都是一塌糊涂。

做一个网站是需要很多方面的知识,难道你为了做一个网站把所有的知识点都学透,学深。现实是没有给你太多的时间,让你去研究的,所以我不同意你的看法。当然如果你只是负责其中的一个小的方面,例如只是用html写一些页面,那你当然可以把这个学的很深,很透彻。但是那样又有什么意义啊?

举个很简单的例子
比如上面列举的&lt;theade&gt; &lt;th&gt;&lt;tfoot&gt; 标签,如果你要实现一个表头特殊的效果。如果你不知道有这几个标签,你想到应该是这样子的代码吧
&lt;table&gt;
&lt;tr class="table_header"&gt;
  &lt;td&gt;表头&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
  &lt;td&gt;neirong&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
这样虽然能达到你要的效果。但是在很多方面都有不好的地方。可用性啊,语义性啊。
并且css写起来也会麻烦一下。

所以说基础知识还是很重要的。在时间不允许的时候做一些折中的做法我觉得是可以的,但是如果你发现重复了N遍之后你还是再折中的话,我觉得有必要反思一下了。



基础知识很重要,这个是不可否认的。我一直强调,知识点要先博而后精,像你举的例子一样,你如果不知道有更好的东西,而一味用一些很复杂的东西,还一直想去专研它,那样只是浪费时间而已啊。----个人的一下看法
42 楼 liyiye 2008-10-27  
pipilu 写道

汗,才发现好多人说firefox不支持。
我回头看了一下我以前做过的页面,发现应该是ie6和ie7不支持啊。
试了一下。
发现firefox支持对col定义的样式,但对通过col操纵column不支持(比如根据col的id获得col对象后,操纵它的显示和隐藏)
我那个所说的“ie不支持 firefox支持”的情况很凑巧,是这样的:
Java代码 &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
      &lt;title&gt;&lt;/title&gt; 
      &lt;script type="text/javascript"&gt;
      &lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!-- 
      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;
          }
      }
      //--&gt;&lt;!]]&gt; 
      &lt;/script&gt;
      &lt;style type="text/css" media="all"&gt;
      &lt;!--/*--&gt;&lt;![CDATA[/*&gt;&lt;!--*/
      table {
          background: #FFFFFF;
          border-collapse: collapse;
      }
      col {
          border-right: 5px #FF0000 solid;
      }
      
      #col1 {
          background: #FFF000;
      }
      /*]]&gt;*/--&gt; 
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table cellspacing="0" border="1"&gt;
      &lt;colgroup&gt;
          &lt;col id="col1" /&gt;
          &lt;col id="col2" /&gt;
      &lt;/colgroup&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td id="111"&gt;asdf&lt;/td&gt;
          &lt;td&gt;asdf&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button onclick="hiddenCol()"&gt;隐藏列&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script type="text/javascript"&gt;
&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
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;
}
}
//--&gt;&lt;!]]&gt;
&lt;/script&gt;
&lt;style type="text/css" media="all"&gt;
&lt;!--/*--&gt;&lt;![CDATA[/*&gt;&lt;!--*/
table {
background: #FFFFFF;
border-collapse: collapse;
}
col {
border-right: 5px #FF0000 solid;
}

#col1 {
background: #FFF000;
}
/*]]&gt;*/--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table cellspacing="0" border="1"&gt;
&lt;colgroup&gt;
&lt;col id="col1" /&gt;
&lt;col id="col2" /&gt;
&lt;/colgroup&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;td id="111"&gt;asdf&lt;/td&gt;
&lt;td&gt;asdf&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;button onclick="hiddenCol()"&gt;隐藏列&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
在firefox下,列的红色右边界(就是col那个样式)可以看到。在ie下就不行。
只是简单的试了一下。


我也试了一下,好像两个浏览器对它的解释不同,不是不支持javascript,在firefox下,当你对col的样式设置为隐藏的时候,它的其它样式是显示不了,相当与隐藏了(你直接在col里面设置样式就可以看到)。
41 楼 reeze 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遍之后你还是再折中的话,我觉得有必要反思一下了。
40 楼 pipilu 2008-10-27  
汗,才发现好多人说firefox不支持。
我回头看了一下我以前做过的页面,发现应该是ie6和ie7不支持啊。
试了一下。
发现firefox支持对col定义的样式,但对通过col操纵column不支持(比如根据col的id获得col对象后,操纵它的显示和隐藏)
我那个所说的“ie不支持 firefox支持”的情况很凑巧,是这样的:
<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下就不行。
只是简单的试了一下。
39 楼 liyiye 2008-10-27  
kaipingk@gmail.com 写道

支持zbm2001, 学一种东西就要学精,学专,看看现在国内好多网站都是一塌糊涂。




做一个网站是需要很多方面的知识,难道你为了做一个网站把所有的知识点都学透,学深。现实是没有给你太多的时间,让你去研究的,所以我不同意你的看法。当然如果你只是负责其中的一个小的方面,例如只是用html写一些页面,那你当然可以把这个学的很深,很透彻。但是那样又有什么意义啊?
38 楼 xdsnet 2008-10-27  
zbm2001 写道
xly_971223 写道
刚在forefox3中测试了一下, 不管用


这显然是楼主浅尝辄止的必然结果……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格列控制</title>
</head>
<body>
<table width="90%" border="1">
  <colgroup style="background:red;">
  <col style="visibility:collapse; +display:none;" />
  <col style="background:green;" />
  <col />
  </colgroup>
  <tbody>
    <tr>
      <td>1111</td>
      <td>222</td>
      <td>3333</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
</body>
</html>

看来还是要尽量找那些常用的标签,上面的内容经测试,只在IE和firefox上通过,而opera9,谷歌浏览器,safari3上面都不行,都是显示全部。

相关推荐

    table嵌套table边框样式

    在CSS中,我们可以用以下属性来调整表格的边框: 1. `border`: 设置元素的边框宽度、样式和颜色。 2. `border-collapse`: 控制表格的边框合并。默认值为`separate`,表示边框分开;设为`collapse`时,相邻边框会...

    安卓使用smartTable生成表格

    在安卓平台上,开发人员经常需要处理...通过熟练掌握SmartTable的使用,开发者可以轻松地在安卓应用中实现复杂的表格功能,提升用户体验。在实际项目中,可以根据具体需求进行选择和定制,以满足不同场景下的表格需求。

    SAP table control使用介绍

    在 ABAP 程序中,需要使用 `CONTROLS &lt;tab_ctrl_name&gt; TYPE TABLEVIEW USING SCREEN &lt;screen_no&gt;.` 这样的语句来声明一个 Table Control。这里的 `&lt;screen_no&gt;` 指的是在屏幕设计器中定义的屏幕编号。 3. **Table ...

    vxe-table vue table 表格组件功能

    vxe-table还提供了Excel表格例子,帮助开发者理解和学习如何将Excel中的数据转换为vxe-table可以展示的格式,这对于希望从传统表格软件迁移到Web应用的用户来说非常有用。 最后,为了展示vxe-table的具体应用,文档...

    matlab开发-table

    可以使用`readtable`和`writetable`函数从CSV、Excel、数据库等文件导入和导出Table数据。 8. **代码示例**: `table.m`文件很可能包含一个示例脚本,演示了如何创建、操作和显示Table。通常,这样的文件会涵盖...

    div table的使用

    在网页设计中,`div` 和 `table` 是两种非常重要的HTML元素,它们各自有着不同的用途和特性。...总的来说,结合使用`div`和服务器端生成的`table`,我们可以创建出既高效又能满足复杂需求的网页应用。

    ElementUI transfer+table.zip

    在ElementUI中,Table组件支持自定义列模板,可以根据需求灵活配置列的显示内容和样式,还能与其他组件如Pagination(分页)和Filter(过滤)结合使用,实现复杂的数据处理。 结合"穿梭框+table"的标签,我们可以...

    Bootstrap-table分页+汇总统计

    为了使表格更具交互性,我们还可以利用 Bootstrap-table 的事件监听功能,例如 `onLoadSuccess` 事件可以在数据加载成功后执行特定操作,`onClickRow` 事件则可以在用户点击某一行时触发相应代码。 在实际应用中,...

    实现bootstrap table可设置列宽和可拖动列宽

    总之,实现 Bootstrap Table 的列宽设置和拖动功能,需要结合使用 `data-width` 属性、Bootstrap Table 本身以及第三方的列宽拖动插件。通过这样的配置,我们可以为用户提供更加灵活和友好的数据查看体验。

    piecetable.zip

    在C语言中,处理piecetable这样的数据结构时,需要注意内存管理和效率问题。例如,为了提高查找速度,piecetable可能采用了某种形式的索引或哈希映射。同时,由于C语言没有内置的垃圾回收机制,程序员必须手动管理...

    改变el-table宽度

    在Vue.js框架中,结合Element UI库,我们可以创建高度可定制化的表格组件。在给定的场景中,开发者想要...在实际开发中,还可以进一步优化,比如增加列宽调整的动画效果,或者添加列宽锁定功能,以满足更多样化的需求。

    table2Excel.rar

    为解决这个问题,可以考虑在转换前,将重要的CSS样式内联到表格的HTML元素上,或者使用Table2Excel.js提供的`styles`参数来自定义导出的样式。 此外,对于大型表格,性能可能是个问题。为提高效率,可以考虑分块...

    TableTree 表格树

    每个节点可以展开或折叠,展示或隐藏其子节点,这样用户可以根据需要查看不同级别的信息,有效降低了复杂数据的阅读难度。TableTree在各种管理软件、数据分析工具和Web应用中都有广泛的应用。 二、TableTree实现...

    bootstrap-table拖拽表格改变列宽

    Bootstrap Table 是一...总的来说,通过使用Bootstrap Table结合colResizable插件,我们可以轻松实现拖拽调整列宽的功能,同时保持表格的美观和功能性。这使得用户可以根据自己的需求自定义表格视图,提高了交互体验。

    boostrap table附带各国语言

    通过这样的方式,我们可以轻松地构建一个具有中文界面的、功能齐全的Bootstrap Table。开发者可以根据实际需求调整配置,利用提供的API和事件来实现更复杂的交互和功能。同时,由于其轻量级和灵活性,Bootstrap ...

    【JavaScript源代码】vue 中使用 vxe-table 制作可编辑表格的使用过程.docx

    例如,如果我们想让“名称”列使用输入框编辑,可以这样配置: ```html &lt;vxe-table-column field="name" title="名称" edit-render="{name: 'input'}"&gt;&lt;/vxe-table-column&gt; ``` 同时,为了处理编辑操作,我们需要...

    Table转div+css工具

    使用此工具,开发者可以: 1. **保持原有数据结构不变**:工具会保留表格中的数据顺序和关系,转换为Div后,内容不会丢失。 2. **优化代码结构**:转换后的代码更符合现代Web开发标准,Div+CSS结构使得代码更清晰,...

    css用ul取代table

    2. **布局复原**:利用CSS的`display`属性,设置`&lt;ul&gt;`为`table`,`&lt;li&gt;`为`table-row`,单元格元素如`&lt;span&gt;`为`table-cell`,这样可以恢复表格布局。 3. **单元格对齐**:通过`text-align`和`vertical-align`属性...

    Layui组件Table绑定行点击事件和获取行数据的方法

    其中,Table组件是一个常用的数据展示组件,它不仅可以展示数据,还提供了丰富的交互功能,比如行点击事件的绑定和获取行数据。Layui的Table组件的使用是前端开发中非常基础且重要的技能,接下来详细解析如何在Layui...

    ORACLE Rename Table的语法

    这样可以确保重命名操作的正确性和安全性。 在某些情况下,需要对主键约束和主键索引重新命名,可以采用以下方法: SQL&gt; ALTER TABLE pc59 RENAME CONSTRAINT SYS_C00421221 TO PK_PC59; Table altered SQL&gt; ALTER...

Global site tag (gtag.js) - Google Analytics