二十 控制表格 Mastering Tables

控制

你认为你已经了解制作表格。当然,你了解table,tr,tdth标签,已经知道rowspancolspan属性。你可以制作一个可爱小巧的plywood coffee table,但是难道你不想了解怎么制作一个漂亮的实心木质表格,可以承受大象重量的玻璃板表格?

纵列回归

表格行导致表格列看起来十分愚蠢。它们承担了所有工作,表格只是使用行建立,排除了纵列。

幸运的是热心纵列的盼来了colgroupcol标签。

上面两个标签允许你定义纵列和增加你想要的样式,当你要排列纵列和使用不同颜色非常有用,如果没有它们,你就需要增加个体单元cell的样式。

下面就是一个例子:

<table><colgroup><col /><col class="alternate" /><col /></colgroup><tr><td>This</td><td>That</td><td>The other</td></tr><tr><td>Ladybird</td><td>Locust</td><td>Lunch</td></tr></table>

class"alternate"的样式被应用与第二列或者没行的第二个单元。

你同样可以在colgroupcol使用span属性,方法同rowspancolspan

使用colgroup定义了拥有列组的行的数目,例子<colgroup span="2"></colgroup> 将组合前两列。当span出现在colgroup,就不需要col标签。

col标签使用span比较明智,可能像下面应用一样:

<table><colgroup><col /><col span="2" class="alternate" /></colgroup>...

'alternate'属性应用在最后两列上。

对列唯一可以添加的样式就是borders, backgrounds, width and visibility.

IE比其他浏览器有好的表现,因为它在表格方面比CSS方面支持好,比如color,但是,由于原来,唯一原因就是它扮演了古怪角色,对于详细解释,让Hixie来说下。

摘要和标题间隔

在摘要和易用性考虑上,经常在table加上summary摘要caption标题说明

使用summary属性为表格添加摘要,它不会显示,可以用来帮助没有显示效果的表格。

caption标签在table开始标签后面添加。它会在表格上显示,可以在CSS里面使用caption-side定义top,right,bottomleft,尽管IE不管这些。

<table summary="The mating habits of locust, showing how many use protection and how many have a cigarette afterwards"><caption>Locust mating habits</caption>...

Headers, footers and the quest for the scrolling table

thead,tfoottbody允许你把表格分成头部,底部和身体部分。这对大型表格非常有用,当为一个列子印刷时,头部和底部行可以在出现在每个页面。

三个元素必须注意顺序 thead-tfoot-tbody

<table><thead><tr><td>Header 1</td><td>Header 2</td><td>Header 3</td></tr></thead><tfoot><tr><td>Footer 1</td><td>Footer 2</td><td>Footer 3</td></tr></tfoot><tbody><tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>...</tbody></table>

在mozilla浏览里还可以设置tbody元素为scroll滚动,通过使用样式overflow:auto;max-height:[随便]。你可以发现头部和底部保持原来位置,而身体部分右边会出现滚动条。你必须使用max-height属性,因为IE不认识这个属性,所以比使用height属性安全。

注意:回到浏览器差异,此时IE即没有线索说到头部和底部,尽管在表格里出现,也不会在每个印刷页面的头部和底部出现,更不说提供滚动表格。

要机警使用滚到表格。尽管它非常有用途,大部分用户却不使用它们,用户相信线上表现的数据才是唯一有用的数据。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索表格
, 标签
, 样式
, table scroll
, 属性
, 底部标签
, 头部
, colgroup
, col定义表格样式
, 底部
, 纵列
表格头部
mastering physics、mastering mix、mastering redis pdf、mastering chemistry、mastering cmake,以便于您获取更多的相关知识。

时间: 2024-08-04 09:05:59

二十 控制表格 Mastering Tables的相关文章

云计算设计模式(二十四)——仆人键模式

云计算设计模式(二十四)--仆人键模式 使用一个令牌或密钥,向客户提供受限制的直接访问特定的资源或服务,以便由应用程序代码卸载数据传输操作.这个模式是在使用云托管的存储系统或队列的应用中特别有用,并且可以最大限度地降低成本,最大限度地提高可扩展性和性能. 背景和问题 客户端程序和网络浏览器经常需要读取和写入文件或数据流,并从一个应用程序的存储空间.通常,应用程序将处理的运动数据,或者通过从存储读取它,并将其传输到客户端,或通过从客户机读取该载流并将其存储在数据存储中.然而,这种方法吸收了宝贵的资

Windows 8风格应用开发入门 二十四 App Bar构建

构建应用栏的目的的显示导航.命令和始终隐藏不需要的使用的工具.我们可以把应用栏放在页面 顶部或底部或同时存在顶部和底部. 默认情况在AppBar是隐藏的,当用户单击右键.按下Win+Z .或从屏幕的顶部或底部边缘轻松时可显示或关闭AppBar.当然我们也可以通过编程的方式将AppBar设 置为当用户做选择或与应用交互时显示. 构建AppBar基本步骤 通常我们构建一个应用的 AppBar,只需要三步就可以完成: 开发入门 二十四 App Bar构建-jenkins构建自由风格"> 如何构建

jquery-通过hover控制表格td内容的显示和隐藏

问题描述 通过hover控制表格td内容的显示和隐藏 这儿我建立了5个父div,id分别是box0 box1 box2 box3 box4 和5个子div , id分别是personalInfo0 personalInfo1 personalInfo2 personalInfo3 personalInfo4 当我的鼠标移动到box0的时候,我想显示personalInfo0,但不想显示其他的personalInfo.以此类推,当鼠标移动到boxn的时候,就显示personalInfon. 请问该

CSS控制表格——制作日历

表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版.这一次我们就来学习如何用CSS控制表格. 一.表格中的标记 表格(<table>标记)在最初HTML设计时,仅仅是用来存放各种数据的. 下图是一个没有使用任何CSS修饰的表格: 二.表格的颜色 表格的颜色设置与文字颜色设置完全一样,通过color属性设置表格中文字的颜色,通过background属性设置表格的背景颜色. 三.表格的边框 border属性是用来设置表格边框的粗细的,当设置其值为0时,表明表格没有边框. borderco

Bootstrap &lt;基础二十二&gt;超大屏幕(Jumbotron)

原文:Bootstrap <基础二十二>超大屏幕(Jumbotron) Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: 创建一个带有 class .jumbotron. 的容器 <div>. 除了更大的 <h1>,字体粗细 font-weight 被减为 200px. 下面的实例演示了这点: <!DOCTYPE

Bootstrap&lt;基础二十&gt; 标签

原文:Bootstrap<基础二十> 标签 Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签</title> <link href="/bootstrap/css/bootstrap.min.css" rel=&quo

Bootstrap &lt;基础二十五&gt;警告(Alerts)

原文:Bootstrap <基础二十五>警告(Alerts) 警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-su

Bootstrap &lt;基础二十六&gt;进度条

原文:Bootstrap <基础二十六>进度条 Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 &l

Bootstrap&lt;基础二十四&gt; 缩略图

原文:Bootstrap<基础二十四> 缩略图 Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 class .thumbnail 的 <a> 标签. 这会添加四个像素的内边距(padding)和一个灰色的边框. 当鼠标悬停在图像上时,会动画显示出图像的轮廓. 下面的实例演示了默认的缩略图: <!DOCTYPE html>