HTML 테이블에서 자동 줄바꿈, 넓이 지정 방법!!

블로그 포스팅을 하며 테이블의 크기 때문에 고민되신적 있으시죠?

내가 원하는 테이블의 크기는 딱 요정도인데 칼럼<TD> 안에 입력한 글자에 따라 테이블 크기가 마음대로 변경이 되어버리면 참 속상합니다. 

150px의 사이즈 테이블 원본 크기.

오늘은 내가 사용하고자 하는 크기에 맞게 이쁜 테이블을 구성하는 방법에 대해 살펴보겠습니다.

먼저 TD 값은 2개로 하며, 사이즈는 150px로 만들어보겠습니다.

12345

12345

<table border="1px">
    <tr>
        <td width="150px">12345</td>
        <td width="150px">12345</td>
    </tr>
</table>

테이블 안에 아무런 내용이 없거나 지정한 사이즈 보다 길이가 작은 문자열이 입력된다면, 내가 지정한 사이즈로 테이블이 삽입됩니다.

글자 입력시 사이즈 변경 사례 1.

원하는 크기의 사이즈는 확인했으니, 이제 글을 삽입해보겠습니다.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 12345678901234567890

123456789012345678901234567890

<table border="1px">
    <tr>
        <td width='150px'>
            동해물과 백두산이 마르고 닳도록 하느님이 보우하사 
            우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 
            대한으로 길이 보전하세 <br/>
            남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은
            우리 기상일세.<br/>
            12345678901234567890
        </td>
        <td width='150px'>
            123456789012345678901234567890
        </td>
    </tr>
<table>

글자를 입력한 곳은 늘어났네요?

글자 입력시 사이즈 변경 사례 2.

첫번째 TD 값에는 문자만, 두번째 TD 값에는 문자와 숫자를 삽입해보면 어떨까요?

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 12345678901234567890

<table border="1px">
    <tr>
        <td width='150px'>
            동해물과 백두산이 마르고 닳도록 하느님이 보우하사 
            우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 
            대한으로 길이 보전하세 <br/>
            남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은
            우리 기상일세.
        </td>
        <td width='150px'>
              동해물과 백두산이 마르고 닳도록 하느님이 보우하사 
            우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 
            대한으로 길이 보전하세 <br/>
            남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은
            우리 기상일세.<br/>
            12345678901234567890
        </td>
    </tr>
<table>

문자열을 입력했던 곳은 정상적으로 줄바꿈이 되었지만, 숫자와 함께 입력한 곳은 처음 만들고자 했던 테이블과 달리 크기가 바뀌어 버렸습니다. 

대처 방법 1 - TD 값의 지정된 크기에 따라 자동 줄바꿈 지정

원하던 테이블의 사이즈에 맞게 글자가 자동 줄바꿈이 되게끔 지정을 해줄 수 있습니다.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 12345678901234567890

123456789012345678901234567890

<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>

바로 <TD>에 style="word-break:break-all" 스타일을 지정해주면 테이블 크기에 맞게 자동 줄바꿈이 이뤄지게 됩니다.

모르면 정말 어렵지만 알고나니 정말 쉽죠? 테이블 생성할 때 마다 스트레스 받지 마시고 자동 줄바꿈으로 간편하게 포스팅하세요~!

테이블에서 자동 줄바꿈, 사이즈 지정 방법, 도움이 되셨나요?