표 꾸미기

예전에 시에스에스(CSS)가 나오기 전에는 에이치티엠엘(HTML)에서 표를 많이 사용했지만 요즘은 그렇게 많이 쓰지는 않는다. 하지만 블로그에 글을 쓸 때 아주 가끔은 표를 써야 할 경우가 있다. 아무래도 표로 정리하면 보기가 훨씬 편하기 때문이다.

표(table)를 만드는 기본 태그

<table>
<thead> <!--테이블 제목임을 알리는 태그-->
      <tr> <!--행을 만드는 태그-->
           <th></th> <!--분류를 만드는 태그, 반드시 쓰지 않아도 된다.-->
           <th></th>
      </tr>
</thead> 

<tbody> <!--테이블 몸통임을 알리는 태그-->
      <tr><!--행을 만드는 태그-->
            <td></td><!--행 안에 셀을 만드는 태그-->
            <td></td>
       </tr>
</tbody>

<tfoot> <!--테이블 꼬리임을 알리는 태그-->
      <tr>
            <td></td>
            <td></td>
       </tr>
</tfoot>

</table>

fhead, tbody, tfoot는 반드시 써야 할 태그는 아님.

티스토리는 자동으로 표를 만들어 주는 기능이 있으므로 태그를 따로 신경 쓰지 않아도 된다. 하지만 기본으로 제공하는 표를 바꿔서 조금 더 예쁘게 꾸미고 싶다면 아래와 같이 바꿀 수 있다. 새로 꾸밀 표에 아이디를 부여한다. id="table_01"로 붙여 주었다.

엑셀에 있는 표와 비슷한 느낌으로 만들기

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK

위에 있는 표를 만드는 CSS

#table_01 {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#table_01 td, #table_01 th { 
  border: 1px solid #ddd;
  padding: 8px;
}

#table_01 tr:nth-child(even){background-color: #f2f2f2;} <!--짝수 번째 행 배경 색-->

#table_01 tr:hover {background-color: #ddd;} <!--행 위에 마우스 올려졌을 때 배경 색-->

#table_01 th { <!--표 분류를 나타내는 맨 위에 있는 행-->
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

이 부분을 복사하여 스킨 편집에서 CSS파일에 붙여 넣는다.

표를 만든 태그

티스토리를 쓰는 블로거는 글 입력창에서 적당한 표를 만들고 정의한 이름을 아이디로 정해주면 끝이다.

<table id="table_01" style="height: 221px;">
<thead>
<tr style="height: 21px;">
<th style="height: 21px; width: 220.633px;">Company</th>
<th style="height: 21px; width: 141.433px;">Contact</th>
<th style="height: 21px; width: 76.9px;">Country</th>
</tr>
</thead>
<tbody>
<tr style="height: 20px;">
<td style="height: 20px; width: 204.633px;">Alfreds Futterkiste</td>
<td style="height: 20px; width: 125.433px;">Maria Anders</td>
<td style="height: 20px; width: 60.9px;">Germany</td>
</tr>
<tr style="height: 20px;">
<td style="height: 20px; width: 204.633px;">Berglunds snabbk&ouml;p</td>
<td style="height: 20px; width: 125.433px;">Christina Berglund</td>
<td style="height: 20px; width: 60.9px;">Sweden</td>
</tr>
<tr style="height: 20px;">
<td style="height: 20px; width: 204.633px;">Centro comercial Moctezuma</td>
<td style="height: 20px; width: 125.433px;">Francisco Chang</td>
<td style="height: 20px; width: 60.9px;">Mexico</td>
</tr>
<tr style="height: 20px;">
<td style="height: 20px; width: 204.633px;">Ernst Handel</td>
<td style="height: 20px; width: 125.433px;">Roland Mendel</td>
<td style="height: 20px; width: 60.9px;">Austria</td>
</tr>
<tr style="height: 20px;">
<td style="height: 20px; width: 204.633px;">Island Trading</td>
<td style="height: 20px; width: 125.433px;">Helen Bennett</td>
<td style="height: 20px; width: 60.9px;">UK</td>
</tr>
</tbody>
</table>

옮겨 온 곳 www.w3schools.com/css/css_table.asp

CSS Styling Tables