[CSS] 테이블 보더(Table Border) 속성

<TABLE>에 border 속성을 지정하려면 <head>〜</head>에서, <style>〜</style>안에 지정하거나, 직접 <TABLE>에 지정하는 두 가지 방법이 있습니다.

<style type="test/css">
td {
   border:1px solid black; 
    
   /*1px :보더 라인의 두께
     solid :보더 유형
     black :보더 색*/
</style>

CSS

▼　1개의 보더(border)을 표시하는 순서는 없습니다. 아래는 <head>〜</head>안에 보더 속성을 사용해 만든 테이블의 CSS의 한 예입니다.

<style type="test/css">
table {
   margin-left:10px;
   border-collapse:separate;
   border-spacing: 3px;
}

th.sample {
   text-align:center;
   border:double 3px blue; 
   width:150;
   background-color:pink;
}

td.sample1{
   text-align:center; 
   border:2px solid red; 
   text-color:gray;
   width:100;
}

td.sample2{
   text-align:right; 
   border:3px dotted red; 
   text-color:gray;
   width:100;
}
</style>

스폰서 링크

TABLE 태그

▼　아래와 같이 HTML 태그에 CSS 스타일을 직접 작성할 수도 있습니다.

<table>
　<tr>
　　<th class="sample">연령</th>
　　<td class="sample1">28</td>
　</tr>
　<tr>
　　<th style="border:5px outset pink;">키</th>
　　<td class="sample2">172</td>
　</tr>
</table>

▼　결과, 아래의 테이블이 완성됩니다.

연령	28
키	172

border-style: 속성 값

아래 속성의 샘플은 여기를 Click!

solid	단선(실선)으로 표시됩니다.
double	복선으로 표시됩니다.
hidden	보더는 표시되지 않고 두께도 "0"이 됩니다. 테이블 셀 등의 보더가 겹치는 경우, hidden이 우선시 됩니다.
groove	입체적으로 움푹 패어 들어가 보이는 선으로 표시합니다.
ridge	입체적으로 선이 돌출되어 표시됩니다.
inset	보더(border)로 둘러싸인 영역 전체가 입체적으로 움푹 들어간 것 같이 표시됩니다.
outset	보더(border) 둘러싸인 영역 전체가 입체적으로 돌기되어 보이는 것 같이 표시됩니다.
dotted	점선으로 표시됩니다.
dashed	파선(굵은 점선)으로 표시됩니다.
none	초기값입니다. 보더는 표시되지 않고, 선폭도 "0"이 됩니다. 테이블 셀 등의 보더가 겹치는 경우 다른 값이 우선됩니다.