본문 바로가기
HTML/CSS문법

CSS Table

by flycoding 2023. 8. 14.
반응형

CSS border 속성

CSS에서 테이블 테두리를 지정한다. border 속성을 사용한다.

아래 예제에서는 <table>, <tables> 및 <tables> 요소에 대한 솔리드 테두리를 지정한다:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid;
}
</style>
</head>
<body>

<h2>테이블에 테두리를 추가:</h2>

<table>
  <tr>
    <th>이름</th>
    <th>성</th>
  </tr>
  <tr>
    <td>길동</td>
    <td>홍</td>
  </tr>
  <tr>
    <td>철수</td>
    <td>이</td>
  </tr>
</table>

</body>
</html>

table, th, td 요소에 border 속성을 1px solid 값을 설정하였고, 결과 화면은 아래 그림과 같다.

CSS border 속성 결과 화면

 

CSS width: 100% 속성

위의 테이블은 경우에 따라 작아 보일 수 있다. 전체 화면에 걸쳐 있어야 하는 테이블(전체 너비)이 필요한 경우 <table> 요소에 width: 100%를 추가한다:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid;
}
table {
  width: 100%;
}
</style>
</head>
<body>

<h2>테이블에 테두리를 추가:</h2>

<table>
  <tr>
    <th>이름</th>
    <th>성</th>
  </tr>
  <tr>
    <td>길동</td>
    <td>홍</td>
  </tr>
  <tr>
    <td>철수</td>
    <td>이</td>
  </tr>
</table>

</body>
</html>

table, th, td 요소에 border 속성을 1px solid 값을 설정하였고,

table 요소에 width속성에 100%값을 설정한 결과 화면은 아래 그림과 같다.

CSS border, width 속성 설정 결과 화면

 

이중 테두리
위의 예에서 표에는 이중 테두리가 있다. 이것은 테이블 요소와 디럭스 요소 그리고 <td> 요소가 모두 별도의 경계를 가지고 있기 때문이다.

이중 테두리를 제거하려면 아래 예제를 참조하시오.

 

CSS border-collapse 속성

테두리 축소 속성은 테이블 테두리를 단일 테두리로 축소할지 여부를 설정한다:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid;
}
table {
  width: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>테이블에 테두리를 추가:</h2>

<table>
  <tr>
    <th>이름</th>
    <th>성</th>
  </tr>
  <tr>
    <td>길동</td>
    <td>홍</td>
  </tr>
  <tr>
    <td>철수</td>
    <td>이</td>
  </tr>
</table>

</body>
</html>

table, th, td 요소에 border 속성을 1px solid 값을 설정하였고,

table 요소에 width속성에 100%값을 설정하였고,

table 요소에 border-collapse 속성값에 collapse를 설정한 결과 화면은 아래 그림과 같다.

CSS border, width, border-collapse 설정 결과 화면

 

 

CSS border

table 요소에 바깥 테두리만 지정하려면 <table>에 대한 border 속성만 지정한다:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border: 1px solid;
}
</style>
</head>
<body>

<h2>테이블에 테두리를 추가:</h2>

<table>
  <tr>
    <th>이름</th>
    <th>성</th>
  </tr>
  <tr>
    <td>길동</td>
    <td>홍</td>
  </tr>
  <tr>
    <td>철수</td>
    <td>이</td>
  </tr>
</table>

</body>
</html>

table 요소에 width: 100%를 설정하였고 border속성에는 1px solid값을 설정하여 테이블 바깥 테두리만 설정한 결과 화면은 아래 그림과 같다.

CSS table border width 설정 결과 화면

 

CSS table 예제

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

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

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>

<h1>팬시 테이블</h1>

<table id="customers">
  <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>

customer 요소에 font-family속성에는 Arial, helvetica를 지정하였고, border-collapse에는 collapse 설정값을 설정하여 테이블 테두리를 실선으로, width는 100%로 테이블 크기를 브라우저 너비만큼 지정한다.

테이블의 th,  td요소에는 border속성에 1px solid  #ddd그리고 padding속성에 8px를 설정하였다.

customer tr 요소에는 nth-child(even){background-color속성에 f2f2f2값을 설정하였고,

customer tr에 hover인 경우 배경색에는 #ddd색을 지정하였다.

 

위의 테이블을 설정한 결과 화면은 아래 그림과 같다.

CSS table 활용 예제

 

지금까지 CSS로 테이블을 설정하는 개념과 속성 그리고 예제를 살펴보았다.

모든 예제는 손으로 눈으로 머리로 꼴 실습하기를 추천합니다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS table alignment  (0) 2023.08.16
CSS table size  (0) 2023.08.15
CSS lists  (0) 2023.08.13
CSS link  (0) 2023.08.12
CSS font 속성  (0) 2023.08.11

관련글

댓글

티스토리툴바