본문 바로가기

디자인/CSS 강좌

CSS 기초강좌 9 (Table)

반응형

CSS Tables

Border

이 속성은 테이블의 경계선을 지정하기 위해 사용합니다.


아래의 예제는 테이블의 th(제목줄), td 엘리먼트를 검정색 1픽셀로 지정한 것입니다.

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


Collapse Borders

border-collapse 속성은 테이블의 셀사이의 여백을 없앨때 사용합니다.

table {border-collapse:collapse;}

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


Width 와 Height 는 테이블의 넓이와 높이를 정합니다.

text-align: 테이블 내의 문자들의 가로방향 정렬 (left, right, center)

vertical-align: 테이블 내의 문자들을 상하방향으로 정렬 (top, bottom, middle)

padding: 테이블 내의 border와 내용간의 여백을 조절 (ex, padding:15px;)


color (색상)

테의블 선의 색상을 정하기 위해서는 border 속성에서 정합니다. (ex, border:1px solid green;)

테의의 각 칸의 배경색상이나 내용의 색상을 정하기 위해서는 th, td 속성에서 정합니다.

 (ex, td {background-color:red; color:white;}


예제

<!DOCTYPE html>

<html>

<head>

<style>

table { border-collapse: collapse;}  <!-- 셀사이의 여백 제거 -->

  th {

    height:50px;      <!-- 제목높이:50px, 선색:빨강, 배경:녹색, 글자색:흰색 -->

    border: 1px solid red;

    background-color:green;

    color:white;

    text-align:center;

    padding:5px 17px 5px 17px;  <!--셀내부의 여백 중 상하여백:5px, 좌우여백:17px -->

}


  td {

    border: 1px solid red;

    background-color: yellow;

    color: black;

    text-align:center;

    padding:5px 17px 5px 17px;

}

</style>

</head>


<body>


※국가별 연락처

<table >

  <tr>

    <th >국가</th>

    <th >도시</th>

    <th >이름</th>

  </tr>

  <tr>

    <td >대한민국</td>

    <td >서울</td>

    <td >도 망자</td>

  </tr>

  <tr>

    <td >스위스</td>

    <td >취리히</td>

    <td >사 기꾼</td>

  </tr>

  <tr>

    <td >타이완</td>

    <td >타이뻬이</td>

    <td >구 두쇠</td>

  </tr>

  <tr>

    <td >오스트레일리아</td>

    <td >시드니</td>

    <td >베 짱이</td>

</tr>

</table>

</body>

</html>


결과

※국가별 연락처
국가 도시 이름
대한민국 서울 도 망자
스위스 취리히 사 기꾼
타이완 타이뻬이 구 두쇠
오스트레일리아 시드니 베 짱이

즐거운 하루 되세요.


반응형