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