JP2008522288A - テーブル形式のデータを表示する方法 - Google Patents

Abstract

データを、カラム、列、及び当該カラムと列とで規定される複数のセルとを有するテーブルとして表示する方法及びコンピュータ実行可能なプログラムコードである。上記方法は、一方が他方の上側に位置するように、または隣り合うように配置された第１及び第２サブテーブルを作成するステップを含む。上側のサブテーブルはスクロールできない固定ヘッダとして規定され、一方下側のテーブルはスクロール可能なデータテーブルとして規定される。上側のテーブルは、可視部位と隠し部位とを含み、隠し部位は、各個のカラムに対応する上側または下側のテーブルにおける最大幅のセルからコピーした記録を含む。固定のサイドバーを形成するために、上記コンピュータ実行可能なプログラムコードは、列における高さが最大のセルのパラメータに基づいて、その列の高さを調節する。

Description

発明の詳細な説明

〔テーブル形式のデータを表示する方法の関連出願の参照〕
本出願は、２００４年１１月２６日に提出した出願番号６０／６３１，１５２の仮出願で、タイトルが「ウェブページにおいて動かないヘッダ（Stationary Header）を備えるデータテーブルを生成する方法」の出願を基礎としている。これにより、優先権を主張し、その開示されている全てはここに示す参照に含まれる。

〔発明の背景〕
テーブルのデータを読みやすい形式で表示することは、インターネットやウェブページの開始以来、常に求められてきた。ウェブページの製作者が、複数の列からなるデータ、例えば２０，５０，１００の列や、より多くの列を表示する必要があるとき、各データ列のカラムのヘッダやラベルは、「固定されている」か「動かない」ことが極めて望ましい。これは、ユーザやブラウザの使用者が、テーブルの上部に位置するカラムのヘッダやラベルを見ることができる状態を保ちつつ、列のデータを下側へとスクロールできるからである。ブラウザは、公知のプログラムのどのようなものでも構わない。例えば、Microsoft Internet Explorerや、Mozilla、Apple Safari、Opera、Firefoxや、これらに類するものが挙げられる。

ヘッダの列をページの上部に静止した状態で残したまま、ユーザがテーブルのカラムに対して垂直にスクロールすることを許すプログラムも存在する。その例の１つが、ウインドウズに準拠するプログラムであり、計算に広く用いられているMicrosoft Excelである。しかしながら、Microsoft Excelは、インターネットのウェブページでデータを表示するのに適したアプリケーションであるＨＴＭＬ（Hyper Text Markup Language）やＣＳＳ（Cascading Style Sheet）を用いる、伝統的なウェブページ（traditional Web Page）ではない。なお、Microsoft Excelのスプレッドシート（spreadsheet）は、ブラウザで閲覧することができるが、これも、ＨＴＭＬやＣＳＳを使用している一般的なウェブページではなく、Microsoft Excelは、使用方法及び使用可能な範囲に多くの制限を有している。

動かないヘッダを有するウェブページを作成する試みはずっと続けられてきた。その中には、１つの列を含む上側のテーブルを備えた２つのＨＴＭＬテーブルを用い、各カラムの幅が、データを格納している下側のテーブルのカラムの幅と合うようにするために、各カラムの「幅」、及び／または、そのテーブルが属するピクセル、または割合が達する程度、を設定する。この方法の欠点は、各カラムに設定する正しい幅を決定することが難しいと感じる者が居る点である。ピクセルであれ、割合であれ、幅の設定を固定値に設定した場合、最初に幅の設定がなければ、上側のテーブルとそのカラムは、「自然に変形（flow）」したり、縮んだり、幅が広がったりすることが、容易にはできなくなる。さらに、データがデータベース由来のものである場合、データも同様に絶えず変化し得る。ゆえに、上側のテーブルにおけるカラムの幅が、表示するデータとヘッダに対して大きすぎたり小さすぎたりすることが起こり得る。

テーブルにおいて、動かないヘッダを表示する他の方法としては、ＨＴＭＬ ＦＲＡＭＥＳとＩＦＲＡＭＥとを用いる方法がある。ウェブページにＦＲＡＭＥＳを用いることの欠点を列挙しているウェブサイトは極めて多い。欠点には、ブックマークや印刷を行うことが難しい点が挙げられる。また、「きれいな（clean）」レイアウトと追加のスクロールバーを必要とする点も欠点である。さらに、ＨＴＭＬ ＦＲＡＭＥＳやＩＦＲＡＭＥを用いたウェブページは、設計や維持が難しい点も欠点である。

さらに、問題を複雑にしているのは、複数ブラウザで稼動する、動かないヘッダ表示方法が強く望まれていることである。ブラウザ間で適合できるようにすることは、動かないヘッダを用いない場合でも、達成することが極めて難しい。そして、さらに問題を複雑にしているのは、各ブラウザは、使用されるブラウザに依存しており、個人がそのブラウザにおけるテキストサイズを設定したり、無効にしたりできるテキストサイズ設定を持っていることである。これにより、ウェブプログラマーやウェブ開発者、ウェブデザイナーがあるデータにフォントの設定を行った場合であっても、個人のユーザが、彼らが使用しているブラウザに依存して、彼らが所望するフォントサイズでウェブページを閲覧できるように上記設定を再設定することが可能なのである。

ウェブページにおける固定されたヘッダを有するテーブルを設計するときに考慮すべき因子は数多い。以下に、これらの因子のいくつかを列挙する。

１．固定されたヘッダを有するテーブルは、一般的に、いくつかの種類のデータベースに記録されたデータを表示するために使用される。このようなデータは、常に変化し得る。ゆえに、＜td＞の幅を設定することは、非常に困難である。

２．ヘッダ情報の列の文字、そしてフォントサイズ及び線の太さ（例えば太線）もまた変化し得る。これは、カラムの配列にも影響を与える。

３．データセルの中に画像も配置することができる。このことも考慮する必要があり、考慮していない場合には、配列が悪くなる。

４．画像は、ヘッダ内に配置することができる（例えば分類の説明）。上記と同様に、このことを考慮していない場合には、カラムが一直線に並ばなくなる。

５．ブラウザのバージョンや種類によって、データは異なって表示されることがある。ささいな差異であっても、カラムが一直線に並ばなくなる原因となり得る。

６．ユーザのブラウザウインドウのサイズは、データの表示に影響を与える。ウインドウのサイズを小さく、あるいは大きくしているユーザは、データの表示に影響を与える。ブラウザが最大化されている場合には、このことが配列に影響を与え得る。

７．文字サイズの設定といったその他のブラウザ設定もまたカラムの配列に影響を与える。文字サイズの設定は、個人によって行われ、カラムの配列に影響を及ぼしやすい。各ブラウザのＨＴＭＬフォントユニットタイプの宣言（HTML font unit type declaration）の実行もまた異なっている。すなわち、あるブラウザで調整できるフォントユニットのサイズは、他のブラウザでは文字の調整ができない。例えば、ＩＥの文字サイズの調整では、ピクセル（px）のユニットサイズに用いられるフォントサイズの調整を行うことはできない。しかしながら、MozillaやOperaといったブラウザでは、ユーザがピクセルのフォントユニットタイプの調整を行うことができる。本方法（instant method）は、これらの中でいくつかの利点を与える。

１．多くのユーザは、彼らのコンピュータに未知のプログラムをダウンロードすることに対して慎重である（ウイルスやスパイウェアのため）から、ユーザがプラグインを使用したり、プログラムをダウンロードしたりせずに済むようにする。

２．システムの応答の向上、及び／またはウェブサーバとユーザのコンピュータとのパフォーマンスの向上のため、ウェブページあたりのデータ及び／またはコードのダウンロードを最小化する。

３．固定されたヘッダのコードをより多くのユーザに、及び／またはより早く提供するために、ウェブサーバのＣＰＵの負荷を最小化する。

プラグインのフラッシュのように、ヘッダが固定のテーブルを実行可能なプログラムは存在する。しかしながら、これは、通常のＨＴＭＬにはなく、それゆえに、まずフラッシュと共に動作する他のオーサリングツールが必要となる。この点に関して、フラッシュは遅れていると報告されている。さらに、ウイルスやスパイウェアが存在することにより、インターネットからコンピュータに何かをダウンロードすることは危険を伴う。ActiveX、Java Appletsのようなプログラムは、ハッカーがユーザのコンピュータを感染させる際によく用いられる。そのため、ユーザは、そのようなプログラムを拒否するセキュリティの設定を行い、上記のようなプログラムがコンピュータにインストールされることを防ぐ市販の保護ソフトウェアを購入したりもする。

Microsoft Excelがブラウザで閲覧可能であることは知られている。しかしながら、あるエクセルのページのみが表示されることは好ましくない。さらに、エクセルのファイルは、ウイルスやスパイウェアを運ぶことができるので、ハッカーは、その活用方法を知っている。加えて、同様のことができるものにJava言語があるが、これもまた、安全な言語として受け入れられており、ユーザのコンピュータにはじめから入っている、通常のＨＴＭＬやＣＳＳ及びJavaScriptではない。

ウェブページのソフトウェアには、ヘッダのカラムを「ダブルクリック」することにより、そのカラムを適当なサイズに自動変更する機能を有するものもある。このステップが追加されることによって比較的簡単な仕事が複雑になるので、有益ではない場合がある。このステップを許すウェブページは、JavaScriptに大きく依存しており、事実上、ＨＴＭＬには依存していない。そのようなページは、ユーザのブラウザにロードする時間がかかり、「重い」感じを与える。確認していないが、このステップは、Macintoshでは動作しないと思われる。これは、そのようなプログラムで使用されるJavaScriptは、かなり精巧で複雑であるからである。すなわち、異なるブラウザ間で異なる効果が生じうるJavaScriptでは、ブラウザ間での互換性を達成することが難しいということになる。

ヘッダが固定されたテーブル（あるいはデータグリッド（datagrid））を作成する際には、これらの因子及びその他の因子を考慮すべきである。これらの因子の１つでも、それがどんな小さなことであっても、誤った配列の原因となり得る。それゆえ、ウェブページというものが始まってから今に至るまでの間には、製品としての品質レベルで使用できる固定されたヘッダは達成されていない。製品品質のヘッダが固定のテーブルは、一般に普及しているブラウザの大半（例えば９９％）で使用可能であるべきであり、表示されているデータと同様に、ユーザの多くの設定に適応することができる。

本発明は、従来の方法における欠点を解消し、テーブルにおいて、一番目の水平方向の列が動かない状態のまま、ユーザがカラムを垂直方向にスクロールすることができるデータ表示方法を提供することを意図している。インターネットに接続する全ての人は、ほぼ全てのブラウザで、本発明の方法によって設計されたヘッダが固定のテーブルにアクセスすることができるだろう。

〔発明の要約〕
このように、本発明の目的は、テーブル形式のデータを表示する方法を提供することである。

本発明の他の目的は、１番目の水平列のデータが動かない状態を保った状態でウェブページにテーブル形式のデータを表示する方法を提供することである。

本発明におけるこれらの目的及びその他の目的は、ヘッダが「固定された位置」に残っている状態で、テーブル化されたデータを表示する方法を提供することによって達成される。同時に、データテーブルは、ヘッダの配列が残った状態で垂直にスクロールすることができる。上側のテーブルのヘッダ列は、下側のデータテーブルにおける、下側のデータカラムに対応する小見出しのカラムを複数含んでいてもよい。この方法によれば、ヘッダテーブルは、少なくとも２つの列を含み、下側のデータテーブルも少なくとも２つの列を含む。上側のヘッダテーブルにおける１つの列は、閲覧可能なヘッダテキストを含み、これを表示する。２番目の「隠し」列は、プレースホールダーテキスト（placeholder text）またはそれぞれが対応するヘッダカラムの幅を自動的に設定するＨＴＭＬを含む。各「隠し」列のヘッダカラムにおける、プレースホールダーテキストまたはｈｔｍｌは、各データセルの最大の幅を計算し、下側のデータテーブルにおいて、それに対応するテキストまたはＨＴＭＬを計算することで決定される。その対応するカラムにおける最大の幅を含むセル内の上記テキストあるいはＨＴＭＬは、その後隠しヘッダ列のセルにおけるプレースホールダーとして用いられる。隠し列及びセルは、そのセルがユーザに見えないようにする補助として、ＣＳＳを用いる。

隠し列に含める必要がある画像がある場合、これらの画像の高さは、より小さな値に設定される。例えば、高さ＝０や、高さ＝１、高さ＝２等である。これにより、隠し列は、オリジナルの幅を保ったまま、高さが低くなる。加えて、他のＣＣＳ法では、隠し列や隠しセルに「hidden」という目に見えるプロパティを設定している。データテーブルのスクロール可能な部分は、ＤＩＶタグを用いて製作されており、このＤＩＶタグのＣＳＳの属性をスクロールバーが表示されるような値に設定している。ＣＳＳの属性値は、典型的なものとして、高さ、オーバーフロー、オーバーフローＸ（overflow-x）、オーバーフローＹ（overflow-y）等がある。このような情報は、プログラム経由で、あるいは直接ウェブページで設定することができる。

上側のヘッダカラムのそれぞれにおけるテキストやＨＴＭＬの幅は、各カラムについて、下側のデータテーブルの幅と比較される。上側のヘッダテーブルにおけるセルのテキストやＨＴＭＬの幅が、下側のデータテーブルの対応するいかなるセルよりも広い場合には、他の隠し列が下側のデータテーブルに追加される。下側のデータテーブルにおけるこの「隠し」列は、下側のデータテーブルのカラムが自動的に上側のヘッダテーブルのカラムと同じ幅にサイズ変更されるように、ヘッダテーブルのＨＴＭＬまたはテキストに対応するものを含んでいる。これら２つのテーブル、上側のヘッダと下側のデータとは、データまたはヘッダラベルを交換し、それらをそれぞれのカラムや列における「隠し」に配置する。これらの隠し列には、ＣＳＳのプロパティや、例えば「visibility：hidden」や、「display：none」等の値を利用して「入れ替え」のデータやヘッダラベルのコピーを隠す。さらに、「入れ替え」のデータやヘッダラベルのコピーは、そのデータやヘッダラベルそのもののコピーでなくてもよく、相対するテーブル、例えば上側のヘッダテーブルと下側のデータテーブルの対応するカラムの幅と合うＨＴＭＬやテキストであればよい。

本方法においても、下側のデータテーブルの各セルにおけるテキスト及び／またはＨＴＭＬの幅を決定する。特に、テキストは、固定された幅を有していないCourierのようなものでなければ、異なるタイプのプロポーショナルフォント、例えばArial、Times等を用いてもよい。上記方法では、１つのセルのデータについて、全文字の合計幅を計算し、この合計幅を用いて、相対するテーブルの対応するセルにコピーして配置するべきＨＴＭＬまたはテキストを決定する。

この方法において、重要な点の１つは、カスケーディングスタイルシートのプロパティ(cascading style sheet property)によって隠されたデータの「プレースホールダー」列を追加で用いる点であり、２つ目は、カラムのデータと動かないヘッダとを適切に整列させるために、あるカラムにおける最も幅が広いセルを、関連するあるいは複写したコンテンツを隣接するテーブルに配置するための計算に利用する点である。

他の実施形態では、テーブルにおける各カラムの幅（ＨＴＭＬにおける＜ＴＤ＞）は、ピクセルまたは割合で、データの幅とヘッダの幅とを計算し、ヘッダセル及びデータセルから最大の幅を選択することによって、動的に設定することができる。割合が希望されている場合は、各カラムの最大のセル幅を合計し、その後、各ヘッダ及びデータカラムの割合を計算することができる。また、そのテーブルにおける最大の文字幅もまた、後に、あるカラムにおける、また複数のカラムにおける最大の幅を小さくするために、過度に長いデータを“…”や他のしるしを用いた省略法によって短く修正することができる。

本発明にかかるヘッダの動かないテーブルのシステムを、第３の（３ｒｄ）テーブルである他のテーブルや、あるＣＳＳやＤＩＶのタグと連結するために用いることにより、高速な処理を行うことや、複数のカラムのドロップダウンリストを作成することもできる。ほぼ全てであるとは言えないかもしれないが、インターネット上における大部分のドロップダウンリストは、１つのカラムのドロップダウンリストである。複数カラムのドロップダウンリストは、いくつか存在するが、これらのタイプの構成には多くの制限がある。それゆえ、そのような複数カラムのドロップダウンリストを用いる、主流のあるいは人気のあるウェブサイトは、実質的に皆無である。

本方法では、ウェブページで複数カラムのドロップダウンリストを表示することもできる。その方法では、付加的に、ユーザの入力に従って下側のデータ列を縮めたり展開したりしながら、上側のデータ列のカラムと下側のデータ列のカラムとを一直線に並べる。上記方法によれば、ユーザは、ウェブページにおいて、Excelのようなスプレッドシートのプログラムを見ているときに、データ列を垂直にスクロールしたときに、固定されたヘッダ列を見ることができる。下側の列のカラムと固定されたヘッダ列のカラムとが一直線に並んでいることにより、ユーザは、固定されたヘッダ列に配置されているカラムの名前を容易に見ることができる。

本発明の他の側面は、ユーザがサイズ変更計算をサーバ及び／またはクライアントで完了させることができ、カラムを自動的にサイズ変更することにより、ユーザが不必要なダブルクリックを行ったり、「正しい」サイズのカラム幅を得るためにユーザが別途余計な介入を行ったりすることを必要としない。

〔図面の簡単な説明〕
ここで、図面の参照を行う。ここでは、同様の構成要素を同様の番号で示している。

図１は、１つのヘッダと１つまたは複数のデータセルとを含む、１つのカラムのデータ表示概略図である。

図２は、各カラムが１つのヘッダと１つまたは複数のデータセルとを含む、複数カラムのテーブルの概略図である。

図３は、隠しヘッダと隠しデータセルとを有する、１つのカラムのデータ表示概略図である。

図４は、隠し列を見ることができる、固定ヘッダテーブルを示す図である。

図５は、隠しヘッダを備えるテーブルを示す図であり、存在する（existing）ヘッダセルは、そのカラムで最も幅広く表示されている。

図６は、データセルがカラム内で最も幅広に表示されているテーブルを示す図である。

図７は、隠しデータセルのコンテンツがそのカラムで最も幅広に表示されているテーブルを示す図である。

図８は、隠し列を隠すためにＣＳＳスタイルシートのコードスニペット（CSS style sheet Code Snippet）を用いて表示したテーブルを示す図である。

図９は、固定されたヘッダテーブルを含む、複数カラムのドロップダウンボックスの縮めた状態と展開した状態とを示す概略図である。

図１０は、セル列における異なるカラムが最も幅広であるＨＴＭＬテーブルを示す図である。

図１１は、２つのテーブルを示す図であり、上のテーブルではデータが移動されており、下のテーブルではヘッダが移動されている。

図１２は、本発明での使用に好適な「Geneva」フォントのための文字幅の一例を示すテーブル例である。

図１３は、本発明での使用に好適な「Times」フォントのための文字幅の一例を示すテーブル例である。

図１４は、「New Orleans Saints」という語句の表示幅を計算するシートの一例を示す図である。

図１５は、上記２つのテーブルを表示するテキストサイズの設定をユーザが変更することのできるウェブページを示す図であり、〈ＴＤ〉の幅の値が同じ場合には、適切に並ばないことがある。

図１６は、固定サイドバーテーブルを示す図である。

図１７は、メインデータテーブルにおける最も高さが高いセルを決定するステップを示す図である。

図１８は、プロセスにおいて、固定サイドバーテーブルのスクロールバー及びプレースホールダーカラムの上にメインデータテーブルが位置しているステップを示す図である。

図１９は、コンピュータのモニタースクリーンに２つの固定ヘッダテーブルが表示され、テーブルのひとつが固定サイドバーテーブルとして動作している様子を示す図である。

〔好ましい実施形態の詳細な説明〕
ここで、図面に戻り、詳細について説明する。図１０に示すＨＴＭＬテーブルは、ヘッダ１２と、列１４及び１６と、複数の垂直方向のカラムＡ，Ｂ，Ｃ，Ｄを含んでいる。カラム幅の属性値が、ある程度のピクセル幅、あるいは幅の割合に設定（あるいは宣言（declare））されていなければ、テーブルは、カラムの最も幅の広いセルで自然と崩れてしまう。例えば、カラムＡでは、＃２の列のセルが最も広く、カラムＢでは、＃１の列のセルが最も広い。しかしながら、カラムＣでは、ヘッダ列における「ColumnＣ」というテキストを含むセルが＃１の列及び＃２の列を含む全ての列の中で最も幅が広い。この例において、ＨＴＭＬテーブルは、幅の属性値が宣言されていなければ、各カラムの最も広いセルにおいて自然と崩れるか、縮んでしまう。

本発明は、１つのデータグリッドが特有のタグを備えるように設計され、固定されたヘッダの区画を作成するように制御する、表示を構造化する方法を提供する。図１１は、ヘッダを含むデータグリッドと、当該データグリッドのすぐ下側に２つの列を有するヘッダと複数の垂直方向のカラムとを含む他のデータグリッドを示している。この図において、データは、ヘッダを含むデータグリッドから分離されているので、他のテーブルやセルの幅の設定がなされていなければ、テーブルは、自然に最小のカラムの幅へと縮んでしまう。MozillaやOpera等のブラウザは、各ユーザがウェブページのコンテンツの文字サイズを彼ら独自の設定にすることを許している。これにより、目が悪い者やフォントサイズが小さすぎるウェブページを各ユーザがカスタマイズすることができる。この追加の設定は、ヘッダの固定されたテーブルを開発する際に考慮する必要がある。

本発明のテーブルデータ表示方法は、「交換」及び「隠す」ステップによって達成される。まず、ソフトウェア開発者や、ウェブページデザイナーは、可視下側のテーブルであるスクロール可能なデータテーブルの各カラムの最大セル幅を決定する。これにより、上記デザイナーはテーブル間でどの情報を交換するかを決定することができる。次に、各カラムで最大の幅をもつセルについて、それぞれのコンテンツのコピーをデータテーブルの上側に位置する固定ヘッダテーブルの見えない列に配置する。そして、上記デザイナーは、固定ヘッダテーブル（上側のテーブル）の各セルのヘッダコンテンツの幅（テキストまたはＨＴＭＬ）がスクロール可能なデータテーブル（下側のテーブル）の最大セル幅よりも大きいか否かを決定する。ヘッダコンテンツの方が幅広い場合、デザイナーは、ヘッダのコピーをスクロール可能なデータテーブルの特別な見えない列に配置する。デザイナーは、ホールダー式（holder-type）の列において、交換した情報を見えなくし、各テーブルにおける交換したコピーを隠す。また、デザイナーは、あるブラウザでは、調節するカラムに画像があることを感知できるように、高さを少なくとも一（１）にする必要があることを考慮して、交換した画像（もし、あれば）の高さの値を１（または一般的にはより低い高さにする）にする。また、ブラウザでは、高さがゼロ（０）に反応するものもある。

「交換」の結果、同数のカラムを含むテーブルが２つできる。１つのテーブルにおける同じカラムの最も幅の広いセルが対応するテーブルのそれよりも幅が広い場合には、そのテキストのコピーが対応するテーブルに配置される。これにより、対応するテーブルは、始めのテーブルよりも幅が広くなる。対応するテーブルから始めのテーブルまでを除いて（except from the opposite table to the originating table）同じステップが繰り返される。このプロセスは、ヘッダテーブル及びデータテーブルという２つのテーブルの各カラムにおけるテキストまたはＨＴＭＬのバランスを取って幅を等しくする。その結果、双方のテーブルにおける垂直方向のカラムの幅が互いに一直線に並ぶことになる。所望であれば、上記のアルゴリズムは、コードとしてまとめ直すこともできるが、この場合も全体の方法及び概念は変わらない。

図１に示す例では、テーブル２０には、ヘッダテーブル２２と、ヘッダテーブル２２の下側に位置するデータテーブル２４とが形成されている。ヘッダテーブル２２は、２６という数字で示される可視ヘッダセルＡと、２８という数字で示される隠しヘッダセルＡとを含む。下側のデータテーブル２４は、３０という数字で示される第１の可視データセルＡ１と、３２という数字で示される第２の可視データセルＡ２とを含む。３４という数字で示される隠しデータセル３４は、第２データセル３２の下側に位置している。隠しデータセル３４は、ヘッダテーブル２２及びヘッダセル２６から取得したデータから、プレースホールダーとして用いられる。隠しヘッダセル２８は、可視データセル３０及び３２に配置されている情報のタイプに応じて幅が広がったり縮まったりする。例えば、説明のため、より幅の広い第１または第２データセル３０，３２が選択されたとすると、その情報のコピーが隠しヘッダセル２８に配置される。同様に、可視データセル２６のコンテンツがデータセル３０，３２の何れよりも幅広であった場合には、ヘッダセル２６のコピー、あるいはヘッダセル２６の代わりとなるものが隠しデータセル３４に配置される。

「交換」と「隠し」との結果、デザイナーは、同じ表示幅を有し、それゆえ同じカラム幅を有し、２つのテーブル、すなわちテーブル２２とテーブル２４との端部が一直線に並ぶ、上側のヘッダテーブル２２及び下側のデータテーブル２４という２つのテーブルを得る。

図２は、上述したステップを複数のカラムがある状況に適用した状態を示す図である。ここでは、ヘッダテーブル４０は、各カラムＡ，Ｂ，及びＣについて、３つの可視ヘッダセルＡ，Ｂ，及びＣを備え、同様に、カラムＡ，Ｂ，及びＣについて隠しヘッダセルＡ，Ｂ，及びＣを備えている。データテーブル４２は、ヘッダテーブル４０の下側に位置し、１つまたは複数のデータセルＡ１，Ｂ１，Ｃ１と、任意のデータセルＡ２，Ｂ２，及びＣ２とを備えている。各カラムのそれぞれにおける隠しデータセルは、データセルＡ２，Ｂ２，及びＣ２の下側に位置している。データテーブル４２のカラムＡ，Ｂ，及びＣのそれぞれにおいて、データセルのカラムの表示幅が最も広いものが決定される。例えば、データセルＡ１またはＡ２のどちらがテキストまたはＨＴＭＬにおいて幅が広いかを決定し、次にデータセルＡ１またはＡ２のより幅の広い値で隠しヘッダセルのコンテンツを埋める。これにより、データテーブルのカラムＡで最も広い幅に等しい、同じ結果の幅を得ることができる。

図３は、ヘッダテーブルとデータテーブルとで最も表示幅の広いものが、対応するテーブルの隠し列／セルに写される状態の一例を示す図である。動かないヘッダを設計する方法では、デザイナーは、まず、データテーブル４４においてデータセルＡ１の表示幅が、データセルＡ２のそれよりも広いか否かを決定する。「表示幅」は、文字幅と、線の画像の幅との合計である。複数の線がある場合には、文字幅の合計が最も大きくなる線と画像とが選択される。文字の幅の単位は、ピクセルやポイント、エムズ（em’s）、または他の任意の絶対もしくは相対測定単位とすることができる。図１２−１４は、各文字のサイズ、及びデータセルまたはヘッダセルに配置し得る語句の計算の例を示している。

データセルＡ２がテキストまたはＨＴＭＬにおいて、より幅が広かった場合には、データセルＡ２のコンテンツのコピーまたはデータセルＡ２のコンテンツに代わるものがヘッダテーブル４６の隠しヘッダセルＡに配置される。逆に、ヘッダセルＡがデータセルＡ１やデータセルＡ２よりも広い表示幅を占めている場合には、データセルＡ２の下の隠しデータセルＡに、ヘッダセルＡのコンテンツのコピーまたはヘッダセルＡのコンテンツに代わるものがヘッダテーブル４６の隠しヘッダセルＡに配置される。隠しヘッダセルＡと隠しデータセルＡとの両方は、カスケーディングスタイルシートのプロパティ（cascading style sheet property）：visibility：hidden；and line-height；1px；を用いている。

隠しヘッダセルＡまたは隠しデータセルＢに配置する画像がある場合には、その画像の高さが、高さ＝１、または高さ＝０に修正される。表示幅を比較し、隠しヘッダ、または隠しデータセルにコンテンツをコピーするステップは、次のカラムでも繰り返される。その結果、ヘッダテーブル４６とデータテーブル４４とは、等しい幅を有することになり、これにより、垂直方向のカラムの配置や幅、及び端部の配置が同じになる。

図４は、固定された、あるいは動かないヘッダを備え、隠し列がユーザの画面で見える状態のテーブルの一例を示す図である。隠しヘッダ列４８の隠し列領域は、可視ヘッダ及びデータ領域において最も広い「表示幅」を有する領域と部分的に同じになっている。１段目の可視列５０は、「Order # ID（注文＃ＩＤ）」を示す第１カラム５２、「Customer ID（顧客ＩＤ）」を示す第２カラム５４、「Ship Name（船名）」を示す第３カラム５６、「Order Date（注文日）」を示す第４カラム５８、及び「ShipCountry（船の国籍）」を示す第５カラム６０を含んでいる。第３カラムで最も幅の広いテキストである「Vins et alcools Chevalier」は、可視データテーブル６８のOrder＃１０２４８の列に見られ、これが隠しヘッダセル６２と、隠しデータ列６６における隠しデータセル６４との幅を制御する。

図５に示す図では、スクロールバーが示されていない。この図では、ヘッダセル７０がカラム７２のそれぞれの中で最も表示幅が広い。また、ヘッダセル７０は、カラム７２に対応するデータテーブル７４におけるテキストよりも幅が広い。隠しヘッダセル７６は、ヘッダセル７０から複写したデータを含んでいる。画像は、先々隠すことができるように高さが「１」に縮められる。最も幅の広いカラムのテキストと同じテキストは、隠しデータセル７８に複写され、そのカラムの最も下の列を占める。しかしながら、隠しデータセルは、デザイナーの好みに応じてカラムの中間位置や最上段に位置していても良いことに注意するべきである。

図６は、カラムの中で１つのデータセルが最も幅広である状態の図である。この図では、カラム８２においてデータセル８０が最も表示幅が広い。同じデータが隠しヘッダ８６及び隠しデータセル８８に複写されている。図６では、隠しヘッダ及びデータテーブルのセル８６，８８を見ることができるが、ＣＳＳ式のプロパティがこれらのコンテンツを「隠す」ために用いられることは、理解できるであろう。例えば、ＣＳＳプロパティの：visibility：hidden；and line-height；1px；を、隠しヘッダセル８６及び隠しデータセル８８を隠すために用いることができる。

図７は、データセルの１つ、この場合データセル９０が、そのカラムにおいて最も幅広に表示されている状態を示す図である。隠しデータセル９０のテキストは、カラム９２の中の何れかにあるテキストに由来しており、ユーザがカラム９２をスクロールバー９４で「Centro commercial Moctezuma」とのテキストに向かって下側へ動かしたとしても、その表示を見ることはできない。テーブルに何ページかのデータがある場合には、ブラウザ上で現在は見えないページの最も幅広いデータの値で良く、ユーザがスクロールバーを下側に移動させたときでさえ見えないページの最も幅広いデータの値でも良い。隠しヘッダセル９６は、隠しデータセル９０と同じ幅に調整される。スクロールバー９４は、＜ＤＩＶ＞タグとＣＳＳの属性、すなわち高さとオーバーフローｘとオーバーフローｙとを用いて作成することができる。

図８は、隠し列（プレースホールダー列）を隠すために用いられる、ＣＳＳスタイルシートのコードスニペット（Code Snippet）９８を示す図である。この図において、ヘッダセルとデータセルの隠し列とは隠されており、ユーザには見えないようになっている。

図９は、動かないヘッダを有する複数カラムのドロップダウンボックスの縮めた状態と展開した状態とを示す図である。複数カラムのドロップダウンボックスは、データテーブルとそのヘッダ列とを隠したり、見えなくしたりするために、より多くの＜ＤＩＶ＞タグを用いる。その結果、ユーザのコンピュータ端末における表示は、図９に示すような縮めた状態となる。特別な（extra）＜ＤＩＶ＞タグは、ヘッダテーブルと同様に、データテーブルの全体を取り囲む（surrounds）。他のプログラム方法や命令によって＜ＤＩＶ＞の属性を制御してそれを隠したり、隠さなかったりする。

図１２及び１３は、「Geneva」及び「Times」向けの可能な文字幅のサンプルを提供するものであり、慣用のフォントサイズとしてピクセル単位を用いている。また、同じフォントにおいて、ポイントサイズが、他のポイントサイズと比べて、幅に関して異なっていても良い。非常に多くの異なるサイズやバリエーションがあるので、隠れたコピーを行い（make a hidden copy）、ユーザのブラウザがサイズ計測の処理を行うことができるようすることが好ましい。図１４は、合計サイズが９４．２１２２３ピクセルの「New Orleans Saints」という語句の表示幅の計算例を示す図である。

また、図１２及び１３は、多くの文字が同じフォントグループ内で同じ幅を有していること、または他のフォントグループと文字幅が一致していることを示している。よって、本発明では、カラムの幅を調節するための隠しヘッダセル８６及び隠しデータセル８８のオリジナルの文字に代えて、他の文字や他の文字の組合せを用いることができる。符号化したデータや「代わりの」データもまた、カラムの幅の調整に用いることができる。すなわち、隠しヘッダセル８６にデータをコピーする代わりに、隠しヘッダセル８６と、カラムの中で最大のデータセルとの間の関連付けを行うことができ、そして次に隠しヘッダセル８６に「代わりの」データをコピーすることができる。

本発明は、「動かない」ヘッダを有する表示テーブルを製作する代替の方法も提供している。上記代替の方法によれば、ソフトウェアプログラムは、まず、スクロール可能なデータテーブルまたは下側のテーブルの各カラムにおける最大のセル幅を決定する。次に、プログラムは、固定された上側のテーブルの各セルについて、そのヘッダコンテンツがスクロール可能なテーブル（下側のテーブル）の中の最大セル幅よりも広い幅を有しているか否かを決定する。次のステップでは、プログラムは、最小のカラム幅を計算し、そして下側のテーブルの各カラムを同じ最小のカラム幅に設定する。これにより、固定の上側のテーブルとスクロール可能な下側のテーブルとが一直線に並ぶことになる。

本発明の最初の実施形態で述べたような、プレースホールダーデータを隠しセル内に配置する代わりに、テーブルのセル＜td＞の幅の設定によってもカラムの幅を調節することができるので、プログラムは、各カラムの最大セル幅を簡単に計算及び決定することができ、そして次に、＜td＞セルの幅の属性がどのような値となるかを計算することができる。
＜td width=“maximum calculated number in pixels”＞。

上記代替の方法では、テーブルセルの幅＜td width=“in pixels”＞を設定するコーリング（calling）において、所定のものを必要とする（require certain）であろうことが想像される。例えば、プログラマーがテーブルを１００％の幅に設定したいと考えた場合には、＜td＞が固定されることにより、＜td＞の幅をはじめから設定しないばあい程には、簡単できれいに変形したり伸びたりはしないと考えられる。このような状況は、例えばあるセルが多くのテキストを含んでおり、次の下の行にまで達するようなときに起こる。ウェブサイトのテーブルを１００％の幅にして、幅において可能な限りの余地を確保する方が良いときもある。また、スペースを節約するために、テーブルの幅を可能な限り小さく縮める方が良いときもある。

プログラムがカラムの幅を設定することのできる方法は、非常にたくさんある。例えば、カラムの幅は、＜td＞の幅の属性を：（１）ピクセルの値、または（２）割合の値に設定して決定することができ、または（３）値を設定せず、セル内のコンテンツによってそのセルの幅を決定させることで決定することができる。さらに、隣接するカラムのコンテンツ及び幅の属性値もまた、カラムの幅、特に割合の幅に影響を与える。プログラマーが、表示するテーブル形式のデータが複数の列を有し、短いものや、画像が結合されたものや、画像を有するヘッダや、テキストや、それらの組合せを含む状況に遭遇した場合であっても、上記のように計算された各文字のフォントサイズは、ブラウザからブラウザへと変化することが可能である。ユーザが彼または彼女のブラウザで設定するウインドウサイズは、解決等している（resolution, etc）。各フォントタイプは、主流のそして一般的なコンプライアント（compliant）ブラウザプログラムを含む、あるプログラムと他のプログラムとの間で微妙に変化する。これらのわずかな違いによって、プログラムやブラウザにおいて、ヘッダのカラムがデータカラムと完全には一直線に並んでいないように見えることになる。

下記のテーブルと図１５とは、幅の属性値において同じＴＤの値を有している。このテーブルにおけるセルのコードと幅の値とを以下に示す：

上記２つのテーブルに見受けられるように、２つのテーブルのカラムは、互いに一直線上に並んでいる。この図は、２つのテーブルが実際に離れているように見えるように、２つのテーブル間に空間を設けたことを示すものである。しかし実際には、上記２つのテーブルは、互いに垂直方向の距離がより近く、また互いに接していることもある。しかしながら、ユーザが、図１５に示すブラウザオプションを介して上記テーブルのテキストサイズの設定を変更した場合には、ユーザがブラウザで変更したテキストサイズ設定にしたがって、上記２つのテーブルは、異なる率で拡張し始めるということがあり得る。これにより、上記２つのテーブルは、そのカラムが互いに一直線に並んでいる状態から離れてしまう。固定ヘッダの内部のフォントが調整可能な設定とは逆に、あるピクセルの設定に固定されている場合には、そのテーブルのカラムは、少なくとも「Internet Explorer」では一直線に並び、おそらくは他のブラウザを使用するときもそうであると考えられる。ゆえに、全てのカラムが適切に並んだ状態を保ちたい場合には、プログラムは、各カラムの幅を設定する代わりに、各カラムの最大幅を設定するべきである。

本書面で述べる複数カラムのドロップダウンリストは、ついに製品品質レベルのブラウザ間での互換性（cross-browser compliant）を成し遂げることができたことを示している。上記複数カラムのドロップダウンリストは、上記の動かないヘッダテーブルで述べたように、選択されたデータ列に対して、事実上等しい入れ替えと繰り返し（swapping and synchronizing）とを用いる。第３の（3^rd）テーブルは、カラムの幅が他のデータテーブルのカラム及びヘッダテーブルのカラムと一直線に保たれるように、まだ訂正データの場所を占める（still populated with the correct data）、ＣＳＳを介した隠し列を有している。さらに、ユーザがデータテーブルにおいてある項目を選択したときには、その項目は、この３番目の（3^rd）テーブルに場所を占めることになる。

多くのコンピュータ言語が本発明の動かないヘッダを備えたデータテーブルの手段として使用可能であると考えられる。なお、本方法を実行するために、ユーザは、「クライアント／サーバ」形式におけるサーバを適用し、クライアントのブラウザがJavaScriptやJavaやVBScriptのような言語を介するようにすることができる。さらに、本方法の一部は、ウェブサーバとクライアントとの両方によって実行可能である。

サーバ側の言語に関しては、多くの選択肢がある。例えば、Java、J2EE、Perl、PHP、ColdFusion、Python、Visual Basic、ASP.NET、C#、J#、JSP、HTMLといった、機械語、またはアセンブリ言語がここで述べる方法を実行するために使用できる。これらのテーブルのデータは、一般的にMS Access、SQL Server、IBM DB2、Oracle、MySQL等のデータベースに由来する。やはり、XMLファイル、フラットファイル（flat file）、JavaScriptのオブジェクトやいくつかのカスタマイズされたデータフォーマットに由来するものに由来していてもよい。データの埋め合わせには、また、サーバとクライアントのブラウザとの間で動作及び反応時間を改善するために、非同期のJavaScriptとXMLとによるAJAXで参照される方法を用いることもできる。また、使用する言語及びデータベースによってバリエーションは異なるが、動かないヘッダを作成し、カラムを一直線に並べる同じ方法を用いることができる。

本発明のさらなる特徴点は、データセル列の高さを調節する、セルの固定サイドバーを作成することである。これは、上下にスクロールする場合のみならず、隠れたカラムを見るために、メインヘッダテーブルを左または右にスクロールさせたときでも、メイン固定ヘッダテーブルと垂直方向の同じ位置を保つ。この仕事は、一般に、高さにおいて、１，２，３等の行のみを含むので、固定のヘッダを作ることに比べて、何か簡単なように見える。しかし、Excelのようなその大きな特徴が設定されているスプレッドシートプログラムをこの発明の実行に用いる場合には、そのプログラムはかなり複雑になり得る。

固定サイドバーを形成するために、プレースホールダーカラムのための交換処理と同じ概念を用いる。プログラムは、ラインブレーク（line breaks）の数を調べ、その結果に応じてデータセルの入れ替えを行う。これにより、２つの固定ヘッダテーブルが隣に並ぶことになり、例えば、その左側の固定ヘッダテーブルが固定サイドバーとしても機能することになる。左側のヘッダテーブルのスクロールバーは、完全に消してしまうか、何らかの方法で隠すかする。しかしながら、プログラム言語の中には、固定サイドバーテーブルのスクロールバーの位置がメイン固定ヘッダテーブルのスクロールバーの位置に同調して残ってしまうものもある。

図１６及び１７は、プレースホールダーカラム１０２及び固定サイドバーカラム１０８を備えた、位置が固定されたサイドバーテーブル１００を示している。プレースホールダーカラム１０２は、「Customer ID」とのヘッダ、及び複数のデータセル１０４を備えている。データセルの１つである１０５は、最も情報の量が多く、それゆえに最も高さが高い。

スライド式のスクロールバー１０６は、プレースホールダーカラム１０２の右側に示されている。固定サイドバーカラム１０８は、プレースホールダーカラム１００の左側に示されている。メインデータテーブル１１０は、図１７に示すように、追加のカラムを含んでいてもよい。図１７では、「Ship Name」カラム１１２、「Order Date」カラム１１４、「Ship Country」カラム１１６が追加されている。もちろん、表示されるデータの性質に応じて、メインテーブルが１つだけカラムを含んでいてもよい。

固定スクロールバーを設計する過程のステップの１つでは、ＣＳＳのプロパティ、例えばＣＳＳのｚインデックスレイヤー（z-index layer）を用いて、メインデータテーブル１１０によって、固定サイドバーカラム１０８が見える状態のまま、固定サイドバーテーブルのプレースホールダーカラム１０２及びスクロールバー１０６を隠す。プレースホールダーカラム１０２は、メインデータテーブル１１０またはサイドバーテーブル１００の中で最も高さの値が大きいセルを決定することで作成される。この図においては、セル１０５がそれである。同様に、セルがテキストのみを含む場合には、その値は、行数、キャリッジリターン（carriage returns）、ＨＴＭＬの＜BP＞や＜P＞タグに基づいて決定される。

図１８に見受けられるように、メインデータテーブル１１０は、部分的に固定サイドバーテーブル１００、すなわちプレースホールダーカラム１０２及び固定サイドバーテーブル１００のスクロールバー１０６と重なって（「上に」配置されて）いる。これにより、メインテーブルの表示が、固定サイドバーテーブル１００のスクロールバー１０６を覆うことによってテーブル１００と１１０とが１つのテーブルに見える。

図１９は、本発明をページの表示に適用した他のバリエーションを示しており、２つの固定ヘッダテーブルがあって、その１つは固定サイドバーテーブルとして働く。この図において、大きいテーブル１１２は、固定サイドバーテーブル１１４及び複数のデータカラム１１５を備えている。固定サイドバーテーブル１１４は、水平スクロールバー１１６が左または右に移動される場合でも変化しない固定カラムとして働く。水平スクロールバー１１６は、テーブルの下側に位置し、ユーザが他のカラムのデータを見るために、水平方向の左または右にメインデータテーブルを動かすことができるようにしている。垂直スクロールバー１２０は、プログラムデザイナーの選択に従って、ヘッダが固定された状態、あるいは固定されていない状態で、ユーザがメインテーブルを上下にスクロールできるようにしている。

本発明では、プログラムデザイナーは、２つの隣り合うテーブルを用いる以外にも、同じデータを用いる２つの固定ヘッダテーブルを備えたカラムサイドバーを作成することができる。固定サイドバーテーブルのプレースホールダーカラム及びスクロールバーを隠すために用いることができるＣＳＳのプロパティ（または他の類似の手段）によってプレースホールダーカラム及び固定サイドバーテーブルのスクロールバーが隠れるようにするため、メインテーブルは、固定サイドバーテーブルに「部分的に重なる」または覆う。

さらに、メインテーブルの垂直方向のサイドバーは、両方の列が互いに一直線に並ぶように、固定サイドバーのスクロールバーと同調（synchronized）させる。これは、上記のデータ交換方法を用い、高さが最大のセルを探し、隠し第２カラムと同様に固定サイドバーテーブルのオプションでデータを導入することによってなされる。両方のテーブルは、上下にスクロールするときに、スクロールバーの位置が垂直方向に互いに同じ位置となる。これは、クライアント側のウェブページにおけるJavaScriptを用いた様々な方法で実行することができる。

メインデータテーブルの可視カラム（右または左。スクロールの方向による）が隠された状態で、メインデータテーブルを水平方向にスクロールすることによって、固定ヘッダテーブルのヘッダ及び隠しカラムのデータが次の可視カラムの位置へと入れ替えられる。

本発明の方法は、本発明の精神から離れず、多くの変更、修正を行うことができる。ゆえに、本発明の権利範囲が添付のクレームの範囲のみに限定されないことを請う。

１つのヘッダと１つまたは複数のデータセルとを含む、１つのカラムのデータ表示概略図である。 各カラムが１つのヘッダと１つまたは複数のデータセルとを含む、複数カラムのテーブルの概略図である。 隠しヘッダと隠しデータセルとを有する、１つのカラムのデータ表示概略図である。 隠し列を見ることができる、固定ヘッダテーブルを示す図である。 隠しヘッダを備えるテーブルを示す図であり、存在する（existing）ヘッダセルは、そのカラムで最も幅広く表示されている。 データセルがカラム内で最も幅広に表示されているテーブルを示す図である。 隠しデータセルのコンテンツがそのカラムで最も幅広に表示されているテーブルを示す図である。 隠し列を隠すためにＣＳＳスタイルシートのコードスニペット（CSS style sheet Code Snippet）を用いて表示したテーブルを示す図である。 固定されたヘッダテーブルを含む、複数カラムのドロップダウンボックスの縮めた状態と展開した状態とを示す概略図である。 セル列における異なるカラムが最も幅広であるＨＴＭＬテーブルを示す図である。 ２つのテーブルを示す図であり、上のテーブルではデータが移動されており、下のテーブルではヘッダが移動されている。 本発明での使用に好適な「Geneva」フォントのための文字幅の一例を示すテーブル例である。 本発明での使用に好適な「Times」フォントのための文字幅の一例を示すテーブル例である。 「New Orleans Saints」という語句の表示幅を計算するシートの一例を示す図である。 上記２つのテーブルを表示するテキストサイズの設定をユーザが変更することのできるウェブページを示す図であり、〈ＴＤ〉の幅の値が同じ場合には、適切に並ばないことがある。 固定サイドバーテーブルを示す図である。 メインデータテーブルにおける最も高さが高いセルを決定するステップを示す図である。 プロセスにおいて、固定サイドバーテーブルのスクロールバー及びプレースホールダーカラムの上にメインデータテーブルが位置しているステップを示す図である。 コンピュータのモニタースクリーンに２つの固定ヘッダテーブルが表示され、テーブルのひとつが固定サイドバーテーブルとして動作している様子を示す図である。

Claims (17)

1. コンピュータ制御のスクリーンに、カラム、列、及び当該カラム及び列で規定される複数のセルを備えるテーブル内に配列されたレコード（records）を表示する方法であって、
   上記カラムの小見出し（headings）を表示する第１のスクロールできないサブテーブルを形成するステップと、
   上記第１サブテーブルの上記小見出しに一致するレコードを表示する第２のスクロール可能なサブテーブルを形成するステップと、
   各カラム内のセルにおける最大の幅または高さを示すパラメータに基づいて、上記第１サブテーブル及び第２サブテーブルの各カラムにおける最大サイズのパラメータを決定するステップと、
   上記第１サブテーブルにおいて上記コンピュータ制御のスクリーン上で見える視認可能部位と、上記第１サブテーブルにおいて上記コンピュータ制御のスクリーン上で見えない隠し部位とを決定するステップと、
   対応するカラムの幅または高さのパラメータを決定するために、上記最大パラメータのセルのデータを、上記第１サブテーブルの隠し部位における対応するカラム内のセルにコピーするステップとを備えている。
2. 上記第１サブテーブルの隠し部位にコピーするレコードは、当該レコードを上記第１サブテーブルの隠し部位にコピーする前に予め決定された幾何学的属性値（pre-determined geometric attribute value）に調整された高さであって、予め決定された高さを有している請求項１に記載の方法。
3. 上記幾何学的属性値は、１またはそれ以下の高さの値である請求項２に記載の方法。
4. セル幅は、＜td＞幅の属性を上記セル内のレコードのピクセル値に設定することによって決定される請求項１に記載の方法。
5. セル幅は、残りのデータテーブル（remainder data table）の関係にあって対応するカラムの割合の値（percentage value）を決定することによって決定される請求項１に記載の方法。
6. 上記スクロールできない第１サブテーブルが上記テーブルの固定されたヘッダを規定する請求項１に記載の方法。
7. 上記第１サブテーブルが上記テーブルの固定されたサイドバー（sidebar）を規定する請求項１に記載の方法。
8. コンピュータ読み取り可能な記録媒体の形で表されるコンピュータプログラムコードであって、
   カラム、列、及び当該カラムと列とで規定される複数のセルを備えたデータテーブルとして配列された、データベースのレコードのための一連のパラメータを規定するコンピュータ実行可能なプログラムコードと、
   最大の幅または高さのパラメータを有するセルに表示される上記レコードに基づいて、上記データテーブルの各カラムまたは列の最大の幅または高さのパラメータを決定するコンピュータ実行可能なプログラムコードと、
   各カラムのスクロールできない部位を規定する第１サブテーブルを制定するコンピュータ実行可能なプログラムコードと、
   各カラムのスクロール可能な部位を規定する第２サブテーブルを制定するコンピュータ実行可能なプログラムコードと、
   上記第１サブテーブルの可視部位と、上記第１サブテーブルの隠し部位とを制定するコンピュータ実行可能なプログラムコードと、
   上記第１サブテーブル及び第２サブテーブルにおいて対応するカラムまたは列の幅または高さを規定するために、上記最大のパラメータを有するデータのセルのレコードと、上記第１サブテーブルの隠し部位の対応するカラムのセルのレコードとを関連付けるコンピュータ実行可能なプログラムコードとを備えている。
9. 上記第１サブテーブルの隠し部位に関連付けられたレコードは、当該レコードを上記第１サブテーブルの隠し部位にコピーする前に予め決定された幾何学的属性値（pre-determined geometric attribute value）に調整された高さであって、予め決定された高さを有している請求項８に記載のコンピュータプログラムコード。
10. 上記幾何学的属性値は、１またはそれ以下の高さの値である請求項９に記載のコンピュータプログラムコード。
11. セル幅は、＜td＞幅の属性を上記セル内のレコードのピクセル値に設定することによって決定される請求項８に記載のコンピュータプログラムコード。
12. セル幅は、残りのデータテーブル（remainder data table）の関係にあって対応するカラムの割合の値（percentage value）を決定することによって決定される請求項８に記載のコンピュータプログラムコード。
13. 上記スクロールできない第１サブテーブルが上記テーブルの固定されたヘッダを規定する請求項８に記載のコンピュータプログラムコード。
14. 上記スクロールできない第１サブテーブルが上記テーブルの固定されたサイドバー（sidebar）を規定する請求項８に記載のコンピュータプログラムコード。
15. 上記第１サブテーブルの隠し部位に関連付けられたレコードを当該第１サブテーブルの隠し部位にコピーする請求項８に記載のコンピュータプログラムコード。
16. 上記第１サブテーブルの隠し部位における対応するカラム内のセルにコピーされる上記最大パラメータを有するセルのデータは、上記最大パラメータを有するセルの代替データである請求項１に記載の方法。
17. スクロール可能なテーブル形式のデータのための、ウェブページ上で動かないヘッダ列を作成する方法であって、
    上記テーブル形式のデータと、上記動かないヘッダ列の少なくとも１つのプレースホールダーとを関連付け、
    カラムが、対応する起点のテーブル（corresponding originating table）のセル及びカラムと自動的に同じ幅になるように、対応するテーブルにプレースホールダーを配置し、そして、
    各セルのデータにおける最大のテキスト幅を計算する方法。

Images