KR20070086669A - 테이블의 데이터를 디스플레이하는 디스플레이 방법 - Google Patents

Abstract

칼럼, 열, 및 이 칼럼과 열에 의해 정의되는 복수의 셀을 포함하는 테이블에 데이터를 디스플레이 하기 위한 방법 및 컴퓨터 실행 가능한 프로그램 코드에 관한 것이다. 상기 방법은 하나 위에 하나가 있거나 또는 나란히 위치하는 제1 및 제2 서브-테이블을 생성하는 단계를 포함한다. 상측 서브-테이블은 스크롤 불가능한 고정 헤더를 정의하는 반면, 하측 테이블은 스크롤 가능한 데이터 테이블을 정의한다. 상측 테이블은 보이는 부분과 숨겨진 부분을 포함하며, 각 칼럼에 대응하는 상측 또는 하측 테이블의 최대 폭의 셀로부터 복사된 레코드를 포함한다. 고정 사이드바를 형성하기 위하여, 컴퓨터 실행가능한 프로그램 코드는 열의 최대 높이 셀의 변수를 기초로 하여 열의 높이를 조절한다.

Description

테이블의 데이터를 디스플레이하는 디스플레이 방법{A METHOD OF DISPLAYING DATA IN A TABLE}

인터넷과 웹 페이지를 최초 사용했을 때부터, 표로 만든 데이터(tabular data)를 쉽게 판독 가능한 형태로 디스플레이 하고자 하는 요구가 있어 왔다. 웹 페이지 디자이너는 복수의 열, 예컨대 20, 50, 100 혹은 그 이상의 데이터 열들을 디스플레이 하고자 할 때, 사용자 혹은 브라우저를 사용하는 사람이 테이블의 상측에 있는 헤더 혹은 칼럼 라벨을 보면서 계속 읽을 수 있는 상태에서 데이터 열을 아래로 스크롤 하는 동안 상기 각 칼럼의 헤더 혹은 라벨이 고정(fixed)" 혹은 "움직이지 않는(stationary)" 상태로 머물게 하는 것이 매우 바람직할 수 있다. 상기 브라우저는 예컨대, 마이크로소프트 인터넷 익스플로러, 모질라(Mozilla), 에플 사파리(Apple Safari), 오페라(Opera), 파이어폭스(Firefox) 등의 임의의 공지되어 있는 프로그램일 수 있다.

몇몇 프로그램은 사용자가 테이블의 칼럼을 따라 수직으로 스크롤 하는 동안 헤더 열들이 페이지의 상부에서 움직이지 않는 상태로 머물 수 있도록 허용해준다. 이러한 프로그램의 일례로 회계에 널리 사용되는 윈도우를 기초한 프로그램인 마이크로소프트 엑셀(Microsoft Excel)을 들 수 있다. 그러나 마이크로소프트 엑셀은 인터넷 웹 페이지에 데이터를 디스플레이하기에 적합한 HTML(Hyper Text Markup Language) 혹은 CSS(Cascading Style Sheets)을 사용하는 전형적인 웹 페이지는 아니다. 마이크로소프트 엑셀 스프레드시트(spreadsheet)는 브라우저에서 보여질 수 있지만, 이것은 여전히 HTML 혹은 CSS를 사용하는 전형적인 웹 페이지가 아니며, 다시 말해서, 그것의 용도와 그것이 사용될 수 있는 곳에서 많은 제약이 따른다.

움직이지 않는 헤더를 갖는 웹 페이지를 만들기 위해 여러 가지의 시도가 있어 왔다. 몇몇 시도는 2개의 HTML 테이블을 사용하였는데 상측 테이블은 하나의 열을 포함하는 동시에 각 칼럼의 "폭(width)" 및/또는 테이블 속성을 소정의 픽셀 혹은 백분율의 양으로 설정함으로써 그러한 각각의 칼럼 폭은 데이터를 포함하는 하측 테이블의 칼럼 폭에 일치하게 된다. 이러한 방법의 단점은 각각의 칼럼을 설정하기 위한 정확한 폭의 크기를 결정하기 어렵다는 데 있다. 상기 폭을 픽셀이나 백분율의 정적 값(static value)으로 설정함으로써, 상측 테이블과 그 칼럼은 마치 폭 설정이 원래 존재하지 않았던 것처럼 쉽게 폭 방향으로 "플로우(flow)" 혹은 수축 혹은 확장될 수는 없다. 더욱이, 데이터가 데이터베이스로부터 나오는 경우 그 데이터는 계속적으로 변할 수 있으며, 이에 따라 상측 테이블의 칼럼 폭의 크기는 디스플레이 될 데이터와 헤더에 대해 너무 크거나 너무 작게 될 수 있다.

소정의 테이블에 대한 고정 헤더 열을 디스플레이 하기 위한 또 다른 방법은 HTML FRAMES 및 IFRAMEs를 이용하는 방법이 있다. 웹 페이지에서의 사용에 있어서 FRAMES의 문제점을 수록한 수많은 웹사이트가 존재한다. 몇몇 문제점은 북 마킹과 프린팅이 곤란하다는 데 있다. 또 다른 문제점은 "클린(clean)" 레이아웃과 추가의 스크롤바에 관한 요건이다. 또 다른 단점은 FRAMED 혹은 IFRAME 웹 페이지의 설계 및 유지가 곤란하다는 데 있다.

문제점을 더욱 복잡하게 만들지만, 고정 헤더를 디스플레이 하는 임의의 방법에서는 복수개의 브라우저간에 작동하도록 하는 것이 매우 바람직하다. 또한, 고정 헤더를 사용하지 않더라도 전술한 브라우저 간의 호환성(cross-browser compatibility)을 달성하기는 매우 어렵다. 문제점을 더욱 더 복잡하게 만들지만, 각각의 브라우저는 어느 브라우저를 사용하는가에 따라 개개인이 브라우저의 텍스트 사이즈를 설정할 수 있거나 또한 브라우저의 텍스트 사이즈 설정을 무시할 수 있다. 따라서 웹 프로그래머 혹은 웹 개발자 혹은 웹 디자이너가 데이터를 위한 폰트 셋팅을 설정할 경우라도 개개의 사용자는 그들이 사용하는 브라우저에 따라 전술한 셋팅을 무시할 수 있기 때문에, 웹 페이지를 그들이 보기를 원하는 폰트 사이즈로 쉽게 볼 수 있다.

웹 페이지에 고정 헤더 테이블을 설계할 때 고려해야 할 수많은 인자들이 존재한다. 이들 인자들 중 몇몇은 다음과 같다. 즉,

1. 고정 헤더 테이블은 어느 정도까지는 데이터베이스에 통상 저장되는 데이터를 디스플레이 하기 위해 사용된다. 이러한 데이터는 항상 변할 수 있다. 따라서 <td> 폭 속성을 설정하는 것은 매우 어렵다.

2. 헤더 정보 열의 폰트 사이즈 및 웨이트(예컨대, 굵기)뿐만 아니라 텍스트도 또한 변할 수 있다. 이것은 또한 칼럼의 정렬 상태에 영향을 미친다.

3. 이미지는 또한 데이터 셀에 자리할 수 있다. 이것도 또한 고려되어야 하며, 그렇지 않을 경우 정렬 문제로 고생하게 될 것이다.

4. 이미지는 헤더에 (예컨대, 분류 방향) 자리할 수 있다. 또한, 이것을 고려하지 않을 경우 칼럼은 오정렬될 것이다.

5. 브라우저 버전과 브라우저 타입은 데이터를 달리 디스플레이 할 수 있다. 근소한 차이는 칼럼이 오정렬되도록 만든다.

6. 사용자의 브라우저 창(Window) 사이즈 셋팅은 데이터의 디스플레이에 영향을 준다. 자신의 창을 더 작아지도록 혹은 더 커지도록 설정하고자 하는 사용자는 데이터 디스플레이에 영향을 줄 수 있다. 브라우저가 최대로 되면, 이는 또한 정렬에 영향을 줄 수 있다.

7. 텍스트 사이즈 셋팅 등과 같은 다른 브라우저 셋팅은 또한 칼럼의 정렬에 영향을 미칠 수 있다. 텍스트 사이즈 셋팅은 개개인에 의해 설정되고 칼럼의 정렬에 쉽게 영향을 미칠 수 있다. 각각의 브라우저에 있어서 HTML 폰트 유닛 타입 선언방법 또한 상이하다. 다시 말해서, 소정의 폰트 유닛 사이즈는 몇몇 브라우저에 의해 조절될 수 있는 반면에 다른 브라우저는 텍스트를 조절 할 수 없다. 예컨대, IE 텍스트 사이즈 조절은 픽셀(px) 유닛 사이즈를 사용하는 폰트 사이즈를 조절할 수 없다. 그러나 모질라와 오페라 브라우저는 그 사용자로 하여금 픽셀 폰트 유닛 타입을 조절할 수 있게 해준다. 이 방법은 아래의 장점들 중 다수의 장점을 갖는다.

1. 많은 사용자들은 자신의 컴퓨터에 미지의 프로그램(예컨대, 바이러스, 스파이웨어)이 다운로드 되는 것을 경계하기 때문에 플러그인의 사용이나 프로그램의 다운로드 여부를 사용자에게 질문하는 것을 불필요하게 만드는 장점.

2. 웹 서버 및 사용자의 컴퓨터에 있어서 시스템 응답 및/또는 성능 향상을 위해 웹 페이지당 데이터 및/또는 코드 다운로드를 최소화시킨다는 장점.

3. 고정 헤더 코드를 생성하는데 있어 웹 서버 CPU 부담을 최소화함으로써 더 많은 이용자에게 편의를 제공하고 및/또는 사용자에게 더 신속하게 편의를 제공는 장점.

고정 헤더 테이블을 이행할 수 있었던 플러그인 FLASH 등의 프로그램이 존재한다. 그러나 이것은 표준 HTML이 아니며, 이러한 문제로 우선 FLASH와 함께 작동할 또 다른 오서링(authoring) 툴을 필요로 하게 만든다. FLASH는 이러한 관점에서 느리다는 것으로 알려져 있다. 더욱이, 인터넷으로부터 컴퓨터로 무엇이든 다운로드 하는 것은 바이러스와 스파이웨어로 인해 매우 위험하다. 해커에 의해 ActiveX, Java Applets 등의 프로그램이 사용자의 컴퓨터가 감염되도록 통상적으로 사용되며, 이러한 이유로 사용자는 이러한 프로그램을 거절하기 위해 보안 셋팅을 설정할 것이며, 전술한 프로그램이 사용자의 컴퓨터에 설치되는 것을 방지하기 위해 상용 보안 소프트웨어를 구매할 것이다.

브라우저에서 마이크로소프트 엑셀이 보여질수 있는 것으로 알려져 있다. 그러나 이것은 단지 엑셀 페이지만을 볼 수 있기 때문에 바람직하지 않다. 또한, 해커들이 바이러스와 스파이웨어를 운반하도록 엑셀 파일을 이용할 수 있다는 것으로 알려져 있다. 추가적으로, Java 언어가 또한 존재하지만, 이것도 안전한 언어로서 받아들여지며 사용자의 컴퓨터에 이미 존재하고 있는 간편한 HTML, CSS, JavaScript는 아니다.

웹 페이지 상의 몇몇 소프트웨어는 사용자로 하여금 헤더 칼럼들 사이를 "더블 클릭"하여 칼럼의 크기를 자동으로 다시 맞출 수 있도록 해준다. 이러한 추가의 단계는 그것이 상대적으로 간단한 작업을 복잡하게 만들기 때문에 몇몇 상황에서는 유리하지 않을 수 있다. 이러한 단계를 허용하는 웹 페이지는 실질적으로 HTML이 아닌 JavaScript에 크게 의존한다. 이러한 페이지는 "무겁기(heavy)"때문에 사용자의 브라우저에 로딩하는데 시간이 걸린다. 비록 확인되지 않았지만, 이러한 프로그램에 사용된 JavaScript는 정교하고 복잡하기 때문에 이러한 단계는 메킨토시에서는 작동하지 않을 수 있다. 그 결과, JavaScript가 상이한 브라우저에 다른 영향을 미칠 수 있기 때문에 브라우저 간 호환을 얻기 어렵게 된다.

고정 헤더 테이블(혹은 데이터그리드(datagrid))을 만들 때 전술한 인자 및 다른 인자들도 고려되어야 한다. 이러한 인자들 중 아무리 하잘 것 없는 것이라도 오정렬을 초래할 수 있다. 따라서 웹 페이지의 시작 이래로 품질 수준이 양질인 고정 헤더를 획득하지 못하였다. 양질의 고정 헤더 테이블은 대부분의 인기 있는 브라우저(예컨대, 99%)에 쓸모가 있어야 하며, 디스플레이될 데이터뿐만 아니라 많은 사용자 셋팅에 부응하여야 한다.

본 발명은 종래의 방법에 따른 결점을 없애고, 사용자로 하여금 칼럼을 수직으로 스크롤하는 동안 제1 수평 열을 움직이지 않도록 머물게 한 상태로 테이블의 데이터를 디스플레이 하는 방법을 제공하는 데 있다. 대부분 어떤 브라우저를 갖고 있는 인터넷 상에서 어느 누구라도 본 발명에 따라 설계된 고정 헤더 테이블에 액세스할 수 있을 것이다.

따라서 본 발명의 목적은 데이터를 표로 만든 형태로 디스플레이 하는 방법을 제공하는 데 있다.

본 발명의 또 다른 목적은 데이터의 제1 수평 열이 움직이지 않도록 머물게 한 상태로 웹 페이지 상에 표로 만든 데이터를 디스플레이 하기 위한 방법을 제공하는 데 있다.

본 발명의 이러한 목적 및 다른 목적들은 헤더를 "움직이지 않는 위치(stationary position)"에 머물게 하면서 표로 된 데이터를 디스플레이 하는 방법을 제공함으로써 달성될 수 있다. 이와 동시에, 상기 데이터 테이블은 수직으로 스크롤되며 여전히 헤더와 정렬된 상태로 남게 될 수 있다. 상측 테이블의 헤더 열은 각각의 하측 데이터 테이블에 있는 각각의 데이터 칼럼에 대응하는 복수개의 칼럼 표제를 포함할 수 있다. 이러한 방법에 있어서, 헤더 테이블은 적어도 2개의 열을 포함하며, 하측 데이터 테이블은 적어도 2개의 열을 포함한다. 상측 헤더 테이블의 하나의 열은 눈으로 볼 수 있는 헤더 텍스트를 포함하고 디스플레이 한다. 제2의 "숨겨진(hidden)" 열은 각각의 대응하는 헤더 칼럼의 폭을 자동으로 설정하는 플레이스홀더(placeeholder) 텍스트 혹은 HTML을 포함한다. 각각의 "숨겨진" 열의 헤더 칼럼의 상기 플레이스홀더 텍스트 혹은 HTML은 하측 데이터 테이블에 있는 대응하는 텍스트 혹은 HTML과 각 데이터 셀의 최대 폭을 계산함으로써 결정된다. 대응하는 칼럼의 최대 폭을 포함하는 셀 내에 있는 텍스트 혹은 HTML은 숨겨진 헤더 열 셀에 있어서 플레이스 홀더로서 사용된다. 숨겨진 열과 셀은 셀이 사용자에게 보이지 않도록 만드는데 있어 CSS를 사용한다.

만약 숨겨진 열에 반드시 자리해야 할 이미지가 존재할 경우, 이들 이미지의 높이는 더욱 작은 값 예컨대, 높이="0" 혹은 높이="1" 혹은 높이="2" 등과 같은 값으로 설정된다. 이것은 숨겨진 열이 원래의 폭을 여전히 유지하면서 높이를 줄일 수 있도록 해준다. 추가적으로, 숨겨진 열 혹은 숨겨진 셀에 대한 가시(visibility) 특성을 "숨겨짐" 값으로 또 다른 CSS 방법이 설정된다. 데이터 테이블의 스크롤 가능한 부분은 DIV 태그의 사용과 DIV 태그의 CSS 속성을 스크롤바가 나타나도록 하는 값으로 설정함으로써 만들어진다. 상기 CSS 속성은 통상적으로 높이, 오버플로(overflow), 오버플로-x 및 오버플로-y 등이다. 이러한 정보는 프로그램을 통해 혹은 웹 페이지에서 직접 설정될 수 있다.

각각의 상측 헤더 칼럼 텍스트 혹은 HTML 폭은 각 칼럼에 대해 하측 데이터 테이블 폭과 비교된다. 만약 상측 헤더 테이블의 셀 텍스트 혹은 HTML이 하측 데이터 테이블의 대응하는 셀들 중 어느 것보다 폭이 더 클 경우, 또 다른 숨겨진 열이 하측 데이터 테이블에 추가된다. 하측 데이터 테이블에 대한 이러한 "숨겨진" 열은 헤더 테이블의 임의의 대응하는 HTML 혹은 텍스트를 포함할 것이기 때문에 하측 데이터 테이블의 칼럼은 상측 헤더 테이블 칼럼의 폭과 동일한 폭을 갖도록 스스로 사이즈를 다시 맞출 것이다. 2개의 테이블 즉, 상측 헤더와 하측 데이터는 데이터 혹은 헤더 라벨을 스와핑(swapping)하고 그것들을 이들의 "숨겨진" 각각의 칼럼과 열에 자리시킨다. 이들 숨겨진 열들은 "스와핑"된 복사 데이터 혹은 헤더 라벨을 숨기는 것을 보조하도록 "visibility:hidden" 혹은 "display:none"과 같은 값 및 CSS 특성을 사용할 수 있다. 더욱이, 데이터 혹은 헤더 라벨의 상기 "스와핑"된 복사는 반드시 데이터 혹은 헤더 라벨의 정확한 복사일 필요는 없으며, 그리고 상기 "스와핑"된 복사는 대응하는 칼럼의 폭이 대향하는 테이블 예컨대, 상측 헤더 테이블 혹은 하측 데이터 테이블 간에 있어서 정합을 초래하게 하는 임의의 HTML 혹은 텍스트일 수 있다.

상기 방법은 또한 하측 데이터 테이블의 각 셀에 있는 텍스트 및/또는 HTML 의 폭을 결정한다. 특히, 상기 텍스트는 상이한 타입의 비례 폰트 예컨대, Courier 등과 같이 고정 폭으로 되지 않는 Arial, Times 등과 같은 폰트를 사용할 수 있다. 상기 방법은 한 개 데이터 셀에 대한 텍스트의 모든 문자의 총 폭을 계산하고, 어느 셀의 HTML 혹은 텍스트가 복사되어 대향하는 테이블의 대응하는 셀에 자리해야 하는가를 결정하기 위해 상기 총 폭을 사용한다.

상기 방법의 하나의 중요한 부분은 캐스케이딩 스타일 시트(cascading style sheet) 특성에 의해 가려지는 추가적인 데이터의 "플레이스 홀더(placeholder)" 열을 사용하는 것이며; 제2 부분은 끌어낸 혹은 복제된 내용을 인접하는 테이블에 배치하기 위하여 칼럼 내의 최대 폭을 계산하여 사용함으로써 데이터와 고정 헤더의 칼럼들을 적절하게 정렬시키도록 하는 것이다.

또 다른 실시예에 따르면, 픽셀 혹은 백분율로 나타내는 테이블의 각각의 칼럼 폭(HTML에서 <TD>)은 데이터 폭과 헤더 폭의 계산과 헤더 셀과 데이터 셀로부터 최대 폭을 선택함으로써 동적으로 설정될 수 있다. 백분율을 원할 경우, 각각의 칼럼의 최대 셀 폭이 전부 합계되고, 그 다음 각각의 헤더 및 데이터 칼럼에 대한 백분율을 결정할 수 있다. 추가적으로, 상기 테이블의 최대 문자 폭은 또한 칼럼 혹은 칼럼들의 최대 폭을 줄이기 위해 생략 "..." 혹은 몇몇 다른 인디케이터(indicator)를 매개로 과도하게 긴 데이터를 단축시키도록 나중에 변형될 수 있다.

본 발명의 이러한 고정 헤더 테이블 시스템이 제3 테이블에 대한 또 다른 테이블과 소정의 CSS 및 DIV 태그 그리고 스마트 프로세싱과 관련하여 사용될 때, 멀티-칼럼 드롭다운 리스트를 또한 만들 수 있다. 인터넷 상의 거의 전부는 아니더라도 대부분의 드롭다운 리스트는 단일 칼럼 드롭다운 리스트이다. 멀티-칼럼 드롭다운 리스트를 포함하는 것이 다소 존재하지만, 그러한 타입의 실현에는 한계가 존재한다. 이와 마찬가지로, 그러한 멀티-칼럼 드롭다운 리스트를 사용하는 주류(mainstream)의 혹은 인기 있는 웹 사이트는 본질적으로 존재하지 않는다.

본 방법은 또한 웹 페이지에서의 멀티-칼럼 드롭다운 리스트의 표시를 허용한다. 그것은 사용자의 입력에 따라 하측 데이터 열을 추가적으로 접거나 펼치면서 동시에 상측 데이터 열의 칼럼을 하측 데이터 열의 칼럼과 정렬시킨다. 상기 방법은 사용자로 하여금 그들이 데이터 열을 수직으로 스크롤할 때 엑셀 등의 스프레드시트 프로그램에서 현재 볼 수 있는 고정 헤더 열을 웹 페이지에서 볼 수 있도록 해준다. 고정 헤더 열의 칼럼을 하측 열의 칼럼과 정렬시킴으로써, 사용자는 고정 헤더 열에 자리하고 있는 칼럼 이름을 용이하게 볼 수 있다.

본 발명의 또 다른 태양은 사용자로 하여금 서버 및/또는 클라이언트에서 리사이징(resizing) 계산을 달성할 수 있도록 해주며, 칼럼 크기를 자동으로 조절하기 위해 사용자가 더블클릭한다거나, "올바른" 크기의 칼럼 폭을 얻기 위해 사용자가 하는 여타의 조정을 불필요하게 해준다.

이하, 본 발명은 동일한 구성 요소에는 유사한 도면 번호가 병기되어 있는 도면을 참조하여 설명될 것이다.

도 1은 헤더와 하나 이상의 데이터 셀을 포함하는 1-칼럼 데이터 디스플레이를 개략적으로 도시한 도면이다.

도 2는 헤더와 하나 이상의 데이터 셀을 각각 포함하는 멀티-칼럼 테이블 디스플레이를 개략적으로 도시한 도면이다.

도 3은 숨겨진 헤더와 숨겨진 데이터 셀을 포함하는 1-칼럼 데이터 디스플레이를 개략적으로 도시한 도면이다.

도 4는 눈에 보이는 숨겨진 행을 포함하는 고정 헤더 테이블을 도시한 도면이다.

도 5는 기존의 헤더 셀이 칼럼의 최대 폭으로 디스플레이 되어 있는, 숨겨진 헤더를 포함하는 테이블을 도시한 도면이다.

도 6은 데이터 셀이 칼럼에서 최대의 폭으로 디스플레이 되어 있는 테이블을 도시한 도면이다.

도 7은 숨겨진 데이터 셀 내용이 칼럼의 최대 폭으로 디스플레이 되어 있는 테이블을 도시한 도면이다.

도 8은 숨겨진 행을 숨기도록 사용한 CSS 스타일 시트(sheet)의 코드 스니 핏(code snippet)에 디스플레이된 테이블을 도시한 도면이다.

도 9는 고정 헤더 테이블이 접힌 상태와 펼친 상태인 멀티-칼럼 드롭다운 박스를 개략적으로 도시한 도면이다.

도 10은 셀 열의 상이한 칼럼이 최대의 폭으로 되어 있는 HTML 테이블을 도시한 도면이다.

도 11은 상측 테이블에서는 데이터가 없고, 하측 테이블에는 헤더가 없는 2개의 테이블을 도시한 도면이다.

도 12는 본 발명의 방법에 사용하기에 적합한 "제네바(Geneva)" 폰트에 대한 문자 폭의 예를 나타내는 테이블을 도시한 도면이다.

도 13은 본 발명의 방법에 사용하기에 적합한 "타임즈(Times)" 폰트에 대한 문자 폭의 예를 나타내는 테이블을 도시한 도면이다.

도 14는 "New Orleans Saints" 문구에 대한 디스플레이 폭의 샘플 계산 시트를 도시한 도면이다.

도 15는 전술한 2개의 테이블들이 동일한 <TD> 폭 값을 갖더라도 적절하게 정렬되지 않는 것을 보여주는, 사용자가 텍스트 크기 설정을 변경할 수 있는 웹 페이지를 도시한 도면이다.

도 16은 고정 사이드바 테이블을 도시한 도면이다.

도 17은 메인 데이터 테이블에서 최대 높이의 셀을 결정하는 단계를 도시한 도면이다.

도 18은 메인 데이터 테이블이 고정 사이드 바 테이블의 스크롤바와 플레이 스 홀더 칼럼의 상부에 위치하게 되는 프로세스의 단계를 도시한 도면이다.

도 19는 테이블들 중 하나가 고정 사이드바 테이블로 작용하고 있는 2개의 고정 헤더 테이블을 포함하는 컴퓨터 모니터 스크린 상의 화면을 나타낸 도면이다.

이하, 도면을 보다 구체적으로 참조하면, 도 10에는 헤더(12), 열(14, 16) 및 다수의 수직 칼럼(A, B, C, D)을 포함하는 HTML 테이블이 도시되어 있다. HTML 테이블은, 칼럼 폭 속성을 다소의 픽셀 폭 혹은 백분율 양의 폭으로 설정(선언)하지 않을 경우, 칼럼의 최대폭의 셀 주위로 자연적으로 접혀질 것이다. 예컨대, 칼럼 A에서, #2열의 셀의 폭이 가장 크다. 칼럼 B에서, #1열의 셀의 폭이 가장 크다. 그러나 칼럼 C에 있어서, 헤더 열의 "칼럼 C" 문자열을 포함하는 셀의 폭이 #1열과 #2열을 포함하는 모든 열 중에 가장 크다. 이 예에서, 선언된 어떠한 폭의 속성도 포함하지 않는 HTML테이블은 각 칼럼에 대해 가장 폭이 큰 셀 주위로 자연적으로 접혀지거나 수축될 것이다.

본 발명은 디스플레이를 조직화하는 방법을 제공하는데, 여기서 단일 데이터그리드(datagrid)는 고정 헤더 섹션을 만들도록 개개의 태그와 콘트롤(control)을 이용하여 설계되어 있다. 도 11에는 헤더를 포함하는 전술한 데이터그리드가 도시되어 있으며, 상기 데이터그리드 바로 아래의 또 다른 데이터그리드는 2개의 열과 다수의 수직 칼럼을 포함하는 헤더를 포함한다. 이러한 예시에 있어서, 데이터는 헤더를 포함하는 데이터그리드로부터 분리되기 때문에, 상기 테이블은 다른 테이블 및 셀 폭의 설정을 선언하지 않는다면 최소 칼럼폭으로 수축하는 것은 당연하다. IE, 모질라, 오페라 등의 브라우저는 개개의 사용자로 하여금 웹 페이지 내용의 텍스트 크기를 그들 자신만의 설정에 맞게 각각 설정할 수 있도록 해준다. 이것에 의해 시력이 안 좋은 사람들을 위해서나 혹은 폰트 사이즈가 너무 작은 웹 페이지를 개개의 사용자가 커스터마이즈할 수 있게 된다. 이러한 추가의 설정은 또한 고정 헤더 테이블의 개발에 있어서 반드시 고려되어야 한다.

본 발명에 따른 표로 만든 데이터의 디스플레이를 위한 방법은 "스와핑(swapping)" 및 "숨기기(hiding)" 단계에 의해 달성된다. 우선, 소프트웨어 창작자 혹은 웹 페이지 디자이너는 눈이 보이는 하측 테이블이 될 스크롤 가능한 데이터 테이블의 각 칼럼에 대한 최대 셀 폭을 결정한다. 사실상, 디자이너는 테이블들 사이에서 스와핑 해야 할 정보를 결정한다. 그 다음, 그 칼럼의 최대 폭인 각 셀의 내용의 사본(copy)이 고정 헤더 테이블의 보이지 않는 열에 놓이게 되는데 그것은 데이터테이블 위에 위치한다. 그 다음, 디자이너는 고정 헤더 테이블(상측 테이블)의 각 셀에 대한 헤더 내용이 폭(텍스트 혹은 HTML)에 있어서 스크롤 가능한 데이터 테이블(하측 테이블)의 최대 셀 폭보다 큰 것인지의 여부를 결정한다. 만약 헤더 내용의 폭이 더 크면, 디자이너는 스크롤 가능한 데이터 테이블의 별도의 보이지 않는 열에 헤더의 사본을 놓는다. 디자이너는 스와핑된 정보를 홀더 타입(holder-type) 열에서 보이지 않게 만들어 각 테이블에서 스와핑된 사본을 숨긴다. 선택적으로, 디자이너는 임의의 스와핑된 이미지를 (필요에 따라) 1의 높이(혹은 더 일반적으로 더 낮은 높이) 값을 갖도록 조절하는데, 소정의 브라우저에서는 칼럼에 대해 조절할 이미지가 존재하는 것을 감지할 수 있도록 적어도 1의 높이 를 가지게 할 필요가 있다는 것을 명심해야 한다. 몇몇 브라우저는 여전히 제로(0)의 높이에 반응할 것이다.

"스와핑"의 결과로서, 동일한 수의 칼럼을 지닌 2개의 테이블이 존재하게 된다. 하나의 테이블에서 동일한 칼럼에 있는 가장 폭이 큰 셀이 대향된 테이블의 것보다 더 클 경우, 그 텍스트의 사본은 대향된 테이블에 놓여 대향된 테이블의 폭이 본(originating) 테이블의 폭이 되도록 증가한다. 대향된 테이블로부터 본 테이블로 진행하는 것만 제외하고 동일한 단계가 반복된다. 이러한 프로세스는 2개의 테이블 즉, 헤더 테이블과 데이터 테이블에 있어서 각 칼럼에 대한 텍스트 혹은 HTML의 폭의 균형을 잡고 균등화시킨다. 따라서 양자 테이블의 수직 칼럼의 폭은 서로 정렬된다. 희망에 따라, 전술한 알고리즘의 순서는 코드에 맞게 재배열될 수 있지만, 모든 방법과 개념은 여전히 동일하다.

도 1에 도시된 예에 따르면, 테이블(20)은 헤더 테이블(22)과, 이 헤더 테이블(22) 아래에 위치한 데이터 테이블(24)로 형성되어 있다. 상기 헤더 테이블(22)은 도면 부호 "26"으로 표시된 눈에 보이는 헤더 셀 A와 도면 부호 "28"로 표시된 숨겨진 헤더 셀 A를 포함한다. 하측 데이터 테이블(24)은 도면 부호 "30"으로 표시된 제1의 눈에 보이는 데이터 셀 A1과 도면 부호 "32"로 표시된 제2의 눈에 보이는 데이터 셀 A2를 포함한다. 도면 부호 "34"로 표시된 숨겨진 데이터 셀 A는 제2 데이터 셀(32) 아래에 위치한다. 숨겨진 데이터 셀(34)은 헤더 테이블(22)과 헤더 셀(26)에서 끌어낸 데이터로부터의 플레이스 홀더로서 사용된다. 숨겨진 헤더 셀(28)은 눈에 보이는 데이터 셀(30, 32)에 놓인 정보의 형태에 따라 폭 방향으로 팽창 혹은 수축한다. 통상적으로, 제1 혹은 제2 데이터 셀(30, 32)중의 넓은 것이 가이드로서 선택되고, 그 정보의 사본은 숨겨진 헤더 셀(28)에 놓이게 된다. 이와 유사하게, 눈에 보이는 헤더 셀(26) 내용이 데이터 셀(30, 32) 중 어느 것보다 폭이 더 클 경우, 헤더 셀(26)의 사본 혹은 표본(representative)은 숨겨진 데이터 셀(34) 에 놓이게 된다.

"스와핑" 및 "숨기기"의 결과로서, 디자이너는 동일한 디스프레이 폭과 나아가 2개의 테이블 즉, 테이블(22)과 테이블(24)의 경계를 정렬하는 동일한 폭의 칼럼 방식을 갖는 상측 헤더 테이블(22)과 하측 데이터 테이블(24)을 만든다.

도 2에는 멀티-칼럼 환경에서 전술한 단계의 용례가 도시되어 있다. 여기서, 헤더 테이블(40)은 칼럼 A, B, C에 대한 숨겨진 헤더 셀 A, B, C뿐만 아니라 각각의 칼럼 A, B, C에 대한 3개의 눈에 보이는 헤더 셀 A, B, C를 포함한다. 헤더 테이블(40) 아래에 배치된 데이터 테이블(42)은 하나 이상의 데이터 셀 A1, B1, C1과 선택적으로 데이터 셀 A2, B2, C2를 포함한다. 각각의 칼럼에 대한 숨겨진 데이터 셀은 데이터 셀 A2, B2, C2 아래에 위치하고 있다. 각각의 칼럼 A, B, C에 대하여 데이터 테이블(42)의 데이터 셀 칼럼의 가장 큰 디스플레이 폭이 결정된다. 예컨대, 데이터 셀 A1 또는 A2의 텍스트 혹은 HTML에서 가장 큰 폭이 결정되고, 그 다음 숨겨진 헤더 셀 A의 내용은 데이터 테이블의 칼럼 A의 가장 큰 폭에 상당하는 동일한 결과의 폭을 얻기 위해 데이터 셀 A1 혹은 A2 중의 더 큰 값으로 채워진다.

도 3에는 헤더 테이블과 데이터 테이블 양자로부터 폭이 가장 큰 디스프레이가 대향된 테이블의 숨겨진 열/셀에 복제되어 있는 상태의 일례가 도시되어 있다. 움직이지 않는 헤더를 설계하는 방법에 있어서, 디자이너는 우선 데이터 테이블(44)의 데이터 셀 A1의 디스플레이 폭이 데이터 셀 A2의 것보다 큰 것인지의 여부를 결정한다. 상기 "디스플레이 폭"은 한 라인에 있는 문자 폭과 이미지 폭의 합이다. 만약 복수의 라인이 존재할 경우, 가장 큰 총 문자 폭과 이미지를 갖는 라인이 선택된다. 문자 폭의 단위는 픽셀, 포인트, 이엠(em) 혹은 다른 임의의 절대 혹은 상대적인 치수 단위일 수 있다. 도 12 내지 도 14에는 각 문자의 크기와 데이터 혹은 헤더 셀에 있는 문구의 계산에 대한 예가 도시되어 있다.

데이터 셀 A2가 텍스트 혹은 HTML에서 폭이 더 크면, 데이터 셀 A2 내용의 표본 혹은 내용의 사본은 헤더 테이블(46)의 숨겨진 헤더 셀 A에 놓인다. 역으로, 헤더 셀 A 내용이 데이터 셀 A1 혹은 데이터 셀 A2보다 더 큰 디스플레이 폭을 차지할 경우, 헤더 셀 A의 사본 혹은 헤더 셀 A 내용의 표본이 데이터 셀 A2 아래의 숨겨진 데이터 셀 A에 놓인다. 숨겨진 헤더 셀 A와 숨겨진 데이터 셀 A 양자는 캐스케이딩 스타일 시트(cascading style sheet) 특성: visibility : hidden; and line - height ; 1 px를 사용할 수 있다.

숨겨진 헤더 셀 A 혹은 숨겨진 데이터 셀 B에 놓이게 될 이미지가 존재할 경우, 이미지의 높이는 height="1" 혹은 height="0"이 되도록 수정될 것이다. 디스플레이의 폭을 비교하는 단계와 숨겨진 헤더 혹은 숨겨진 데이터 셀의 내용을 복사하는 단계는 다음 칼럼에서 반복된다. 그 결과, 헤더 테이블(46)과 데이터 테이블(44)은 동일한 폭, 나아가 동일한 수직 칼럼 정렬, 폭 및 경계의 정렬을 갖게 될 것이다.

도 4에는 고정 혹은 움직이지 않는 헤더를 포함하는 테이블의 일례가 도시되어 있으며, 숨겨진 행을 사용자의 스크린 상에 볼 수 있다. 숨겨진 헤더 열(48)에서 숨겨진 열 영역은 눈에 보이는 헤더와 데이터 영역 즉, 최대의 "디스플레이 폭"을 포함하는 영역으로부터 부분적으로 복사되어 있다. 제1의 눈에 보이는 열(50)은 "주문 #ID"로 표시된 제1 칼럼(52)과, "고객 ID"로 표시된 제2 칼럼(54)과, "선박명"으로 표시된 제3 칼럼(56)과, "주문일자"로 표시된 제4 칼럼(58)과, "선박국명"로 표시된 제5 칼럼(60)을 포함한다. 눈에 보이는 데이터 테이블(68)의 주문 번호 #10248의 열에 보이는 제3 칼럼(56)의 폭이 가장 큰 텍스트 "Vins et alcools Chevalier" 는 숨겨진 데이터 열(66)의 숨겨진 데이터 셀(64) 및 숨겨진 헤더 셀(62)의 폭을 제어한다.

도 5에 도시된 도면에서는 스크롤바가 나타나있지 않다. 이 도면에서, 헤더 셀(70)은 각 칼럼(72) 중 가장 폭이 큰 디스플레이이다. 헤더 셀(70)은 또한 칼럼(72)에 대한 데이터 테이블(74)의 텍스트보다 더 폭이 크다. 숨겨진 헤더 셀(76)은 헤더 셀(70)로부터 복사된 데이터를 포함한다. 이미지는 "1"의 높이로 감소하였기 때문에 나중에 숨겨질 것이다. 칼럼에서 폭이 가장 큰 동일한 텍스트는 칼럼의 최하측에 있는 열을 차지하는 숨겨진 데이터 셀(78)에 재생된다. 그러나 숨겨진 데이터 셀은 디자이너의 선호도에 따라 칼럼의 중간 혹은 칼럼의 최상부에 위치할 수 있다는 것에 주목해야 한다.

도 6에는 데이터 셀들 중 하나가 칼럼에서 폭이 가장 큰 것으로 도시되어 있다. 데이터 셀(80)은 칼럼(82)에 대해 가장 큰 디스플레이 폭을 나타낸다. 동일 한 데이터가 숨겨진 헤더(86)와 숨겨진 데이터 셀(88)에 복사된다. 비록 숨겨진 헤더 및 데이터 테이블 셀(86, 88)들이 도시 6에 도시되어 있지만, CSS 스타일 특성은 이들 내용을 "숨기기" 위해 사용되는 것을 이해할 수 있을 것이다. 예컨대, CSS 특성 visibility:hidden; and line-height: 1px;는 숨겨진 헤더 셀(86)과 숨겨진 데이터 셀(88)을 숨기기 위해 사용될 수 있다.

도 7에는 데이터 셀들 중 하나의 셀 즉, 이 경우 데이터 셀(90)이 칼럼에서 가장 큰 폭인 디스플레이가 도시되어 있다. 숨겨진 데이터셀(90)의 텍스트가 텍스트로부터 파생되었는데 칼럼(92)의 어디엔가 나타나는 동시에 사용자가 스크롤바(94)를 사용하여 칼럼(92)을 따라 텍스트 "Centro commercial Moctezuma"에 대해 아래로 이동하였기 때문에 보이지 않는다. 상기 테이블에 여러 페이지의 데이터가 존재하면, 가장 큰 폭의 데이터 값은 사용자가 스크롤바를 아래로 이동시키더라도 브라우저 내에서는 현재 볼 수 없는 페이지에 있게 된다. 숨겨진 헤더 셀(96)은 숨겨진 데이터 셀(90)의 폭과 동일한 폭을 갖도록 조절된다. 스크롤바(94)는 <DIV> 태그와 CSS 속성: height, overflow-x, 및 overflow-y를 이용하여 만들 수 있다.

도 8에는 숨겨진 열(플레이스 홀더 열)을 감추기 위해 사용될 수 있는 CSS 스타일 시트의 코드 스니핏(code snippet)(98)이 도시되어 있다. 이 도면에서, 헤더 셀과 데이터 셀의 숨겨진 열들은 사용자가 볼 수 없도록 숨겨져 있다.

도 9에는 접힌 상태와 펼친 상태의 움직이지 않는 헤더를 포함하는 멀티-칼럼 드롭다운 박스가 도시되어 있다. 멀티-칼럼 드롭다운 박스가 더 많은 <DIV>태 그를 사용하였기 때문에, 그것에 의해 데이터 테이블과 그것의 헤더 열을 숨기거나 사라지게 만들 것이다. 그 결과, 사용자의 컴퓨터 터미널 상의 디스플레이는 도 9에 도시된 바와 같이 접힌 상태로 보일 것이다. 추가의 <DIV> 태그가 헤더 테이블뿐만 아니라 전체 데이터 테이블을 에워싸게 된다. 또 다른 프로그램 방법 혹은 기능에 의해 <DIV> 속성을 제어하여 그것을 숨기거나 숨기지 않게 만들 것이다.

도 12 및 도 13에는 통상적인 폰트 사이즈에 대한 픽셀 단위를 제공하는 "제네바(Geneva)" 폰트 및 "타임즈(Times)" 폰트에 대한 가능한 문자 폭의 예가 도시되어 있다. 또한, 동일한 폰트 내에서, 포인트 사이즈는 다른 폰트 사이즈와 비교할 때 다른 상대적인 폭을 지닐 수 있다. 상이한 사이즈와 변화가 많이 존재하기 때문에, 숨겨진 사본을 만들어 사용자의 브라우저가 사이즈 조절 작동을 수행하도록 하는 것이 바람직하다. 도 14는 총 사이즈가 94.21223 픽셀로 되어 있는 "New Orleans Saints"라는 문구에 대한 디스플레이 폭의 계산 샘플을 도시한 도면이다.

도 12 및 도 13에는 또한 많은 문자들이 동일한 폰트 그룹 내에서 동일한 폭을 갖거나 다른 폰트 그룹으로부터의 문자 폭에 정합하고 있는 것이 도시되어 있다. 따라서 본 발명은 칼럼의 폭을 조절하기 위해 숨겨진 헤더 셀(86)과 숨겨진 데이터 셀(88)의 원래의 문자 대신에 다른 문자 혹은 다른 문자들의 조합으로 대체할 수 있다. 암호화된 혹은 "표본(representative)" 데이터가 또한 칼럼의 폭을 조절하기 위해 사용될 수 있다. 따라서 데이터를 숨겨진 헤더 셀(86)에 복사하는 대신, 한 칼럼에서의 최대 데이터 셀과 숨겨진 헤더 셀(86) 간의 관련을 만들 수 있고 그 다음 "표본" 데이터를 숨겨진 헤더 셀(86)로 복사한다. 이와 마찬가지로, 표본 데이터가 숨겨진 데이터 셀(88)로 복사되는 헤더셀과 숨겨진 데이터 셀(88)에 대해서도 동일한 관련을 행할 수 있다.

본 발명은 또한 "움직이지 않는(stationary)" 헤더를 포함하는 디스플레이 테이블을 만드는 변형례에 의한 방법을 제공한다. 변형례에 의한 방법에 따르면, 소프트웨어 프로그램은 우선 스크롤 가능한 데이터 테이블 혹은 하측 테이블 상의 각 칼럼에 대한 최대 셀 폭을 결정한다. 그 다음, 상기 프로그램은 고정된 상측 테이블의 각 셀에 대한 헤더 내용이 스크롤 가능한 테이블(하측 테이블)의 최대 셀 폭보다 폭이 더 큰지의 여부를 결정한다. 다음 단계에서, 상기 프로그램은 최소 칼럼 폭을 계산하고 양 테이블의 각 칼럼을 동일한 최소 칼럼의 폭으로 설정하며, 이에 따라 고정된 상측 테이블을 스크롤 가능한 하측 테이블과 정렬시키게 된다.

테이블 셀 <td>의 폭 설정은 또한 칼럼의 폭을 제어할 수 있기 때문에, 상기 프로그램은, 본 발명의 제1 실시예서 설명한 바와 같이 숨겨진 셀 내에 플레이스 홀더 데이터를 입력하는 대신 각 칼럼의 최대 폭을 갖는 셀을 간단하게 계산 및 결정할 수 있고, 그 다음

<td width="maximum calculated number in pixels">

로 <td> 셀의 폭 속성이 무엇이 되어야 하는지 계산한다.

상기 변형례에 따른 방법은 테이블 셀의 폭을 설정<td width="in pixels">하는 것을 요청하는데 있어 몇 가지를 요구할 수 있다는 것을 추측할 수 있다. 예컨대, 프로그래머가 상기 테이블이 100% 폭이 되도록 설정하고자 할 경우, 고정된 <td>는 <td>의 폭을 시작부터 설정하지 않는 것만큼 용이하고 완전하게 플로 우(flow)하고 늘어날 수는 없다. 이러한 상황은 예컨대, 셀이 많은 텍스트를 포함하여 다음 라인으로 내려가야 하는 경우에 마주칠 수 있다. 웹사이트는 테이블이 100% 폭으로 되게 만들어 폭 방향으로 가능한 많은 공간을 차지하도록 하는 것이 때때로 바람직할 수 있다. 또한 테이블은 공간을 절약하기 위해 가능한 한 폭을 최소로 수축하는 것이 바람직할 수도 있다.

수많은 방법에 의해 프로그램은 칼럼의 폭을 설정할 수 있다. 예컨대, 칼럼 폭은 <td> 폭 속성을 (1) 픽셀 값, 혹은 (2) 백분율 값 혹은 (3) 어떤 값으로도 설정하지 않아 셀 내의 내용이 셀의 폭을 결정하도록 설정함으로써 결정될 수 있다. 더욱이, 인접하는 칼럼 내용과 폭 속성 값은 또한 칼럼 폭 특히, 백분율 양의 폭에 영향을 미칠 수 있다. 그렇더라도 프로그래머는 디스플레이될 테이블 데이터가 일부는 짧고 일부는 이미지와 조합되는 복수개 라인을 포함하고, 헤더가 이미지 혹은 텍스트 혹은 이들의 조합을 포함하게 되는 상황에 부딪힐 수 있다. 각 문자의 계산된 폰트 사이즈는 브라우저마다 변경될 수 있다. 윈도우는 사용자가 자신의 브라우저, 해상도 등을 설정하게 되는 크기로 된다. 각 폰트 타입은 주류(mainstream) 및 표준 호환(compliant) 브라우저 프로그램을 포함한 프로그램 간에서 미묘한 변화를 가진다. 이러한 약간의 차이는, 헤더의 칼럼이 데이터 칼럼과 완전하게 정렬되지 않을 때, 프로그램 혹은 브라우저에서 볼 수 있다.

아래의 테이블과 도 15에 도시된 도면은 폭 속성에 대한 동일한 TD 값을 갖는다. 셀 코드와 폭 값은 아래의 테이블에 나타나 있다.

<td width=:"50">&nbsp;</td>

<td width=:"45">&nbsp;</td>

<td width=:"65">&nbsp;</td>

asf	12345	abcdefg

상기 2개의 테이블에서 알 수 있는 바와 같이, 그 칼럼들은 서로 정렬 상태로 있다. 도시 목적으로, 2개의 테이블 사이에 공간을 두었기 때문에 테이블이 실질적으로 분리된 것을 볼 수 있다. 그러나 실제로는 2개의 테이블은 수직 방향으로 서로 근접하거나 심지어 서로 접촉 상태로 있을 수도 있다. 하지만 사용자가 도 15에 도시된 브라우저 옵션에 따라 상기 테이블의 텍스트 사이즈 설정을 바꾸면, 상기 도시된 2개의 테이블은 사용자가 자신의 브라우저의 텍스트 사이즈 설정을 바꿈에 따라 다른 비율로 팽창하기 시작한다. 따라서 위에 도시된 2개의 테이블은 서로 정렬에서 벗어난 칼럼을 갖게 될 것이다. 고정된 헤더 내의 폰트가 조절 가능한 설정과 반대로 픽셀 설정으로 고정될 경우, 테이블 칼럼은 적어도 "인터넷 익스플로러"나 아마도 다른 브라우저의 사용시 정렬될 것으로 추측할 수 있다. 따라서 각 칼럼의 폭을 설정하는 대신, 모든 칼럼들이 여전히 적절하게 정렬되도록 희망하는 경우, 프로그램은 각 칼럼에 대한 최대 셀 폭을 결정하여야 한다.

본 명세서에 설명된 멀티-칼럼 드롭다운 리스트는 브라우저 간 호환가능(cross-browser compliant)한 품질 수준에서 최종적으로 이루어질 수 있다는 것 을 보여준다. 상기 멀티-칼럼 드롭다운 리스트는 전술한 움직이지 않는 헤더 테이블에서와 같이 선택된 데이터 열들에 대한 동일한 스와핑 및 동기화를 실질적으로 사용한다. 이러한 제3의 테이블은 정확한 데이터가 여전히 존재하는 CSS를 매개로 숨겨진 열들을 포함하기 때문에 칼럼 폭은 여전히 다른 데이터 테이블 칼럼 및 헤더 데이터 칼럼과 정렬될 것이다. 추가적으로, 사용자가 데이터 테이블에서 아이템을 선택할 때, 이 아이템은 상기 제3의 테이블에 존재하게 된다.

움직이지 않는 헤더를 갖는 데이터 테이블을 만드는 본 발명을 실시하기 위해 많은 컴퓨터 언어들을 사용할 수 있다는 것을 추측할 수 있다. 본 발명을 실시하기 위해 사용자는 클라이언트/서버" 구성의 서버, JavaScript, Java 혹은 VBScript와 같은 언어를 매개로 하는 클라이언트 브라우저를 사용할 수 있다는 것에 주목해야 한다. 또한 이러한 방법의 일부는 웹 서버와 클라이언트 양자에 적용될 수 있다.

서버측 언어에 대해서는 선택할 수 있는 언어들이 많다. 전술한 방법을 실시하기 위해 예컨대, Java, J2EE, Perl, PHP, ColdFusion, Python, Visual Basic, ASP.NET, C#, J#, JSP, HTML, 머신 혹은 어셈블리 언어를 사용할 수 있다. 이러한 테이블용 데이터는 통상적으로 MS 액세스, SQL 서버, IBM DB2, Oracle, MySQL 등의 데이터베이스로부터 나올 것이다. 그럼에도 불구하고, XML 파일, 플랫(flat) 파일, JavaScript Object, 혹은 몇몇 커스터마이징 데이터 포맷으로부터 도출될 수도 있다. 데이터 독출은 또한 서버와 클라이언트 브라우저 간의 응답 시간 및 성능을 향상시키기 위해 AJAX, 비동기식 JacaScript 및 XML로 불리우는 방법을 사용할 수 있다. 사용된 언어와 데이터베이스와 관련하여 변화의 양상은 상이하지만, 움직이지 않는 헤더를 만들고 칼럼을 정렬하는 동일한 방법을 여전히 사용할 수 있다.

본 발명의 또 다른 특징은 데이터 셀 열 높이에 맞추어지고 상하로 스크롤시키며, 숨겨진 칼럼을 보기 위해 메인 헤더 테이블이 좌측 혹은 우측으로 스크롤되는 동안 메인(main) 고정 헤더 테이블과 수직 동기화 상태로 머물게 되는 셀의 고정 사이드 바아를 만드는 방법에 있다. 이러한 작업은 높이 방향으로 통상적으로 1, 2, 3 등의 라인만이 존재할 수 있기 때문에 고정 헤더를 만드는 것에 비해 어느 정도 더 쉽게 보일 수 있다. 하지만, 본 발명을 사용하여 큰 피처 세트(feature set)를 지닌 Excel과 같은 풀 스프레이시트 프로그램이 실시될 경우, 상기 프로그램은 매우 복잡해질 수 있다.

고정 사이드바를 형성하는 데 있어서, 플레이스 홀더 칼럼에 대한 스와핑과 동일한 개념이 사용된다. 프로그램은 라인 브레이크(line break)의 수를 찾고 그에 따라 데이터 셀 스왑을 수행한다. 따라서 예컨대, 좌측 전체의 고정 헤더 테이블이 또한 고정 사이드바로서 작동하게 되는 2개의 나란한 고정 헤더 테이블이 존재한다. 좌측 헤더 테이블을 위한 스크롤바는 제거되거나 어떻게든지 숨겨지게 되지만, 몇몇 프로그래밍 언어를 통해 고정 사이드바 테이블 스크롤바 위치는 메인 고정 헤더 테이블의 스크롤바 위치와 동기화된 상태로 유지된다.

도 16 및 도 17을 참조하면, 플레이스 홀더 칼럼(102)과 고정 사이드바 칼럼(108)을 포함하는 플레이스 고정 사이드바 테이블(100)이 도시되어 있다. 상기 플레이스 홀더 칼럼(102)은 "주문자 ID"헤더 와 복수 개의 데이터 셀(104)을 포함 한다. 데이터 셀(105) 중 하나는 최대량의 정보를 포함하며, 그 결과 최대 높이의 값을 갖는다.

플레이스 홀더 칼럼(102)의 우측에 슬라이딩 스크롤바(106)가 도시되어 있다. 고정 사이드바 칼럼(108)은 플레이스 홀더 칼럼(100)의 좌측에 도시되어 있다. 메인 데이터 테이블은(110)은 도 17에 도시된 바와 같이, "선박명" 칼럼(112)과, "주문일자" 칼럼(114)과, "선박국명" 칼럼(116)을 구비하는 추가의 칼럼을 포함할 수 있다. 물론 상기 메인 테이블은 디스플레이된 데이터의 성질에 따라 단지 하나의 칼럼을 포함할 수 있다.

고정 사이드바를 설계하는 프로세스에 있어서, 고정 사이드바 칼럼(108)을 여전히 눈에 보이게 남겨둔 상태로 CSS 특성 예컨대, CSS z-인덱스 레이어(layer)를 사용하여 메인 데이터 테이블(110)에 의해 플레이스 홀더 칼럼(102)과 고정 사이드바 테이블의 스크롤바(106)를 숨기기 위한 단계를 포함한다. 상기 플레이스 홀더 칼럼(102)은 가장 큰 높이 값을 갖는 사이드바 테이블(100) 혹은 메인 데이터 테이블(110)에 있어서의 셀을 결정함으로써 만들어진다. 상기 도시된 경우는 셀(105)이 된다. 이와 유사하게, 상기 셀이 단지 텍스트만 포함할 경우, 그 값은 라인의 수, 캐리지(carriage) 리턴, 혹은 HTML <BP> 혹은 <P> 태그를 기초하여 결정된다.

도 18에서 알 수 있는 바와 같이, 메인 데이터 테이블(110)은 고정 사이드바 테이블(100)을 부분적으로 덮고(그 상부에 놓이고), 고정 사이드바 테이블(100)의 스크롤바(106) 및 플레이스 홀더 칼럼(102)도 마찬가지이다. 따라서 메인 테이블 표시가 고정 사이드바 테이블(100)의 스크롤바(106)를 덮으면, 테이블(100, 110) 양자는 하나의 테이블처럼 보일 수 있다.

도 19에는 디스플레이 페이지에 대한 본 발명의 또 다른 변형례가 도시되어 있으며, 테이블들 중 하나가 고정 사이드바 테이블로 작용하고 있는 2개의 고정 헤더 테이블이 제공되어 있다. 도시된 바와 같이, 큰 테이블(112)은 고정 사이드바 테이블(114)과 복수의 데이터 칼럼(115)을 포함한다. 고정 사이드바 테이블(114)은 수평 스크롤바(116)가 사용되거나 좌측 또는 우측으로 이동하는 경우에 변화하지 않는 고정 칼럼으로서 작용한다. 수평 스크롤바(116)는 테이블의 바닥에 놓이기 때문에 사용자가 메인 데이터 테이블(118)을 수평으로 이동시켜 좌측 또는 우측의 다른 데이터 칼럼을 볼 수 있도록 해준다. 수직 스크롤바(120)는 사용자로 하여금 프로그램 디자이너의 선택에 따라 헤더가 고정된 상태로 유지되거나 그렇지 않으면서 메인 테이블을 상하로 스크롤 할 수 있도록 해준다.

본 발명은 프로그램 디자이너가 동일한 데이터를 사용하지만 2개의 나란한 테이블을 사용하는 것으로 보여지는 2개의 고정 헤더 테이블을 포함하는 칼럼 사이드바를 만들 수 있도록 해준다. 메인 테이블은 고정 사이드바 테이블에 "중첩" 혹은 포개지기 때문에, 플레이스 홀더 칼럼과 고정 사이드바 테이블의 스크롤바는 고정 사이드바 테이블의 플레이스 홀더 칼럼과 스크롤바를 숨기기위해 사용할 수 있는 몇몇 CSS 특성(혹은 다른 유사한 수단)에 의해 감춰지게 된다.

추가적으로, 메인 테이블의 수직 스크롤바는 고정 사이드바의 스크롤바와 함께 동기화되기 때문에 양자 테이블의 열들은 서로에 대해 정렬된다. 이것은 데이 터를 스와핑하고 가장 큰 높이를 갖는 셀을 찾아 숨겨진 제2의 칼럼뿐만 아니라 고정 사이드바 테이블의 옵션에 데이터를 도입하는 방법에 의해 행해질 수 있다. 양 테이블은 상하 방향으로 스크롤할 때 서로에 대해 동일한 수직 위치 스크롤바 위치를 갖는다. 이것은 웹 페이지에서 다양한 방식으로 클라이언트 JavaScript 스크립에 의해 행해질 수 있다.

메인 데이터 테이블에서 좌측 또는 우측으로 수평으로 스크롤함으로써, 고정 헤더 테이블의 헤더와 숨겨진 칼럼으로부터 나온 데이터는 메인 데이터 테이블의 눈에 보이는 칼럼이 숨겨져 있는 동안 눈에 보이는 다음 칼럼의 자리로 (스크롤 방향에 따라 좌측 또는 우측으로) 스와핑 된다.

본 발명의 방법은 그것의 정신에서 벗어나지 않고 다양한 변형 및 수정이 가능할 수 있다. 따라서 본 발명의 권리 범위는 첨부된 청구의 범위에 의해서만 한정되어야 하는 것으로 의도되어야 한다.

Claims (19)

1. 테이블에 배열된 레코드를 컴퓨터 제어 스크린 상에 디스플레이 하는 방법으로, 상기 테이블이 칼럼, 열, 및 상기 칼럼과 열에 의해 정의되는 복수의 셀을 포함하는 디스플레이 방법에 있어서:

   상기 칼럼의 표제를 디스플레이 하기 위한 제1 스크롤 불가능한 서브-테이블을 형성하는 단계와;

   상기 제1 서브 테이블의 표제에 대응하는 레코드를 디스플레이하기 위한 제2 스크롤 가능한 서브-테이블을 형성하는 단계와;

   각 칼럼 내의 최대 폭 혹은 높이의 셀의 변수들에 기초하여 상기 제1 서브-테이블 및 제2 서브-테이블의 각 칼럼에 대한 최대 사이즈의 변수를 정의하여 최대 변수 셀을 만드는 단계와;

   상기 컴퓨터 제어 스크린 상에서 볼 수 있는 제1 서브-테이블의 눈에 보이는 부분과 컴퓨터 제어 스크린 상에서 볼 수 없는 제1 서브-테이블의 숨겨진 부분을 정의하는 단계와;

   최대 변수 셀의 데이터를 상기 제1 서브-테이블의 숨겨진 부분에서 대응하는 칼럼 내부의 셀로 복사하여 상기 대응하는 칼럼의 폭 혹은 높이의 변수를 정의하는 단계; 및

   각각의 셀에서 스크롤 불가능한 부분과 스크롤 가능한 부분을 갖는 테이블에 배열된 레코드를 컴퓨터 제어 스크린 상에 디스플레이 하는 단계

   를 포함하는 것을 특징으로 하는 디스플레이 방법.
2. 제1항에 있어서, 상기 숨겨진 제1 서브-테이블로 복사되는 변수 데이터는 그 변수 데이터를 상기 제1 서브-테이블의 숨겨진 부분으로 복사하기 이전에 미리 결정된 높이 혹은 폭 속성 값으로 조정된 미리 결정된 높이로 지정되는 것을 특징으로 하는 디스플레이 방법.
3. 제2항에 있어서, 상기 높이 혹은 폭 속성 값은 1 px 또는 그 이하의 높이 값을 갖는 것을 특징으로 하는 디스플레이 방법.
4. 제1항에 있어서, 셀 폭은 <td> 폭 속성을 상기 셀 내의 레코드의 픽셀 값으로 설정함으로써 지정되는 것을 특징으로 하는 디스플레이 방법.
5. 제1항에 있어서, 셀은 잔여 데이터 테이블 폭에 대한 상기 대응하는 칼럼의 백분율 값을 결정함으로써 별개의 폭으로 지정되는 것을 특징으로 하는 디스플레이 방법.
6. 제1항에 있어서, 상기 스크롤 불가능한 제1 서브-테이블은 상기 테이블의 고정 헤더를 정의하는 것을 특징으로 하는 디스플레이 방법.
7. 제1항에 있어서, 상기 제1 서브-테이블은 상기 테이블의 고정 사이드바를 정의하는 것을 특징으로 하는 디스플레이 방법.
8. 컴퓨터 판독 가능한 매체에 수록된 컴퓨터 프로그램 코드로서:

   칼럼, 열, 및 상기 칼럼과 열에 의해 정의된 복수의 셀을 갖는 데이터 테이블에 배열된 데이터베이스의 레코드에 대해 높이 혹은 폭 변수 세트를 정의하기 위한 컴퓨터 실행 가능한 프로그램 코드와;

   최대 높이 혹은 폭 변수를 갖게 될 셀에 디스플레이될 레코드에 기초하여 데이터 테이블의 각 칼럼 혹은 열에 대해 최대 높이 혹은 폭 변수를 결정하기 위한 컴퓨터 실행 가능한 프로그램 코드와;

   각 칼럼의 스크롤 불가능한 부분을 정의하는 제1 서브-테이블을 개설하기 위한 컴퓨터 실행 가능한 프로그램 코드와;

   각 칼럼의 스크롤 가능한 부분을 정의하는 제2 서브-테이블을 개설하기 위한 컴퓨터 실행 가능한 프로그램 코드와;

   제1 서브-테이블의 눈에 보이는 부분과 제1 서브-테이블의 숨겨진 부분을 개설하기 위한 컴퓨터 실행 가능한 프로그램 코드와;

   최대 폭 혹은 높이 변수 데이터를 갖는 셀로부터 나온 레코드를 제1 서브-테이블의 숨겨진 부분에 있는 대응하는 칼럼 내부의 셀로 복사하여 상기 제1 서브-테이블 및 제2 서브-테이블의 대응하는 칼럼 혹은 열의 높이 혹은 폭변수를 정의하기 위한 컴퓨터 실행 가능한 프로그램 코드

   를 포함하며, 테이블에 배열된 레코드를 디스플레이기 위한 변수 세트를 정의하는 상기 컴퓨터 프로그램 코드는 각 칼럼에 스크롤 가능한 부분과 움직이지 않는 부분을 갖는 것을 특징으로 하는 컴퓨터 프로그램 코드.
9. 제8항에 있어서, 상기 숨겨진 제1 서브-테이블로 복사되는 레코드는 그 레코드를 상기 제1 서브-테이블의 숨겨진 부분으로 복사하기 이전에 미리 결정된 속성 값으로 조정된 미리 결정된 높이로 지정되는 것을 특징으로 하는 컴퓨터 프로그램 코드.
10. 제9항에 있어서, 상기 속성 값은 1 px 혹은 그 이하의 높이 값을 갖는 것을 특징으로 하는 컴퓨터 프로그램 코드.
11. 제8항에 있어서, 셀 폭은 <td> 폭 속성을 상기 셀 내의 레코드의 픽셀 값으로 설정함으로써 결정되는 것을 특징으로 하는 컴퓨터 프로그램 코드.
12. 제8항에 있어서, 셀폭은 잔여 데이터 테이블 폭에 대한 상기 대응하는 칼럼의 백분율 값을 결정함으로써 결정되는 별개의 폭으로 지정되는 것을 특징으로 하는 컴퓨터 프로그램 코드.
13. 제8항에 있어서, 상기 스크롤 불가능한 제1 서브-테이블은 상기 테이블의 고 정 헤더를 정의하는 것을 특징으로 하는 컴퓨터 프로그램 코드.
14. 제8항에 있어서, 상기 스크롤 불가능한 제1 서브-테이블은 상기 테이블의 고정 사이드바를 정의하는 것을 특징으로 하는 컴퓨터 프로그램 코드.
15. 제8항에 있어서, 상기 숨겨진 제1 서브-테이블로 복사되는 레코드는 상기 제1 서브-테이블의 숨겨진 부분으로 복사되는 것을 특징으로 하는 컴퓨터 프로그램 코드.
16. 제8항에 있어서, 상기 제1 서브-테이블의 숨겨진 부분의 대응하는 칼럼 내의 셀로 복사되는 최대 변수 셀의 데이터는 최대 변수 셀의 표본 데이터인 것을 특징으로 하는 컴퓨터 프로그램 코드.
17. 스크롤 가능한 수직 칼럼과 수평 열을 각각 구비하는 복수의 데이터 셀을 갖는 데이터 테이블을 위해 웹 페이지에 움직이지 않는 헤드 열을 만드는 방법에 있어서:

    데이터 테이블의 본 셀에 하나 이상의 플레이스 홀더를 생성시키는 단계와;

    데이터의 테이블로부터의 상기 하나 이상의 플레이스 홀더를 움직이지 않는 헤더 열로 복사하는 단계와;

    상기 하나 이상의 플레이스 홀더를 대응하는 테이블 칼럼으로 도입하여 그 칼럼이 대응하는 본 테이블 셀과 칼럼의 폭과 동일한 크기의 폭으로 자동적으로 만들어지도록 하는 단계와;

    각 데이터 셀에 대한 최대 텍스트 폭을 계산하는 단계: 및

    각 데이터 셀에서 움직이지 않는 부분과 스크롤 가능한 부분을 만드는 단계

    를 포함하는 것을 특징으로 하는 움직이지 않는 헤드 열을 만드는 방법.
18. 제17항에 있어서, 상기 플레이스 홀더는 움직이지 않는 헤더열에서 생성되고 데이터 테이블로 복사되어 움직이지 않는 부분과 스크롤 가능한 부분에서 각 칼럼에 대한 셀의 폭을 균형 잡고 균등하게 만들며 움직이지 않는 부분과 스크롤 가능한 부분 사이를 정렬시키는 것을 특징으로 하는 움직이지 않는 헤드 열을 만드는 방법.
19. 제1항에 있어서, 상기 제1 서브-테이블의 눈에 보이는 부분으로부터의 최대 변수 셀의 데이터는 제2 서브-테이블의 숨겨진 부분으로 복사되어 움직이지 않는 부분과 스크롤 가능한 부분에서 각 칼럼에 대한 셀의 폭을 균형 잡고 균등하게 만들고 테이블의 숨겨진 부분과 보이는 부분 사이를 정렬시키는 것을 특징으로 하는 디스플레이 방법.

Images