[table]테이블폼 만들때 속성,포인트,중요한것

실무에 나서기전, html 공부를 할때 나는 테이블코드는 이제 거의 쓰지 않을 거라 단정하고 공부를 게을리 했었다

div 태그가 있는데 왜 복잡하고 유연하지 못한 테이블을 사용하는지 .. 촌스럽다고 생각했던 것 같다

하지만 웹디자인을 업으로 삼고 있으니 테이블은 아직도 많이 쓰인다는 것에 충격.

공부를 제대로 안했으니 끝없는 오류에 한번더 충격.

언젠가 flex 태그가 안정화가 된다면, 테이블도 점점 사라지지 않을까 생각하지만 

역시나 유연한 태그와 아닌태그는 각각 사용처가 따로 있는 것이라 생각한다.

서론이 길었고, 나와 같이 html계의 엑셀인 테이블을 짤 사람들과 미래에 또 지금 지식을 까먹을 나를 위해 포스팅합니다.

------------------------------------------------------------------------------------------------------------------------------------------

http://www.tablesgenerator.com/html_tables

↑우선 테이블을 급하게 짜야하거나 난 정말 테이블 구조 짜는데 빡친다 하시는 분들을 위한 table 자동 생성 페이지다

꼭 html 테이블이 아니라 다른 언어도 사용할 수 있는 모양이지만  html 말고는 아직 사용해 본 적으 없다

간단히 기능을 설명하자면 

1번) table을 클릭하면 마치 한글에서 표만들기 하는것처럼 아주 쉽게 원하는 표 모양으로 구성할수 있다 개꿀

2번) 난 4*4 테이블을 만들었고 3번 아이콘이 셀 병합/셀 병합 해제를 이용해서 만든 결과물이다.셀을 클릭하면 글씨도 안에 쓸수 있다

3번) 2번에서 언급했듣이 셀병합/ 셀병합해제 아이콘이다 . 2번의 합칠 셀을 드래그로 선택한 후 누르면 병합된다 

4번) do not generate CSS 를 체크하면 인라인 태그로 들어가는 스타일을 없애고 정말 테이블 껍데기만 코드로 보여주고 

체크를 해제하면 글씨체,정렬,백그라운드컬러 같이 내가 지정한 스타일태그가 인라인코드로 보여준다 

(으아 이 기능에서 나는 뻑감)

5번)compact mode 는 뭐 글자 그대로 압축 파일처럼 여백을 줄여준 코드인데 .min파일같은 거라고 생각하면 된다 

난 테이블 공부한지가 넘 오래돼서 사실 대충 저 프로그램에서 틀 짜서 가지고 온 다음 실행해보면서 아 얘는 이렇게 쓰면 이거구나 하고 실전에서 막코딩으로 하고 있다

이렇게 쉽게 테이블을 만들었지만 디자인할때 가끔 화가나는 경우가 생기는데  

<style>
        table,
        td,th {
            border: 1px solid #999
        }
</style>

<table style="width:100%">
    <tbody>
        <tr>
            <td style="font-size:14px;padding:5px 0">a</td>
            <td style="font-size:14px;padding:5px 0">123</td>
            <td style="font-size:14px;padding:5px 0">b</td>
            <td style="font-size:14px;padding:5px 0">456</td>
         </tr>
        <tr>
            <td style="font-size:14px;padding:5px 0">c</td>
            <td style="font-size:14px;padding:5px 0">789</td>
            <td style="font-size:14px;padding:5px 0">d</td>
            <td style="font-size:14px;padding:5px 0">101112</td>
        </tr>
         <tr>
            <td style="font-size:14px;padding:5px 0">e</td>
            <td style="font-size:14px;padding:5px 0">131415</td>
            <td style="font-size:14px;padding:5px 0">f</td>
            <td style="font-size:14px;padding:5px 0">161718</td>
         </tr>
     </tbody>
</table>

위 코드 실행결과↓

a	123	b	456
c	789	d	101112
e	131415	f	161718

이렇게 셀 사이사이 간격이 들어가서 디자인이 원하는대로 안나올때가 있다

이때 필요한 코드가 ↓

table{border-spacing:0;}

↓style에 위 코드를 추가했을때 결과

a	123	b	456
c	789	d	101112
e	131415	f	161718

테이블 셀 사이에 여백이 없어졌지만 table 에 1px 테두리와 td 의 1px 테두리가 더해져서 2px 테두리로 보이게 되는데..

이럴때는 

table{border-collapse: collapse;}

border-collapse 속성을 추가 해주면 된다.

[ 속성값으로는 collapse (셀 테두리의 선을 겹치게) , separate (셀테두리선을 분리) ]

↓ 결과

a	123	b	456
c	789	d	101112
e	131415	f	161718

* border-spacing:0; 을 쓰지않고 border-collapse:collapse ; 만 테이블 스타일에 추가 해도 결과는 같다.  

추가적인 테이블의 특이점인데 

1. tr 태그에는 스타일이 먹히지 않는다 

   td,th에 스타일을 줘야한다

2. colspan 을 사용한 태그에는 border : 1px solid #111 ; 과 같은 태그가 익스플로러에서 작동을 안했다. 고로 border-top:1px solid #111; border-right:1px solid #111 ...... 이런식으로 하나하나 특정지어서 주도록 한다

3.가끔 table태그에도 익스플로러에서 스타일 적용이 안될때가 있다. td마다 하나씩 주도록 하자 

4. 반응형웹에서는 table 사이즈는 min-width , max-width 를 특정해주고 width:100% 로 

     table{ min-width:500px; max-width:1000px; width:100%; }

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

음.. 지금 생각나는 건 이정도이지만 추가로 생각날때마다 쓰도록 하겠음

서버에서 광고이메일을 전송하거나 할때 이메일폼은 스타일을 전부 인라인으로 써야해서 개빡치는중.. 

*인라인태그로 스타일을 넣지않으면 열심히 만든 메일이 전송되고 나서 각 웹이나 어플에서 적용하는 강제 스타일이 겹쳐서 암튼 매우 곤란... 이메일폼 만들기는 정말 까다롭고 힘들다..  내가 굳이 테이블로 짜는 이유도 네이버,구글,사파리..등등 웹에서 메일폼을 열때 강제 적용하는 스타일 때문에 메일폼이 틀어지고 깨지더라.. 어쩐지 다른 대형 오픈마켓이나 대기업 메일들도 다 테이블로 오는 이유가 이런거였나? 

아직은 초짜지만 하나하나 배워가는중 

++

테이블을 만들고 나서 안에 테이터 글자수가 커지면 틀이 깨지는것을 방지하기 위해 

     table{ table-layout:fixed; word-break:break-all; }

이러면 테이블 레이아웃이 고정되고 word-break 태그 덕에 넘치는 텍스트는 break-all 쯕 줄바꿈으로 바뀐다!! 

http://jowook.tistory.com/category/Web%20Publishing/HTML,5%20/%20CSS,3

-출처-도움을주셔서감사합니다