티스토리 테이블 만들고 가운데 정열 위한 HTML 코드 수정
티스토리 테이블을 생성하면 디폴트로 페이지 왼쪽정열로 생성됩니다.
내가 만든 테이블 표를 가운데로 옮기고 싶다. 그러기 위해선 HTML 코드 수정이 필요하답니다.
아래에서 테이블 만든는 방법과 테이블 가운데 정열하는 방법까지 상세히 설명드리겠습니다.
테이블 만들기
1. 우선 페이지 상단에 "테이블" 아이콘을 누르면 몇줄 몇칸을 선택한다. 테이블을 먼저 생성한다.
2. 마우스를 움직여 5칸에 4줄이 그림이 만들어지면 원하는 크기에서 "클릭"해주면 테이블이 생성됩니다.
3. 클릭함과 동시에 테이블을 생성해서 아래처럼 표가 만들어 졌습니다.
4. 보시다싶이 가로폭이 100% 로 테이블이 만들어 졌습니다.
기본적으로 왼쪽 정열되어 있습니다.
페이지 우측 상단에 HTML 모드를 선택후 코드 확인 모습입니다.
테이블에 내용을 넣다 보면 폭이 좁아지고 가운데 정열을 해야할 때가 있는데
메뉴에서 가운데 정열을 하여도 발행 후 확인해 보면 그대로 왼쪽정열일때가 있습니다.
이럴 때 아래 방법을 써서 가운데 정열을 할 수 있습니다.
5. 테이블을 만들고 내용을 간단히 넣어 봅니다.
6. 테이블을 전체 드래그 하면 하늘색 선택영역이 보인답니다.
7. 그후 상단 메뉴에서 "가운데 정열"을 클릭해 줍니다.
테이블 안에 있는 모든 데이터들이 가운정열이 되는것을 볼수 있습니다.
내용이 비해 테이블이 너무 넓어 가독성이 떨어지는듯 합니다.
8. 가로 폭을 좁혀 주겠습니다.
오른쪽 하단의 동그라미를 클릭한 상태에서 왼쪽으로 끌어 당겨주면 테이블이 좁아지는 것을 보실 수 있습니다.
보기좋게 줄여졌습니다 하지만 왼쪽 정열이라 보기가 좋지 못하네요~
전체 화면에서 테이블이 가운데로 보이도록 해야겠죠~
<DIV> 코드 넣어 가운데 정열하기
1. 코드를 보면 <table> [내용] </table> 태그 부분을 찾는다.
2. 밑의 이미지 처럼 <div align="center"> [테이블 코드] </div>로 감싸줍니다.
<table> 태그가 시작하는 윗줄에 <div align="center"> 코드를 넣어주면 됩니다.
</table> 이 끝나는 줄에 </div> 코드를 넣어줍니다. 이제 다 되었습니다.
잘 적용되었는지 "기본모드"로 돌아가서 확인하시면 됩니다.
기본모드에서 보시면 가운데 정열이된 테이블을 확인할 수 있습니다.
성공 하셨나요?
처음 넣는 코드가 복잡할수도 있지만 사진 설명대로 따라 하신다면 꼭 성공하실 겁니다.