웹솔루션개발 25년 노하우! 해피CGI의 모든것

모바일에서 읽을수 있는 테이블을 만드는 jquery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제한뒤, demo/jquery.html, demo/vanilla-js.html 파일들을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같이 표시되던 테이블이 창의 가로크기를 모바일기기의 가로크기 만큼 줄여보면 위 그림 처럼 모바일기기의 화면에서도 데이터를 읽을수 있는 테이블로 변경이 됩니다. 사용방법은 아래와 같습니다. 데모페이지를 살펴보면, 다양한 예제의 테이블들을 볼수 있으며 각각의 예제들을 이용하기 위한 샘플 코드를 확인할 수 있습니다.

Easy Table A11Y는 모바일 및 태블릿 장치와 같은 작은 화면에서 테이블 보기 경험을 향상시키도록 설계된 최소한(~1kb 축소), 액세스 가능, 반응형 테이블 jQuery 플러그인입니다. 작은 화면에서 볼 때 다중 열 테이블을 간결한 2열 형식으로 변환하여 정보를 손상시키지 않으면서 가독성을 향상시키는 방식으로 작동합니다. 다운로드 받은 파일의 압축을 해제한 뒤, dist/demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화면이 크면 위 그림의 표처럼 표시가 되다가, 화면의 크기가 줄어들면, 아래 그림 처럼 표의 모양이 변경됩니다. 사용방법은 아래와 같습니다.

JavaScript 로 테이블을 생성합니다. 그리고 테이블의 해더를 클릭하면 정렬(소팅) 할 수 있는 소스코드 입니다. 만드는 방법은 아래와 같습니다. 1. Table 을 생성하고 고유한 아이디를 지정하세요. 단, Table 요소에서 반드시 샘플과 같은 양식으로 맞춰야 하고 th, tbody 는 필수 입니다. 2. th 요소에 CSS 스타일을 정의 합니다. 3. js/script.js 를 호출 합니다. 제일 마지막에 호출해야 합니다. Table 에 출력되는 데이터 편집은 js/script.js 에서 할 수 있습니다. 형식에 맞춰서 편집 혹은 추가하시면 됩니다.

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 jquery.fixedTableHeader.js 파일을 링크합니다. 2. Table 소스코드를 코딩하고, fixedTableHeader 플러그인을 호출합니다. 3. 고정될 헤더 부분을 지정합니다. (기본값 : th) 4. 고정되었을 때 헤더 부분의 CSS를 재정의할 수 있습니다. - 작동 예제

* Simple Data Table with JavaScript javascript 로 만든 가볍고 간단한 테이터 테이블입니다 간단한 테이블에 데이터를 표시하며 필요할때마다 데이터를 로드 합니다 * License - MIT License * 적용방법 첨부된 압축파일을 해제후 원하는 웹디렉터리에 업로드 합니다 그리고 적용될 html 문서에 아래와 같은 코드들을 삽입합니다 스크립트파일과 코드, css 파일을 로드합니다 테이터테이블 폼을 출력 할 html 과 script 를 아래와 같이 구성합니다 브라우저로 출력시 아래와 같은 결과화면을 확인할 수 있습니다