스타일 속성 - 테이블

테이블 태그 사용 예제

<table>

    <caption>주소록</caption> 

    <thead>

        <tr>

            <th>이름</th> 

            <th>나이</th>

        </tr> 

    </thead> 

    <tbody>

         <tr>

             <td>홍길동</td>

             <td>20세</td> 

         </tr>

    </tbody> 

</table>

위에 있는 테이블 태그 사용 예제를 기준으로 설명하겠습니다.

 

 

■ 테이블 테두리에 스타일 지정하기

 

table, th, td { border:1px solid black; }

 

 위와 같이 스타일만 지정하면 테두리가 겹치는 곳은 두배로 두껍게 됩니다. 이 때 table 엘레멘트에 border-collapse:collapse 값을 지정해주면 겹치는 곳의 테두리가 하나로 나타납니다.

 

table { border-collapse:collapse; }

table, th, td { border:1px solid black; }

 

 

■ 테이블 안에 텍스트 수평 졍렬 방법

 

td { text-align:center; } 

 

 

■ 테이블 안의 텍스트 수직 정렬 방법

 

td { vertical-align: center; }

 

 

■ 테이블 셀에 여백 주기

 

td { padding:10px; }

 

 

■ 테이블에 배경색 주기

 

th { backgroudn-color:green; }

 

 

[참고] http://www.w3schools.com/css/css_table.asp