http://www.htmldog.com/examples/
基本的表格
th 表头单元格,即可作为列的头部,也可作为行的头部
http://www.htmldog.com/examples/headercells.html
<table>
<tr>
<th>Cats</th>
<th>Dogs</th>
<th>Lemurs</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
</table>
<table>
<tr>
<th>Cats</th>
<td>Tiger</td>
<td>Cheetah</td>
</tr>
<tr>
<th>Dogs</th>
<td>Grey Wolf</td>
<td>Cape hunting dog</td>
</tr>
<tr>
<th>Lemurs</th>
<td>Indri</td>
<td>Sifaka</td>
</tr>
</table>
合并单元格
http://www.htmldog.com/examples/colspan.html
<table>
<tr>
<th colspan="2">Carnivores</th>
<th>Primates</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
</table>
http://www.htmldog.com/examples/rowspan.html
<table>
<tr>
<th rowspan="2">Carnivores</th>
<td>Tiger</td>
<td>Cheetah</td>
<td>Caracal</td>
<td>Wildcat</td>
</tr>
<tr>
<td>Grey Wolf</td>
<td>Cape hunting dog</td>
<td>Red fox</td>
<td>Fennec</td>
</tr>
</table>
表格标题 给表格装上一个牌匾
这个标签必须紧接着放在table其实标签之后,默认情况显示在表格上方,
<table>
<caption>Animal Group</caption>
<!-- etc -->
</table>
可以通过css属性 caption-side ,来设置表格标题的位置,但是IE6不支持。属性值可以是top (默认) right bottom left
给行分组
通过thead tfoot tbody对象类给行分组,将表格分割为表头、表尾和表体。
当表格很长时,打印时表头和表尾会出现在每一页,像word的页眉页脚,IE不支持。。
出现顺序必须是thead > tfoot > tbody ,尽管tbody会显示在head和foot之间,可以有多个tbody对象
指明目标列
<table>
<caption>Caption</caption>
<!-- 给前两列加上 alternative -->
<colgroup span="2" class="alternative"></colgroup>
<!-- 给第二列和第四列,加上 alternative -->
<colgroup>
<col />
<col class="alternative" />
<col />
<col class="alternative" />
</colgroup>
<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
<td>Lunch</td>
<td>Lunch</td>
</tr>
表格亲和力方面的考虑
摘要 <table summary="xxx table summary">
将表头和单元格相联系<th scope="col|row|rowgroup|colgroup">
将单元格和表头相联系<td headers="">
表格的外观
压缩边框
表格设定border后,会在他的最外面的四条边上起作用,而不是在td单元格上,要实现整体以及单元格的网格·边框效果,需要将border属性应用于单元格本身。
td{border:1px black solid}
这样每个td变成了一个单独定义框,而不是网格的一部分,因为浏览器使用“分离的边框模型”(separated borders model),会完全分隔开每个单元格,让他们之间存在空白
添加 table{border-collapse:collapse}
这样将触发“压缩的边框模型”(collapsing borders model),相邻的单元格共享一个边框,较粗的那个才可见。
整个表格的边框与单元格边框接触的地方也会发生压缩,这里IE和FF不一样。
IE
Firefox
<style type="text/css">
table{border: 1px red solid; border-collapse:collapse;}
td{border:10px black solid}
</style>
<body>
<table>
<tr><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td></tr>
</table>
</body>
隐藏空单元格
table{border-collapse:separate;empty-cells:hide;}
IE中,始终隐藏空单元格,要想显示单元格,必须添加
FF中,通过empty-cells:hidden|show 来控制,但是border-collapse:separate,不能是collapse
- 大小: 2 KB
- 大小: 1.7 KB
分享到:
相关推荐
表格 html 表格 html 表格 html 表格 html
tablesorter实现HTML表格点击表头排序,同样适用于JSP、PHP等主流Web开发
漂亮的表格html,鼠标移动到表格上会自动通过CSS效果选中一行以及一列。
js实现html表格列宽可拖拽修改 .
html表格美化,创建一个布局协调、色调统一、美观、大方的表格
实现将复制的excel的内容粘贴到html 表格的输入框中的功能
纯javascript解析CSV文件使用并转成HTML表格
这是利用HTML表格代码制作出来的一个表格。
html表格排序资源,tablesorter,jquery-tablesort,可以非常方便表格排序,不用自己去写代码,或者借助其他工具来排序。
html表格控件,带示例,使用方便,适合新手,不妨下来看看,jquery封装的方法,兼容性好。比较漂亮。
HTML表格及排版实例 PPT,自己挣得,初学可以用
我制作的表格 大家参考一下虽然没什么技术含量 但是是我学习的开始!html表格
实验三-HTML表格与HTML表单.doc
在html的表格中,锁定行头和列头,使用样式表,不用加载第三方控件.
html 增删改该例子演示了利用微软.Net框架的Web服务与天气预报站点的硬件进行数据交换来实现Web天气预报的服务。
html表格和CSS进行网页设计
可以将一个已经生成的html表格转化成可分页和查询的表格 完全用js实现不涉及任何后台技术,不支持ajax。
HTML表格生成Excel文件代码是一款基于jquery.table2excel插件实现的可以根据你的需要导出HTML表格中的内容,不需要的行可以不导出。
易语言数组转HTML表格(跟超级列表框一样用) 。用到妹子ui的css。注释都写在里面了。效果图:。@刘海斌。
主要介绍了Python实现简单HTML表格解析的方法,涉及Python基于libxml2dom模块操作html页面元素的技巧,需要的朋友可以参考下