티스토리 뷰
내가 원하는 테이블의 크기는 딱 요정도인데 칼럼<TD> 안에 입력한 글자에 따라 테이블 크기가 마음대로 변경이 되어버리면 참 속상합니다.
150px의 사이즈 테이블 원본 크기.
오늘은 내가 사용하고자 하는 크기에 맞게 이쁜 테이블을 구성하는 방법에 대해 살펴보겠습니다.
먼저 TD 값은 2개로 하며, 사이즈는 150px로 만들어보겠습니다.
12345 | 12345 |
1 2 3 4 5 6 | <table border="1px"> <tr> <td width="150px">12345</td> <td width="150px">12345</td> </tr> </table> | cs |
테이블 안에 아무런 내용이 없거나 지정한 사이즈 보다 길이가 작은 문자열이 입력된다면, 내가 지정한 사이즈로 테이블이 삽입됩니다.
글자 입력시 사이즈 변경 사례 1.
원하는 크기의 사이즈는 확인했으니, 이제 글을 삽입해보겠습니다.
동해물과 백두산이 마르고 닳도록 하느님이 보우하사
우리나라 만세. 무궁화 삼천리 화려강산 대한 사람,
대한으로 길이 보전하세 12345678901234567890 |
123456789012345678901234567890 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table border="1px"> <tr> <td width='150px'> 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 <br/> 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.<br/> 12345678901234567890 </td> <td width='150px'> 123456789012345678901234567890 </td> </tr> <table> |
글자를 입력한 곳은 늘어났네요?
글자 입력시 사이즈 변경 사례 2.
첫번째 TD 값에는 문자만, 두번째 TD 값에는 문자와 숫자를 삽입해보면 어떨까요?
동해물과 백두산이 마르고 닳도록 하느님이 보우하사
우리나라 만세. 무궁화 삼천리 화려강산 대한 사람,
대한으로 길이 보전하세 |
동해물과 백두산이 마르고 닳도록 하느님이 보우하사
우리나라 만세. 무궁화 삼천리 화려강산 대한 사람,
대한으로 길이 보전하세 12345678901234567890 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table border="1px"> <tr> <td width='150px'> 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 <br/> 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. </td> <td width='150px'> 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 <br/> 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.<br/> 12345678901234567890 </td> </tr> <table> | cs |
문자열을 입력했던 곳은 정상적으로 줄바꿈이 되었지만, 숫자와 함께 입력한 곳은 처음 만들고자 했던 테이블과 달리 크기가 바뀌어 버렸습니다.
대처 방법 1 - TD 값의 지정된 크기에 따라 자동 줄바꿈 지정
원하던 테이블의 사이즈에 맞게 글자가 자동 줄바꿈이 되게끔 지정을 해줄 수 있습니다.
동해물과 백두산이 마르고 닳도록 하느님이 보우하사
우리나라 만세. 무궁화 삼천리 화려강산 대한 사람,
대한으로 길이 보전하세
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은
우리 기상일세. 무궁화 삼천리 화려강산 대한 사람,
대한으로 길이 보전하세
12345678901234567890 |
123456789012345678901234567890 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table border="1px"> <tr> <td width='150px' style="word-break:break-all"> 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 <br/> 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.<br/> 12345678901234567890 </td> <td width='150px' style="word-break:break-all"> 123456789012345678901234567890 </td> </tr> <table> | cs |
바로 <TD>에 style="word-break:break-all" 스타일을 지정해주면 테이블 크기에 맞게 자동 줄바꿈이 이뤄지게 됩니다.
모르면 정말 어렵지만 알고나니 정말 쉽죠? 테이블 생성할 때 마다 스트레스 받지 마시고 자동 줄바꿈으로 간편하게 포스팅하세요~!
테이블에서 자동 줄바꿈, 사이즈 지정 방법, 도움이 되셨나요?
'IT > Blog,Tistory' 카테고리의 다른 글
티스토리 HTTPS 지원에 따른 사이트맵 생성 (0) | 2018.10.24 |
---|---|
네이버 웹마스터도구, 티스토리 블로그 검색 등록 (0) | 2018.10.23 |
네이버 웹마스터도구, 티스토리 사이트맵 등록 방법 (0) | 2018.10.20 |
네이버 웹마스터도구, 티스토리 RSS 등록 방법 (8) | 2018.10.19 |
zum 포털, 블로그 검색 등록 방법 (0) | 2018.10.04 |
블로그 파비콘(Favicon)생성 및 적용하기 (0) | 2018.05.12 |
반응형 스킨 #1 카테고리 포스트 숫자 넣기 (0) | 2016.11.15 |
고 퀄리티 무료 이미지, 나도 이제 파워블로거! (2) | 2016.11.11 |