`
accpxudajian
  • 浏览: 456482 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

table进阶

 
阅读更多

 

<html>	
<head>
<title>DEMO</title>
<script src="JSLogger.js" debug="true" defer="defer"></script>

</head>
<body>


<table border="1" style="width:600px;table-layout:faixed;" frame="hsides" rules="groups">
     <caption>table练习</caption>
     <colgroup span="1" width="100"></colgroup><!--设置列分组:跨1列 并且每个td的宽度为100px,采用fixed-->
     <colgroup span="3" width="200"></colgroup><!--设置列分组:跨3列 并且每个td的宽度为100px,采用fixed-->
<thead>
     <tr>
          <td>信息类型</td>
          <td>表头2</td>
          <td>表头3</td>
          <td>表头4</td>
     </tr>
</thead>
<tfoot><!-- tfoot最好放在tbody前面,这样浏览器就能提前渲染表尾,可以加快表格的显示速度。-->
     <tr>
          <td>家庭地址</td>
          <td>北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市</td>
          <td>cell 4-3</td>
          <td>cell 4-4</td>
     </tr>
</tfoot>
<tbody>
     <tr>
          <td>中文名</td>
          <td>cell 2-2</td>
          <td>cell 2-3</td>
          <td>cell 2-4</td>
     </tr>
     <tr>
          <td>英文名</td>
          <td>cell 3-2</td>
          <td>cell 3-3</td>
          <td>cell 3-4</td>
     </tr>
	 <tr>
          <td>小名</td>
          <td>cell 3-2</td>
          <td>cell 3-3</td>
          <td>cell 3-4</td>
     </tr>
</tbody>
</table>

</body>

 


/* frame属性控制着表格最外围的四条边框的可见性
 void - 默认值。表示不显示表格最外围的边框。
 box - 同时显示四条边框。
 border - 同时显示四条边框。
 above - 只显示顶部边框。
 below - 只显示底部边框。
 lhs - 只显示左侧边框。
 rhs - 只显示右侧边框。
 hsides - 只显示水平方向的两条边框。
 vsides - 只显示垂直方面的两条边框。


rules 则控制着表格内部边框的可见性。
none - 默认值。无边框。
 groups - 为行组或列组加边框。
 rows - 为行加边框。
 cols - 为列加边框。
 all - 为所有行列(单元格)加边框

css:table-layout:fixed  表格的td将根据设置的width严格设置宽度。默认auto是根据内容。设置成fixed会加快table显示速度。
fixed表示单元格的大小是固定的,由第一个指定大小的单元格决定;如果所有单元格都没有指定大小,则由第一个单元格的默认大小决定;

Talbe模型:
<table border="0/1"  frame="hsides/vsides/below" rules="groups/rows/cols/all" style="table-layout:fixed/auto;">
	<caption>用于写表格标题</caption>
	<colgroup span="" width=""></colgroup>	--设置列分组
	<thead>用于写表头</thead>
	<tboot>用于写表尾</tboot>
	<tbody>内容1</tobdy>
	<tbody>内容2</tobdy>
</table>

*/
 

 

  • 大小: 8.1 KB
分享到:
评论

相关推荐

    SQL语句基础教程

    SQL语句基础教程 SQL(Structured Query Language)是一种特殊目的语言,用于管理关系数据库管理系统...通过学习SQL指令、SQL语法、表格处理、进阶SQL等知识点,可以更好地应用SQL语言,提高工作效率和数据分析能力。

    SQL语句入门到进阶

    本篇文章将深入探讨SQL语句的基础知识,从入门到进阶,帮助读者掌握数据库查询的基本技能。 1. **SELECT语句**: SELECT语句是SQL中最基本也是最重要的组成部分,它用于从数据库中的表格中选取数据。基本语法为: ...

    smartTable.zip

    四、进阶应用 1. **性能优化**:合理使用内存缓存,避免频繁的内存分配和回收;使用异步加载策略,减少UI线程阻塞。 2. **动画效果**:通过动画效果增强用户体验,例如滚动时的平滑过渡,单元格点击的反馈动画等。 ...

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

    除了基础的编辑功能,`vxe-table`还提供了很多进阶特性,例如行级编辑(`row`模式)、自定义编辑模板、异步数据加载、表单验证等。根据项目需求,可以进一步探索这些功能以实现更复杂的表格场景。 总之,`vxe-table...

    html经典进阶教程

    标记通常是成对出现,如`&lt;TABLE&gt;`开始一个表格,`&lt;/TABLE&gt;`结束表格。标记大小写不敏感。 2. 特殊字符:在HTML中,方括号和引号有特殊含义,若要在网页内容中使用,需用转义字符替代,如`代表小于号,`&gt;`代表大于号...

    hive进阶强化必备

    ### Hive进阶强化必备知识点详解 #### 一、HiveThrift服务启动及连接方法 在Hive的日常管理和使用过程中,HiveThrift服务是非常关键的一个组件,它提供了远程客户端访问Hive的方式。以下是对启动和服务连接的具体...

    mysql进阶简明教程

    MySQL是世界上最受欢迎的开源关系型...通过本教程的学习,你将全面掌握MySQL的进阶知识,能够熟练地进行数据库设计、查询优化、事务处理以及性能调优。在实际项目中,不断实践和探索,你的数据库技能将更上一层楼。

    龙灵修-讲Lua的cocos2d-x进阶视频.rar

    cocos2d-x进阶教程1_6LuaTable使用1.mp4 cocos2d-x进阶教程1_7LuaTable使用2.mp4 cocos2d-x进阶教程1_8LuaTable使用3.mp4 cocos2d-x进阶教程1_9LuaTable读写数据文件.mp4 cocos2d-x进阶教程1_10在Lua中实现串行化....

    iOS11数据库开发进阶教程试读

    iOS 11数据库开发进阶教程涵盖了Swift 4语言下多种数据库框架和组件的使用方法。本教程针对的是希望进一步提升其iOS数据库开发技能的开发者。接下来,我将详细阐述书中提到的一些核心知识点。 1. SQLite数据库概述 ...

    M 语言进阶手册.pdf

    M 语言进阶手册.pdf 从给定的文件信息中,我们可以总结出以下知识点: 1. 结构化数据:M 语言中的结构化数据可以分为两大类:原始数据(Primitive)和结构化数据(Structured)。原始数据是指平时我们填写在Excel...

    GWT入门和进阶

    ### GWT进阶 **1. GWT Compile优化** GWT编译器可以进行多种优化,如死代码删除、类型推断、按需加载等,以减小生成的JavaScript文件大小并提高性能。 **2. Gin Guice集成** Gin是GWT上的轻量级依赖注入框架,基于...

    Lua热更新技术中级篇

     《lua中级篇》分为:“函数的进阶”、“字符串进阶”、“Table进阶”、“元表”、“OOP面向对象”、“协同程序”、“IO操作”、“调试与运行”等八个大的章节,详细深入讲解lua开发的方方面面。 内容包含lua可变...

    matlab 三维 数组 结构体数组(下)+categorical数组+table数组 算法开发、数据可视化、教程 进阶 资源

    在MATLAB中,掌握各种数据类型对于高效编程和数据分析至关重要。本教程主要涵盖了三维数组、结构体数组、categorical数组以及...通过学习这个进阶教程,你将能够更好地利用MATLAB进行复杂的算法开发和数据分析任务。

    Laravel开发-laravel-tabler

    进阶使用 #### 5.1 自定义配置 Laravel Tabler 允许你在 `config/tabler.php` 文件中进行配置,比如更改默认主题、设置图标库等。 #### 5.2 结合 Vue.js 由于 Tabler 支持 Vue.js,你可以结合 Laravel 的 ...

    mysql进阶(二).pdf

    MySQL是一种广泛使用的开源关系型数据库管理系统,其在企业级应用中占据重要地位。本篇主要探讨多表查询、交集、并集、差集、...总之,了解和熟练掌握这些MySQL进阶知识,对于提升数据库管理和应用开发的效率至关重要。

    oracle进阶(多表)

    ### Oracle 进阶学习:多表查询技巧与实践 #### 一、Oracle多表查询基础概念 在Oracle数据库中,多表查询是非常重要的一个部分,它可以帮助我们从多个表中提取所需的数据。对于初学者来说,掌握多表查询的基础非常...

    经典SQL语句大全入门提升进阶

    经典SQL语句大全入门提升进阶 本资源总结了SQL Server的基础语法、提升、开发时的高级技巧和经典用法、基本函数的介绍,以及同步复制技术实现步骤。以下是从文件中提炼出的关键知识点: 一、基础语句 1. 创建...

    sql高级进阶

    - 复制表的定义及数据:使用CREATE TABLE ... AS SELECT。 - 用WITH CHECK OPTION限制数据录入:确保数据满足某些条件。 - 多表插入语句:同时向多个表插入数据。 - 用其他表中的值更新:使用UPDATE结合JOIN。 ...

    plsql--编程进阶

    ### PL/SQL编程进阶知识点概述 #### 一、PL/SQL程序结构 **1.1 什么是PL/SQL程序** PL/SQL (Procedural Language for SQL) 是Oracle为解决SQL语言在处理复杂逻辑时的局限性而推出的一种过程化编程语言。它将SQL的...

Global site tag (gtag.js) - Google Analytics