html의 기본 표(table) 코드 공유

지난번에 Table Generator를 소개한 적이 있다. 간단한 클릭 몇 번만으로 원하는 모양의 예쁜 테이블 코드를 자동으로 생성해 주는 사이트이다.

http://www.tablesgenerator.com/

그런데 막상 다양하고 예쁜 모양의 표를 만들어 쓰려니, 매번 포스팅할 때마다 코드를 가져오기가 너무 번거로웠다. 여러 가지 테이블을 미리 구비해 놓으면 좋겠지만, 너무 개수가 많아지면 나중에 너무 골치아파질 것 같다. 그래서 아주 단순한 모양의 표를 짜서 코드를 공유한다. 1px의 회색 테두리가 있고 셀 배경이 흰색인, 그냥 기본 표 코드이다.

 <table class="tg">  <tbody>  <tr>   <td style="width:80px;"></td>   <td></td>  </tr> </tbody> </table>

CSS에는 다음 코드를 추가해 준다. 혹시 제목줄을 쓸까 싶어서 th(첫째 줄) 속성에는 배경색과 별도의 테두리를 설정해 두었다. 개별 속성은 임의로 수정해서 쓸 수 있다.

/*표*/ .table {margin:9px 0px 18px 0px; width:100%;} .tg  {border-collapse:collapse; border-spacing:0; border: 1px solid #b0b0b0; word-break:break-all; font-size:1em; margin:2px 1px; line-height:140%; width:100%;} .tg th{background-color:#d4ddde; border: 1px solid #b0b0b0; padding:6px 8px; width:auto; text-align:center;} .tg td{background-color:#ffffff; border: 1px solid #cfcfcf; padding:6px 8px; width:auto;} 

포스트(글)를 작성할 때는 table 코드를 갖다 넣고 원하는 내용을 '<td>'와 '</td>' 사이에 넣으면 된다. 이건 한 줄 + 두 칸짜리 기본 표이고 줄을 추가하고 싶다면 '<tr>' ~ '</tr>'을 하나씩 더 추가해 나가면 된다.

 <table class="tg">  <tbody>  <tr>   <td style="width:80px;"></td>   <td></td>  </tr>  <tr>   <td></td>   <td></td>  </tr> </tbody> 

여기서 td 하나의 가로 크기를 지정해 둔 것은 (기초적인 것이긴 하지만) 하나의 칸 크기를 지정해 두면 나머지 칸은 나머지의 100%로 자동 조절되도록 하기 위해서이다. 크기는 표를 쓸 때마다 적당하게 바꾸어 쓰는 것이 좋겠다. 이 코드를 사용한 테이블의 예는 다음과 같다.

나라	설명
페루	남아메리카 중부 태평양 연안에 있는 나라로, 15세기 케추아족(族)의 잉카 제국(帝國)이 탄생한 곳이다.
짐바브웨	아프리카 대륙 중앙 남부에 있는 나라로, 1888년부터 영국 남아프리카회사의 지배를 받다가 1923년 영국의 자치식민지로 편입되었다.
타이완	타이완해협을 사이에 두고 중국 푸젠성과 마주하고 있는 나라로 중국 본토에서 약 150㎞ 떨어져 있다.

위 표의 코드는 다음과 같다.

 <table class="tg">  <tbody>  <tr>   <td style="width:80px;">나라</td>   <td>설명</td>  </tr>  <tr>   <td>페루</td>   <td>남아메리카 중부 태평양 연안에 있는 나라로, 15세기 케추아족(族)의 잉카 제국(帝國)이 탄생한 곳이다.</td>  </tr>  <tr>   <td>짐바브웨</td>   <td>아프리카 대륙 중앙 남부에 있는 나라로, 1888년부터 영국 남아프리카회사의 지배를 받다가 1923년 영국의 자치식민지로 편입되었다.</td>  </tr>  <tr>   <td>타이완</td>   <td>타이완해협을 사이에 두고 중국 푸젠성과 마주하고 있는 나라로 중국 본토에서 약 150㎞ 떨어져 있다.</td>  </tr> </tbody> </table> 

첫 줄을 td가 아닌 th로 하면 이런 모양이 나온다.

나라	설명
페루	남아메리카 중부 태평양 연안에 있는 나라로, 15세기 케추아족(族)의 잉카 제국(帝國)이 탄생한 곳이다.
짐바브웨	아프리카 대륙 중앙 남부에 있는 나라로, 1888년부터 영국 남아프리카회사의 지배를 받다가 1923년 영국의 자치식민지로 편입되었다.
타이완	타이완해협을 사이에 두고 중국 푸젠성과 마주하고 있는 나라로 중국 본토에서 약 150㎞ 떨어져 있다.

위 표의 코드는 다음과 같다.

 <table class="tg">  <tbody>  <tr>   <th style="width:80px;">나라</td>   <th>설명</td>  </tr>  <tr>   <td>페루</td>   <td>남아메리카 중부 태평양 연안에 있는 나라로, 15세기 케추아족(族)의 잉카 제국(帝國)이 탄생한 곳이다.</td>  </tr>  <tr>   <td>짐바브웨</td>   <td>아프리카 대륙 중앙 남부에 있는 나라로, 1888년부터 영국 남아프리카회사의 지배를 받다가 1923년 영국의 자치식민지로 편입되었다.</td>  </tr>  <tr>   <td>타이완</td>   <td>타이완해협을 사이에 두고 중국 푸젠성과 마주하고 있는 나라로 중국 본토에서 약 150㎞ 떨어져 있다.</td>  </tr> </tbody> </table>