`
liyiye
  • 浏览: 423927 次
  • 性别: 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
分享到：
| flex控件的学习网站（收藏）
评论
37 楼 pipilu 2008-10-27  
colgroup
我用过，但好像只是firefox支持，ie6下不行吧？
（我懒着特意试了，在这问一下）
36 楼 qamer 2008-10-27  
术有专攻，但每个人的方向都不同
35 楼 s79 2008-10-27  
哎，楼主用意是好的，虽然漏了点马脚。zbm2001大师，圆融些好，呵呵。

CSS2 (Chinese).chm 下载完毕，开始学习，谢谢zmb2001。多年来一直用的小雨的css手册，在当时的环境下他确实是以IE为参照写的。
34 楼 zbm2001 2008-10-27  
KKFC 写道
引用
你对HTML了解吗？

劈头就问。
俗话说，隔行如隔山，也许coder曾不屑于这些“简单”的tag，但对于天天接触前端的“美工”、界面程序员早已对这些司空见惯了。没事，这东西大家看一下就懂了


这种认识上的区别会造成两种完全不同的WEB开发方式和理念，为什么会这么说？请移步：
http://www.iteye.com/topic/250687
而该文也仅仅是阐述了一些基本的WEB可访问性方面的问题，介于篇幅和侧重点，相信以作者的经验和心得，在这种理念下，许多与开发相关的具体模式和观点还未阐述进来。

另外：
这些所谓“简单”的tag，我所了解的一部分即使对于天天接触前端的“美工”、界面程序员，也是有所欠缺的。
33 楼 kaipingk 2008-10-27  
支持zbm2001, 学一种东西就要学精，学专，看看现在国内好多网站都是一塌糊涂。
32 楼 zbm2001 2008-10-27  
ThinkingInAll 写道
我是路人，感觉就是zbm2001在炫耀自己学过的知识
看到他照片，小孩都有了，还在论坛炫耀，成熟还是不成熟

在我来看，不兼容的html一律不用，简单才是美


建议你稍微学习html3.2的规范，<colgroup><col />列控制标签在十多年前就写尽进了该规范。

关于成熟和炫耀的问题，在多年的web开发中，我通常会遇到两种人：

一种是：认为某些知识很简单，根本不需要去专门的学习。结果往往是开发出的代码语义性差，给项目团队的配合以及代码的维护和更新造成困扰等等问题。

另一种则是：遇到问题头疼顾头，脚疼顾脚，解决问题时也是寻求临时救助解决，最终有时还会顾此失彼。

——其实他们只要静下心来，抽出那些追求时髦技术的时间回到原点，来学习一下基础和规范，很多问题的解决自然水到渠成，迎刃而解。如此即使自己想创造出一些所谓的时髦的技术恐怕也不是什么难事的。

我所有要表达的仅此而已了，你或可以看成是忠告，当然也不妨碍你把这些理解成一种炫耀了。
31 楼 可乐熊 2008-10-27  
COLGROUP好像不支持firefox？
firefox有没有类似的东西啊
30 楼 zxming12345 2008-10-27  
zbm2001 写道
你对HTML了解吗？

经常有程序员就嗤之以鼻道：“那个HTML，还有什么我不了解的吗”。

然后就问道：“程序员在WEB开发中，与表格打交道最多了，你能写全表格所包含的所有标签、大部分的属性以及它们所表达的语义吗，以确保页面在各种设备中无障碍的表达这些信息？。”

结果……

还包括：
<caption> 表格标题
<thead> 表格头
<tfoot> 表格脚注

--------------------------------
html是基础、是核心、是语义。

http://www.iteye.com/topic/250687
只有领悟其中才能够具有：优雅降级的视角、渐进增强的视角。


是啊。web开发几年了，对着东西，还是很陌生。需要系统的学习，但是又找不到学习的入口。
以为这些技能，大部分是UI工程师、美工帮做的。封装了项目自己的标签，封装了ui层。自己了解的就更少了。
29 楼 疯狂的牙刷 2008-10-27  
恩以前还不知道可以这样用学习了谢谢楼主
28 楼 kj2ff 2008-10-27  
学习了，同意zbm2001的观点，对于某一个技术点都不应该是浅尝则至，LZ想要做到先博后精，但是这里的博字又怎知不是精字的另一种解释呢？
27 楼 icefishc 2008-10-27  
要是都像zbm2001这样。  论坛就不会这么乱了。
赞一个
26 楼 ThinkingInAll 2008-10-27  
我是路人，感觉就是zbm2001在炫耀自己学过的知识
看到他照片，小孩都有了，还在论坛炫耀，成熟还是不成熟

在我来看，不兼容的html一律不用，简单才是美
25 楼 xiaocheng 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>


zbm这种专业的精神值得我们学习。

html firefox测试通过了，但google Chrome测试无法通过。
24 楼 firesoul 2008-10-26  
zbm2001 写道


非常凑巧的是：
你所提及的这些知识，很多都是我的基础课。

PS：崇拜太酸了！



越来越崇拜了.
23 楼 zbm2001 2008-10-26  
参见任氏翻译（我协助整理）的CSS2规范全文：
http://www.gs1cn.org/CSS2 (Chinese)_chm.rar

PS：小雨的《样式表中文手册》介绍的也比较全面，但毕竟非规范原文，而且有很多IE垄断时代的影子。
22 楼 zbm2001 2008-10-26  
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>
21 楼 zbm2001 2008-10-26  
firesoul 写道
建议zbm2001 先精通高数 图论 线性代数 微积分 然后 电容 电阻 二级管 电路分析
高频电子技术 单片机原理与应用技术  数字信号处理    半导体器件原理  微电子工艺技术 集成电路设计原理  .. .....
然后 机器语言 汇编 C fortran 编译原理 操作系统原理 vb delphi c# java ruby D ......
然后再去写个html 肯定非常地完美 非常地优雅 非常地可维护 非常地...

zbm2001 是牛人 我特崇拜你


非常凑巧的是：
你所提及的这些知识，很多都是我的基础课。

PS：崇拜太酸了！
20 楼 xly_971223 2008-10-26  
刚在forefox3中测试了一下， 不管用
19 楼 KKFC 2008-10-26  
firesoul 写道
建议zbm2001 先精通高数 图论 线性代数 微积分 然后 电容 电阻 二级管 电路分析
高频电子技术 单片机原理与应用技术  数字信号处理    半导体器件原理  微电子工艺技术 集成电路设计原理  .. .....
然后 机器语言 汇编 C fortran 编译原理 操作系统原理 vb delphi c# java ruby D ......
然后再去写个html 肯定非常地完美 非常地优雅 非常地可维护 非常地...

zbm2001 是牛人 我特崇拜你

大家来到je都是讨论问题， 就是同志。不建议这样冷嘲热讽。
18 楼 firesoul 2008-10-26  
建议zbm2001 先精通高数 图论 线性代数 微积分 然后 电容 电阻 二级管 电路分析
高频电子技术 单片机原理与应用技术  数字信号处理    半导体器件原理  微电子工艺技术 集成电路设计原理  .. .....
然后 机器语言 汇编 C fortran 编译原理 操作系统原理 vb delphi c# java ruby D ......
然后再去写个html 肯定非常地完美 非常地优雅 非常地可维护 非常地...

zbm2001 是牛人 我特崇拜你
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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...

Magicbox
Global site tag (gtag.js) - Google Analytics