표(테이블)는 각종 데이터를 표시하기에 적합한 요소입니다. 데이터를 표시하는 것 외에도 레이아웃 구성을 위해서도 사용이 가능합니다. 하지만 테이블로 레이아웃을 구성하게 되면 모바일 기기에서 의도와 다르게 표시되기 때문에 권장하는 방법은 아닙니다.
텍스트 위젯에서 테이블 추가하기
내 I’m web. 사이트의 디자인 모드에 접속합니다.
텍스트 위젯을 추가합니다. 이미 텍스트 위젯이 원하는 위치에 삽입되어 있는 경우 이 과정은 생략합니다.
텍스트 위젯을 더블클릭하여 편집 모드로 진입합니다.
텍스트 위젯의 툴바에서 테이블 버튼 을 클릭합니다.
생성할 테이블의 행과 열을 선택합니다.
테이블이 삽입된 모습을 확인할 수 있습니다.
테이블을 다양한 스타일로 꾸미기
텍스트 위젯의 테이블에서 셀을 클릭하면 위 이미지처럼 테이블 관련 도구모음이 나타납니다. 도구모음에서 를 클릭하여 옵션 선택으로 테이블 스타일을 변경할 수 있습니다. 아래 여러 옵션들은 조합해 사용할 수 있습니다. 예를 들어 가로 구분선만, Hover 효과, 줄무늬 행, 반응형 테이블을 한꺼번에 활성화 시킬 수 있습니다.
가로 구분선만: 이 옵션이 활성화 되면 세로 구분선이 사라지고 가로 구분선만 남게 됩니다.
테두리 없음: 모든 테두리가 보이지 않게 됩니다. 이 옵션 이 활성화 될 경우 가로 구분선만, 테두리 진하게의 옵션이 무시됩니다.
테두리 진하게: 테두리를 조금 더 진하게 표시합니다.
Hover 효과(행 단위): 마우스 커서가 테이블 위에 올라가면 행 단위로 음영을 표시합니다.
테이블 헤더 음영: 테이블 툴바의 H 를 클릭하여 테이블 헤더를 추가할 수 있습니다. 테이블 헤더는 주로 항목들의 제목에 사용하며 이 옵션은 테이블 헤더를 좀 더 강조하기 위해 음영을 삽입합니다.
줄무늬 행: 음영이 행 단위로 번갈아 가면서 삽입됩니다.
반응형 테이블: 모바일 기기와 같이 화면 크기가 작은 기기에서 테이블이 지나치게 좁아져서 읽기 어려운 현상을 최소화 시킵니다.
표(테이블)는 각종 데이터를 표시하기에 적합한 요소입니다.
데이터를 표시하는 것 외에도 레이아웃 구성을 위해서도 사용이 가능합니다.
하지만 테이블로 레이아웃을 구성하게 되면 모바일 기기에서 의도와 다르게 표시되기 때문에 권장하는 방법은 아닙니다.
텍스트 위젯에서 테이블 추가하기
테이블을 다양한 스타일로 꾸미기
텍스트 위젯의 테이블에서 셀을 클릭하면 위 이미지처럼 테이블 관련 도구모음이 나타납니다.
도구모음에서 를 클릭하여 옵션 선택으로 테이블 스타일을 변경할 수 있습니다.
아래 여러 옵션들은 조합해 사용할 수 있습니다.
예를 들어 가로 구분선만, Hover 효과, 줄무늬 행, 반응형 테이블을 한꺼번에 활성화 시킬 수 있습니다.