CN101065723A - 在表格中显示数据的方法 - Google Patents

Abstract

一种用于在表格中显示数据的方法和计算机可执行程序代码，所述表格具有列、行、和多个由所述列和行限定的单元格。所述方法包括步骤：创建一个叠一个地或者并排放置的第一和第二子表格。顶端的子表格定义不可滚动的固定表头，而底部的表格定义可滚动的数据表格。顶端表格具有可视部分和隐藏部分，其包括从对应于每个单独列的顶端或者底部表格中的最大宽度单元格复制的记录。为了形成固定边栏，编码计算机可执行程序根据该行中最大高度单元格的参数调整所述行的高度。

Description

在表格中显示数据的方法

交叉引用相关申请

本申请是根据2004年11月26日提交的、名称为“一种用于在网页中创建具有静态表头的数据表的方法”的临时申请号为60/631,152的专利申请的非临时申请，在此要求其优先权并通过引用在此结合其全部内容。

技术领域

本发明涉及按表格形式显示数据的方法，特别涉及在网页上显示表格数据的方法。

背景技术

早在因特网和网页的开始阶段，就需要按容易阅读的形式显示表格数据。当网页设计者需要显示多行数据，例如20、50、100或者更多行时，非常期望数据行每列的表头(header)或者标签(lable)保持“固定”或者“静止”，当使用浏览器的用户或者个人可以向下滚动数据行时仍然可以看到或者读到该表格顶端的列表头或者列标签。所述浏览器可以是任何公知的程序，例如Microsoft Internet Explorer、Mozilla、Apple Safari、Opera、Firefox等等。

某些程序允许当用户沿着表格中的列垂直滚动时，表头行在页面顶端保持静止。一个这样的例子是Microsoft Excel，它是财务管理中广泛使用的基于Windows的程序。但是，Microsoft Excel并不是使用HTML(超文本置标语言)、或者CSS(级联样式表)的传统网页，所述CSS是适于在因特网网页上显示数据的应用程序。虽然MicrosoftExcel电子表格可以在浏览器中查看，然而依然不是使用HTML或者CSS的典型网页，Excel在使用中以及可以在何处使用，都有很多限制。

已经进行了一些尝试去创建具有静止表头的网页。有的使用两个HTML表，其中顶端表格(top table)包含一行并将每列的“宽度”和/或其表格属性设置为特定像素或者百分比量，使得每列宽度都符合包含有数据的底部表格(bottom table)的列宽量。这种方法的缺点是难于确定正确的宽度量用来设置每个列。通过将宽度设置为静止值，无论按像素还是按百分比，所述顶端表格及其各列就不会象起初没有设置宽度那样容易横向“流动”或者缩小或者放大。而且，如果所述数据来自数据库，那么数据总是在改变，因此所述顶端表格的列宽量对于要显示的数据和表头可能过大或者过小。

其他用于显示表格的静止表头行的方法是使用HTML FRAMES和IFRAME。大量网站列举了在网页中使用FRAMES的缺点。有些缺点是很难加书签或打印。其他的缺点是需要“清洁”布局和附加的滚动条。另外的缺点还有很难设计和维护FRAMED或者IFRAME网页。

另外复杂的问题是，非常期望任何显示静止表头的方法，使得能跨越多个浏览器工作。即使不使用静止表头，这种跨浏览器的兼容性同样非常难以实现。并且还有更复杂的问题，每个浏览器都具有文本尺寸设置，根据使用哪个浏览器，个人可设置或覆盖浏览器中的文本尺寸设置。因此，即使网络程序员或者网络开发者为数据设置字型设置，个人用户根据他们正在使用的浏览器，可以覆盖这种设置，使得他们可以更容易按所希望的字型尺寸来查看网页。

当在网页中设计固定表头表格时，有很多因素要考虑。这些因素中列出一些如下：

1、固定表头的表格用于显示通常存储在某种数据库中的数据。这种数据可以不断改变。因而，设置<td>宽度属性很困难。

2、表头信息行的文本以及字体字号和字形(例如加粗)同样可以改变。这同样影响列的对齐。

3、可以将图像放置在数据单元格中。这同样必须考虑，否则也有对齐问题。

4、可以将图像放置在表头(例如排序方向)。同样，如果没有考虑，则列将不对齐。

5、浏览器版本和浏览器类型在显示数据时可能有差异。轻微的区别会引起列不对齐。

6、用户的浏览器窗口尺寸设置影响数据的显示。用户将窗口设置的较小或者较大都会影响数据的显示。如果浏览器最大化，同样也可能影响对齐。

7、其他浏览器设置，例如文本尺寸设置同样影响列的对齐。所述文本尺寸设置由个人设置，并且很容易影响列的对齐。每种浏览器的HTML字型单元类型说明的实现是不同的。也就是，某些浏览器能调整特定的字体字号，而某些浏览器不能调整该文本。例如IE文本尺寸调整不能调整使用像素(px)单位尺寸的字体尺寸。但是Mozilla和Opera浏览器允许他们的用户调整像素字型单位类型。

本方法提供许多优点，其中：

1、避免使用插件或者要求用户下载程序，因许多用户担心将不明身份的程序(例如病毒、间谍软件)下载到他们的计算机上时。

2、每网页最小的数据和/或代码下载，使得在网络服务器和用户计算机上有更好的***响应和/或性能。

3、最小的网络服务器CPU负载，用于产生固定表头代码，以便服务更多用户和/或更快地服务用户。

例如存在插件式FLASH，可以实现固定表头表格。但是这并不是标准HTML，并且因此在开始需要另一种授权工具与FLASH一起工作。据说FLASH在这方面速度缓慢。况且，从因特网向计算机下载任何东西都是危险的，因为有病毒和间谍软件。象ActiveX、Java Applets等程序通常都被电脑骇客用于感染用户的计算机，并且因此用户将他们的安全设置设定为拒绝这种程序，并购买商业保护软件帮助他们防止类似上述程序安装到他们的计算机上。

众所周知，可以在浏览器中查看Microsoft Excel。但是，并不希望仅查看Excel页。另外，已经知道骇客在利用Excel文件使得其可以携带病毒和间谍软件。另外，同样Java语言也是这样的情况，而且，这不是用于起步的简单的已经接受作为安全语言接受并且已经用在用户计算机上的HTML、CSS和JavaScript。

一些网页上的软件能够让人在表头列之间“双击”以将所述列的大小自动调整为合适的。这种附加步骤在某些情况下可能没有益处，因为它把相对简单的任务复杂化了。允许这种步骤的网页严重依赖JavaScript并且实际上没有HTML。这种页面显得很“笨重”，需要花时间加载到用户浏览器。虽然没有证实，这个步骤不能在Macintosh上运行，因为在这种程序中使用的JavaScript相当精巧和复杂。这样，跨浏览器难以实现，因JavaScript对不同浏览器具有不同影响。

当制作固定表头的表格(或者数据格)时应当考虑这些和其他因素。任何这些因素，无论怎样小的书写体都能引起不对齐。由此，自从网页出现到现在为止，都无法得到可以用于生产质量级别的固定表头。生产质量的固定表头的表格应当可以由多数流行的浏览器(例如99％)使用，并且可以适应许多用户设置和所显示的数据。

本发明打算消除与现有的在表格中显示数据的方法和设备相关的缺点，使第一水平行保持静止图示允许用户垂直滚动各列。因特网上的任何使用任意浏览器的人都应当能够访问根据本发明的方法设计的固定表头表格。

发明内容

因此，本发明的一个目的是提供一种按表格形式显示数据的方法。

本发明的另一个目的是提供一种在网页上显示表格数据的方法，使数据的第一水平行保持静止。

本发明的这些和其他目的通过提供在将表头保持在“静止位置”的同时显示表格数据的方法来实现。同时，数据表格能够垂直滚动并且仍然保持与表头对齐。顶端表格的表头行可以包含多个对应于每个数据列的列表头，所述数据列在下面对应的底部数据表格。在这种方法中，表头表包含至少两行，而且底部数据表格包含至少两行。顶端表头表格的一行包含并显示可视的表头文本。第二“隐藏”行包含占位符(placeholder)文本或者HTML，用来自动设置每个相应表头列的宽度。通过计算底部数据表格中每个数据单元格的最大宽度以及它的相应文本或者HTML来确定每个“隐藏”行的表头的占位符或者html。包含其对应列最大宽度的所述单元格中的文本或者HTML用作隐藏表头行单元格中的占位符。因此行和单元格使用CSS帮助产生用户不可见的单元格。

如果需要在所述隐藏行中有图像，那么这些图像的高度设置为较小值，例如height＝“0”或者height＝“1”或者height＝“2”等等。这样使所述隐藏行在高度上减少而仍然具有原始宽度。另外，另一种CSS方法是对隐藏行设置可视性属性，或者将隐藏单元格设置为“隐藏(hidden)”值。通过使用DIV标记并将这个DIV的CSS属性设置为使滚动条出现的值来创建数据表格的可滚动部分。所述CSS属性典型为：height、overflow、overflow-x、overflow-y等等。可以经由程序或者直接在网页中设置这些信息。

接着将每个顶端表头列文本或者HTML宽度与每列的底部数据表格宽度进行比较。如果顶端表头列文本或者HTML比任何底部数据表格的相应单元格都宽，则向底部数据表格增加另一隐藏行。用于底部数据表格的该“隐藏”行将包含表头表格中任何相应的HTML或者文本，使得底部数据表格的列可以自己调整为具有与顶端表头表格列相同的宽度。顶端表头表格和底部数据表格这两个表格交换数据或者表头标签并将其放置在它们“隐藏”的相应列和行中。这些隐藏行使用CSS属性和类似值或者“可见性：隐藏”或者“显示：无”，以帮助隐藏“交换”的副本数据或者表头标签。此外，数据或者表头标签的“交换”副本不必是精确复制所述数据或者表头标签，并且可以是任何HTML或者文本，其将使相应列的宽度匹配相对的表格，例如顶端表头表格或者底部数据表格。

本方法同样确定底部数据表格的每个单元格中的所述文本和/或html的宽度。特别地，所述文本可以使用不同类型的成比例的字体，例如不是诸如Courier的静止宽度的Arial、Times字体等等。所述方法计算数据单元格文本中所有字符的整体宽度，并使用这个整体宽度确定哪个单元格的HTML或者文本可以复制或者放置到相对表格的对应单元格中。

所述方法的一个重要部分是使用另外的数据“占位符”行，其通过级联样式表(cascading style sheet)属性来隐藏；第二部分是计算的列中的最宽单元格的使用以将导出的或者复制的内容放置到相邻表格中，从而使数据的列和静止表头整整齐齐地对齐。

在另一个实施例中，所述表格的每个列宽(HTML中的<TD>)都可以根据计算的数据宽度和表头宽度以及从表头单元格和数据单元格选择的最大宽度动态地按像素或者按百分比来设置。如果期望用百分比，则每个列的最大单元格宽度可以加在一起，然后可以确定每个表头和数据列的百分比。另外，所述表格的最大字符宽度同样可以随后修改，以经由省略号“…”或者一些其他指示符缩短过长数据，以减小一个或者多个列的最大宽度。

当本发明的这种静止表头表格***与用作第三(3^rd)种表格的另一表格和特定CSS和DIV标记以及智能处理结合使用时，还可以产生多列下拉列表(drop down list)。如果不是所有，因特网上的大多数下拉列表是单列下拉列表。有少数的具有多列的下拉列表，但是实施这些类型受限制。而且，实际上主流或者流行的网站都不使用这种多列的下拉列表。

本方法同样允许在网页中显示多列下拉列表。其将数据顶端行的列与数据底部行的列对齐，同时根据用户输入另外缩短(collapse)或者扩展数据底部的行。当用户在数据行上垂直滚动时，所述方法允许用户在网页中观看用户目前在电子表格程序例如Excel中观看的固定表头行。通过将具有固定表头行的列与下面各行的列对齐，用户可以轻易看到位于固定表头行的列名。

本发明的另一方面允许用户实现调整位于服务器和/或客户机的计算，并且不需要用户多余的双击或者任何其他额外用户干预，自动调整各列，以达到“正确”尺寸的列宽。

附图说明

现在参照附图，其中用相同的数字表示相同的部分，其中：

图1是包含表头和一个或者多个数据单元格的一列数据显示的视图。

图2是多列表格的视图，每列都具有表头和一个或者多个数据单元格。

图3是具有隐藏表头和隐藏数据单元格的一列数据显示的视图。

图4是具有可视隐藏行的固定表头表格的示例。

图5是具有隐藏表头的表格示例，当前的表头单元格是所述列的最宽显示。

图6是具有在所述列中最宽显示的数据单元格的表格示例。

图7是具有所述列的最宽显示的隐藏数据单元格内容的表格示例。

图8是在CSS样式表的Code Snippet中显示的表格示例，所述样式表用于掩蔽隐藏行。

图9是具有处于缩短或者扩展状态的固定表头表格的多列下拉框的示意图。

图10是具有在单元格列中最宽的不同列的HTML表格示例。

图11是两个表格的示例，其中删除顶端表格数据并删除底部表格表头。

图12是显示适于在本发明的方法中使用的“Geneva”字体的字符宽度示例的表格示例。

图13是显示适于在本发明的方法中使用的“Times”字体的字符宽度的实施例的示例表格。

图14是显示短语“New Orleans Saints”的宽度的示例计算表。

图15是网页的示例，其中用户可以改变以上显示两个表的文本尺寸设置，即使当他们具有相同<TD>宽度值时，也不能适当地对齐。

图16是固定边栏(sidebar)表格的示例。

图17说明在主数据表中确定最大高度单元格的步骤。

图18说明主数据表位于固定边栏表格的滚动条顶端和占位符列的过程中的步骤。

图19说明了计算机监视器屏幕上的视图，有两个固定表头表格，其中一个表格作为固定边栏表格。

具体实施例

现在更详细地参见附图，图10说明了具有表头12、行14和16以及多个垂直列A、B、C、和D的HTML表格。如果列宽属性没有设置(或者说明)为某个像素宽或者百分比宽，则HTML表格将自然地根据列的最宽单元格缩短。例如，在列A，#2行中的单元格是最宽的。在列B，#1行中的单元格是最宽的。但是，在列C，表头行中包含文本“Column C”的单元格是包括#1行和#2行的所有行中最宽的。在这个示例中，没有说明任何宽度属性的HTML表格将自然地按每列的最宽单元格缩短或者收缩。

本发明提供一种组织显示的方法，其中使用单个标记和控件设计单个数据格(datagrid)用来产生固定表头部分。图11示出了这样的包含表头的数据格，和另一个直接位于该包含表头的数据格下面的数据格，具有两行和多个垂直列。在本示例中，由于数据是从包含表头的数据格中分离出来的，因此自然将所述表格缩小到最小列宽，如果没有说明其他表格和单元格宽度设置的话。例如IE、Mozilla、Opera等浏览器，每个都允许各用户将网页内容的文本尺寸设置为他们自己的设置。这样允许用户可定制那些具有视觉效果差或者那些具有非常小的字体尺寸的网页。为了开发固定表头表格，同样必须考虑这种附加设置。

本发明的显示列表数据的方法可以通过“交换”和“隐藏”步骤完成。首先，软件创建者或者网页设计者确定可滚动数据表格上每列的最大单元格宽度，数据表格将成为可视的底部表格。在实施中，由设计者确定什么数据在表格之间交换。然后，将其列的最大宽度的每个单元格的内容的副本放置到固定表头表格中的不可见行中，所述固定表头表格位于数据表格上面。然后，设计者确定固定表头表格(顶端表格)中用于每个单元格的表头内容在宽度上(文本或者HTML)是否大于可滚动的数据表格(底部表格)的最大单元格宽度。如果所述表头内容较宽，则设计者接着将表头副本置于可滚动数据表格中的附加不可见行中。设计者使交换的信息在占位型(holder-type)的行中不可见，在每个表格中隐藏交换的副本。可选地，设计者将任何交换图像(如果有)调整为具有高度值1(或者更通用的较小高度)，注意特定浏览器需要具备至少高度一(1)，以便能够感觉到图像在要调整的列处。某些浏览器将仍然响应零(0)高度。

“交换”的结果是，有两个具有相同列数的表格。如果一个表格的相同列中最宽的单元格大于在相对的表格中的相同列中最宽的单元格，则把该文本的副本放置在相对的表格中，因此将所述相对的表格的宽度增大为起初的表格的宽度。除了改变为从相对的表格到起初的表格，重复相同的步骤。这个过程平衡并补偿所述两个表格(表头表格和数据表格)的每列的文本或者HTML宽度。结果，两个表格的垂直列的宽度互相对齐。如果期望的话，上述算法的顺序可以在代码中重新排列，但是总体方法和原理保持相同。

在图1所示的实施中，表格20由表头表格22和位于所述表头表格22下面的数据表格24组成。所述表头表格22包含由数字26指示的可见表头单元格A和由数字28指示的隐藏表头单元格A。底部数据表格24包含由数字30指示的第一可见数据单元格A1和由数字32指示的第二可见数据单元格A2。由数字34指示的隐藏数据单元格A位于第二数据单元格32的下面。所述隐藏数据单元格34用作从表头表格22和表头单元格26导出的数据的占位符。所述隐藏表头单元格28根据放置在可见数据单元格30和32的信息类型横向扩展或者缩小。典型地，选择第一或者第二数据单元格30、32的较宽者作为指导，而且该信息副本放置在所述隐藏表头单元格28中。类似地，如果所述可见表头单元格26的内容比任何数据单元格30、32都宽，则将所述表头单元格26的副本或者表示值放置在所述隐藏数据单元格34中。

“交换”和“隐藏”的结果是，设计者创建两个表格：顶端表头表格22和底部数据表格24，其具有相同显示宽度并因此在两个表格(表格22和表格24)的边界的对齐线上产生沿列的相同宽度。

图2示出了在多列情况下应用上述步骤。这里，表头表格40具有相应列A、B、和C的三个可见表头单元格A、B、和C，以及列A、B、和C的隐藏单元格A、B、和C。位于所述表头表格40下面的数据表格42具有一个或者多个数据单元格A1、B1、和C1以及任选的数据单元格A2、B2、和C2。每个相应列的隐藏数据单元格位于数据单元格A2、B2、和C2下面。对于每列A、B、和C，确定在所述数据表格42中的数据单元格的列的最宽显示宽度。例如，确定数据单元格A1或者A2的文本或者HTML中的最大宽度，然后用数据单元格A1或者A2的宽度值填充所述隐藏表头单元格A的内容，用来取得等于所述数据表格的列A的最大宽度的相同结果宽度。

图3示出了其中所述表头表格和数据表格的最宽显示在相对表格的隐藏行/单元格中复制的情况的示例。在设计静止表头的方法中，设计者首先确定在所述数据表格44中的数据单元格A1是否具有大于在所述数据单元格A2中的显示宽度。所述“显示宽度”是行中总的字符宽度和图像宽度。如果有多个行，则接着选择具有最大总字符宽度和图像的行。字符宽度的单位可以是像素、点、em、或者其他绝对或者相对测量单位。图12-14示出了每个字母的尺寸和可以按数据或者表头单元格计算的短语的示例。

如果按文本或者HTML的所述数据单元格A2较宽，则接着将表示数据单元格A2内容的内容副本放到所述表头表格46的隐藏表头单元格A中。相反地，如果所述表头单元格A的内容比在数据单元格A1或者数据单元格A2中占有较大显示宽度，则将表头单元格A的副本或者表示表头单元格A的内容放到数据单元格A2下面的隐藏数据单元格A中。隐藏表头单元格A和隐藏数据单元格A都使用级联样式表特性：visibility：hidden；以及line-height：1px；

如果图像将放置到隐藏表头单元格A或者隐藏数据单元格B，则接着该图像的高度将改变为height＝“1”或者height＝“0”。对下一列，重复比较显示宽度并接着复制所述隐藏表头或者隐藏数据单元格中内容的步骤。结果，所述表头表格46和所述数据表格44将具有相等宽度并由此具有相同垂直列对齐、宽度和边界对齐。

图4示出了具有固定或者静止表头的表格的示例，所述表格具有在用户的屏幕上可见的隐藏行。所述隐藏表头行48中的隐藏行区域部分地与可视表头区域和数据区域(所述具有最大“显示宽度”的区域)重复。第一可见行50包含标识为“Order#ID.”的第一列52、标识为“Customer ID”的第二列54、标识为“Ship Name”的第三列56、标识为“Order Date”的第四列58和标识为“ShipCountry”的第五列60。可见数据表格68中在Order# 10248所在的所述行中，可见的第三列56中的最宽文本“Vins et alcohols Chevalier”控制所述隐藏表头单元格62和隐藏数据行66中的隐藏数据单元格64的宽度。

在图5所示的示例中，没有示出滚动条。在这个示例中，表头单元格70是相应列72的最宽显示。所述表头单元格70同样比该列72的数据表格74中的文本宽。所述隐藏表头数据单元格76包含从所述表头单元格70复制的数据。图像缩小到高度“1”，从而其将隐藏。该列中最宽的文本同样在所述隐藏数据单元格78中复制，其占据所述列的最底部的行。但是，应当注意，所述隐藏数据单元格可以根据设计者的偏爱放置在所述列的中间或者所述列的最顶端。

图6表示了其中一个数据单元格在所述列中最宽的示例。在这个示例中，数据单元格80给出了列82的最大显示宽度。在所述隐藏表头86和所述隐藏数据单元格88中复制相同的数据。虽然在图6中可看见所述隐藏的表头和数据表格单元格86、88，但是应当理解，CSS样式特性将用于“隐藏”这些内容。例如，CSS特性visibility：hidden；和line-height：1px；可用来隐藏所述隐藏表头单元格86和所述隐藏数据单元格88。

图7表示显示一个数据单元格，在这种情况下，数据单元格90在该列中最宽。已经根据文本导出隐藏数据单元格90中的文本，其出现在列92的某处，并且在图示中看不见，因为用户使用滚动条94沿着列92相对于文本“Centro commercial Moctezuma”往下滚。如果所述表格中有几页，则最宽数据值可能目前在浏览器内的页中不可见，即使用户向下移滚动条。调整所述隐藏表头单元格96，使得具有与隐藏数据单元格90同样的宽度。可以使用<DIV>标记和CSS属性：height和overflow-x和overflow-y来创建滚动条94。

图8示出了可以用于隐藏所述隐藏行(占位符行)的CSS样式表的Code Snippet 98。在这个示例中，所述表头单元格和数据单元格的隐藏行已经隐藏，并且对用户不可见。

图9表示具有静止表头的缩短或者扩展状态的多列下拉框。随着使用更多<DIV>标记的多列下拉框，将使得数据表格和其表头行隐藏或者消失。结果，在用户的计算机终端上的显示会看起来象图9中的缩短状态视图。额外的<DIV>标记围绕整个数据表格和表头表格。另一种程序方法或者函数控制<DIV>属性，使其隐藏或者不隐藏。

图12和13提供“Geneva”和“Times”字体的可能字符宽度的示例，提供按像素单位的传统字体尺寸。并且不同字体具有不同宽度。同样，在相同字体中，点(point)尺寸当与其他点尺寸比较时可以具有不同相对宽度。因为有许多不同尺寸和变化，因此优选进行隐藏复制并使用户的浏览器执行调整尺寸操作。图14表示具有94.21223像素的总尺寸的短语“New Orleans Saints”的显示宽度的示例计算。

图12和13同样示出了许多相同字体群(font group)中具有相同宽度或者符合其他字体群的字符宽度的字符。因此，本发明可以对所述隐藏表头单元格86和所述隐藏数据单元格88中的原始字符替换其他的字符或者其他字符组合，以调整列的宽度。加密的或者“代表”数据也可用于调整列的宽度。因而，代替向所述隐藏表头单元格86复制数据，可以对所述隐藏表头单元格86与列中的最大数据单元格做关联，然后将“代表”数据复制到所述隐藏表头单元格86。同样，可以对所述隐藏数据单元格88与表头单元格做关联，其中将代表数据复制到所述隐藏数据单元格88。

本发明还提供一种可选择的方法，用于创建具有“静止”表头的显示表格。依照可选择的方法，软件程序首先为可滚动数据表格或者底部表格上的每个列确定最大单元格宽度。所述程序接着确定固定顶端表格中的每个单元格的所述表头内容是否大于可滚动表格(底部表格)的最大单元格宽度。下一步，所述程序计算最小列宽并将两个表中的每列都设置为相同最小列宽，由此使固定顶端表格和可滚动底部表格对齐。

由于设置表格单元格<td>的宽度同样可以控制所述列的宽度，因此所述程序可以简单地计算并确定具有每列最大宽度的单元格，并且接着计算<td>单元格的宽度属性应当是什么，<td width＝“最大计算像素数”>，而不是如本发明第一实施例讨论的那样将占位符放到隐藏单元格中。

可以设想，替换的方法可能需要进行表格单元格的宽度设置，<tdwidth＝“按像素数”>。例如，如果程序员希望设置表格为100％宽，那么固定<td>不能如起初没有设置<td>的宽度那样进行浮动并轻易伸展。例如可能遇到这样的情况，单元格具有很多需要交换到下一行的文本。有时期望网站能够具有100％宽度，并尽可能横向占有尽可能多的空间。然而有时期望能够缩小到最小可能宽度以节省空间。

程序可以通过很多方式来设置列宽。例如，列宽可以通过如下所述设置<td>宽属性来确定：(1)像素值、或(2)百分比值、或(3)通过设置无值(no value)并根据单元格中的内容确定该单元格的宽度。另外，相邻列内容和宽度属性值同样可以影响列宽，尤其是百分比列宽。而且，程序员还会遇到各种情况，如待显示的列表数据具有多个行，某些行短，某些行结合图像，表头具有图像、或者结合文本或者这些情况的组合。每个字符计算的字体尺寸可以因浏览器不同而不同。用户设置他的/她的浏览器、分辨率等的窗口尺寸。每种字体种类在不同程序之间会有略微改变，包括那些主流和符合标准的浏览器程序。当表头列不能完美地与数据列对齐时，这些细微的区别能从程序或者浏览器中看出。

下面的表格和图15中的图示具有用于宽度属性的相同TD值。下面的表中说明单元格代码和宽度值：

<td width＝“50”>&nbsp；</td>

<td width＝“45”>&nbsp；</td>

<td width＝“65”>&nbsp；</td>

asf	12345	avcdefg

如同在上述两个表格中可以看到的，它们的列互相对齐。为了示例的目的，两个表格之间有间隙，因此可以看到它们实际上是分离的。但是在实际中，两个表格垂直地相互更靠近，甚至彼此接触。但是，用户应当可以经由图15中所示的浏览器选项改变表格中的文本尺寸设置，随着用户通过他们浏览器改变文本尺寸设置，上面所示的两个表格将开始以不同比率扩展。因而，上面所示的两个表格将使它们的列相互不对齐。如果固定表头中的字体固定为像素设置，与可调整的设置不同，可以设想，在至少名为“Internet Explorer”的浏览器中，并且可能当使用其他浏览器时，表格列会对齐。因而，代替设置每个列的宽度，程序应当确定每列的最大单元格宽度，如果程序希望全部列仍然适当对齐的话。

这个应用中描述的多列下拉列表现出它可以最终在产品质量级别(production quality level)上实现，产品质量级别符合跨浏览器的要求。所述多列下拉列表实际上使用与上述静止表头表格中一样的对所选择数据行的交换和同步。该第三(3^rd)种表格具有经由CSS掩蔽的隐藏行，仍然用正确数据来填充，使得列宽将仍然对齐其他数据表格列和表头表格列。另外，当用户选择所述数据表格中的项目时，该项目填入该第三(3^rd)表格。

可以设想，可使用许多计算机语言来实施本方法，创建具有静止表头的数据表格。应当理解，为了实施本方法，用户可以采用“客户/服务器”配置中的服务器，客户端浏览器借助于类似JavaScript或者Java或者VBScript的语言。另外，本方法的各部分可以发生在Web服务器和客户机上。

关于服务器端语言，有许多选择形式。例如Java、J2EE、Perl、PHP、ColdFusion、Python、Visual Basic、ASP.NET、C#、J#、JSP、HTML、机器语言、或者汇编语言都可以用于实施这里描述的方法。这些表格的数据通常来自数据库，例如MS Access、SQL Server、IBM DB2、Oracle、MySQL等等。不过，数据同样可以来自XML文件、文本文件、JavaScript Object、或者一些自定义数据格式。数据检索同样可以使用称为AJAX、异步JavaScript和XML的方法，以改进性能和服务器与客户端浏览器之间的响应时间。此外，使用的语言和数据库可有不同的变化，但是仍然可使用创建静止表头和对齐列的同样的方法。

本发明的另外特征是一种产生单元格的固定边栏(side bar)的方法，该边栏可调整数据单元格的行高，但还可与主固定表头表同步垂直向上和向下滚动，同时该主表头表格向左或者向右滚动以查看隐藏列。这个任务可能比创建固定表头显得容易，因通常在高度上可以是仅有1、2、3行等。如果具有其大量特征设置的如Excel的完整电子表格程序使用本发明来实施，则程序可以变得很复杂。

在形成固定边栏时，使用交换占位符列的相同概念。所述程序查找换行(line break)的数量并相应执行数据单元格的交换。因而，有两种并排的固定表头表格，其中，例如整个左固定表头表格还充当固定边栏(Fixed Sidebar)。删除或者以某种方式隐藏左表头表格的滚动条，但是，通过某种编程语言，所述固定边栏表格滚动条位置保持与主固定表头表格的滚动条位置同步。

参照图16和17，位置固定边栏表格100包括占位符列102和固定边栏列108。所述占位符列102具有表头“Customer ID”和多个数据单元格104。一个单元格105具有最大量信息并因此具有最大高度值。

在所述占位符列102的右侧示出了滑动滚动条106。在所述占位符列100的左侧示出了固定边栏列108。主数据表格110可包含另外的列，例如在图17中所示，其中增加了“Ship Name(船名)”列112、“OrderDate(订货日期)”列114和“ShipCounty(船籍)”列116。当然，主表格可以根据显示数据的特性而仅包含一列。

在设计固定边栏的过程中，一个步骤通过使用CSS特性的主数据表格110，提供隐藏占位符列102和固定边栏表格的滚动条106，例如CSS z-index层，同时依然保持固定边栏108可见。通过确定主数据表格110或者边栏表格100中具有最大高度值的单元格来建立占位符列102。在本示例中，是单元格105。类似地，如果所述单元格仅具有文本，则该值根据行数、回车数或者HTML<BP>或者<P>标记数来确定。

如图18可见，所述主数据表格110部分地覆盖所述固定边栏表格100(置于“其顶端”)，即占位符列102和固定边栏表格100的滚动条106。因此，当主表格标记覆盖所述固定边栏表格100的滚动条106时，表格100和110可以作为一个表格出现。

图19示出了本发明应用程序的用于显示页面的另一个变化，其中提供两个固定表头表格，其中一个充当固定边栏表格。在本示例中，大型表格112具有固定边栏表格114和多个数据列115。所述固定边栏表格114作为固定列，当使用或者向左或者向右移动水平滚动条116时不改变。水平滚动条116位于表格底部，允许用户水平移动主数据表格118用来向左或者向右查看其他数据列。垂直滚动条120允许用户向上或者向下滚动主表格，而表头可以保持固定或者不必保持固定，取决于程序设计者的选择。

本发明允许程序设计者创建具有两个固定表头表格的列边栏，所述表格使用相同数据但使用两个并排表格显示。主表格“重叠”或者覆盖所述固定边栏表格，使得可经由可用于隐藏固定边栏表格的占位符列和滚动条的CSS Property(或者其他类似装置)来隐藏占位符列和固定边栏表格的边栏。

此外，主表格的垂直滚动条与固定边栏的滚动条保持同步，使得两个表格中的行互相对齐。这可以经由数据的交换方法和查找具有最大高度的单元格以及引入固定边栏表格的选项中的数据和隐藏第二列来实现。当向上或者向下滚动时，两个表格都有关于彼此的相同垂直位置滚动条的位置。这可以经由网页中的客户端JavaScript脚本按许多方式来实现。

通过在主数据表格中水平向左或者向右滚动，所述固定表头表格的表头和来自隐藏列的数据被交换到下一个可见列的位置，同时隐藏主数据表格(左或者右，取决于滚动的方向)中的可见列。

在不脱离本发明方法精神的前提下，可以做出许多变化和修改，因此请求仅由权利要求书来限制本发明的范围。

Claims (17)

1.一种在计算机控制的屏幕上显示按表格排列的记录的方法，所述表格具有列、行和由所述列和行限定的多个单元格，所述方法包括步骤：

形成用于显示各列表头的不可滚动第一子表格；

形成用于显示对应于该第一子表格中表头的记录的可滚动第二子表格；

根据每列中最大宽度或高度单元格的参数，定义所述第一子表格和第二子表格中每列的最大尺寸参数；

定义在计算机控制的屏幕上可见的该第一子表格的可见部分和在计算机控制的屏幕上不可见的该第一子表格的隐藏部分；以及

将最大参数单元格的数据复制到该第一子表格的隐藏部分的相应列中的单元格，从而定义该相应列的宽度和高度参数。

2.如权利要求1的方法，其中，在将所述记录复制到该第一子表格的隐藏部分之前，待复制到隐藏的该第一子表格的该记录具有调整至预定几何属性值的预定高度。

3.如权利要求2的方法，其中所述几何属性值具有1或者更小的高度值。

4.如权利要求1的方法，其中通过把<td>宽度属性设置为单元格中记录的像素值来确定所述单元格宽度。

5.如权利要求1的方法，其中通过确定相对于其余数据表格的相应列的百分比值来确定单元格宽度。

6.如权利要求1的方法，其中该不可滚动第一子表格定义该表格的固定表头。

7.如权利要求1的方法，其中该第一子表格定义该表格的固定边栏。

8.一种包括在计算机可读介质中的计算机程序代码，包括：

用于定义排列在数据表格中的数据库记录的一组参数的计算机可执行程序代码，所述数据表格具有列、行以及由所述列和行限定的多个单元格；

用于根据待显示在具有最大宽度或高度参数的单元格中的记录来确定所述数据表格中每列或行的最大宽度或者高度参数的计算机可执行程序代码；

用于建立定义每列的不可滚动部分的第一子表格的计算机可执行程序代码；

用于建立定义每列的可滚动部分的第二子表格的计算机可执行程序代码；

用于建立该第一子表格的可见部分和该第一子表格的隐藏部分的计算机可执行程序代码；

用于把来自最大参数数据单元格的记录关联到该第一子表格隐藏部分的相应列中的单元格并由此定义该第一子表格和该第二子表格中相应列或行的宽度或者高度参数的计算机可执行程序代码。

9.如权利要求8的计算机程序代码，其中，在将记录复制到该第一子表格的隐藏部分之前，待关联到隐藏的该第一子表格的记录具有调整至预定几何属性值的预定高度。

10.如权利要求9的计算机程序代码，其中所述几何属性值具有1或者更小的高度值。

11.如权利要求8的计算机程序代码，其中通过把<td>宽度属性设置为单元格中记录的像素值来确定所述单元格宽度。

12.如权利要求8的计算机程序代码，其中通过确定相对于其余数据表格的相应列的百分比值来确定单元格宽度。

13.如权利要求8的计算机程序代码，其中该不可滚动第一子表格定义该表格的固定表头。

14.如权利要求8的计算机程序代码，其中该不可滚动第一子表格定义该表格的固定边栏。

15.如权利要求8的计算机程序代码，其中待与隐藏的该第一子表格相关联的所述记录被复制到该第一子表格的隐藏部分。

16.如权利要求1的方法，其中复制到该第一子表格隐藏部分中相应列内的单元格的最大参数单元格的数据是该最大参数单元格的代表数据。

17.一种用于在网页中为可滚动的数据表格创建静止表头行的方法，所述方法包括：

关联至来自该数据表格的至少一个占位符的所述静止表头行；

在相应表格中放置占位符，用来把列的尺寸自动调整为与相应起初的表格单元格和列相同的宽度；以及

计算每个单元格数据的最大文本宽度。

Images