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