CSS 표(table) 스타일 정리 및 예제, border 속성 등

CSS 표(table) 스타일 정리 및 예제, border 속성 등

HTML에서 표(table)를 만들 때 CSS을 이용하면 표 테두리, 셀 테두리, 표 색상, 셀 색상, 셀 사이의 여백 등 원하는 스타일을 지정할 수 있습니다. 그럼 예제를 통해서 표(table)와 관련된 스타일에 대해서 알아보죠.


▼ 표 스타일 중에서 대표적인 속성 ▼

속성설명
border표와 셀에 테두리를 지정합니다.
border-spacing셀 사이에 여백을 지정합니다.
border-collapse표와 셀의 테두리를 합쳐 한 줄로 표시할지를 지정합니다.
caption-side표 제목의 위치를 지정합니다.
목차

1. 사용 예제 HTML

1. 사용 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>테이블 속성</title>
<style>
</style>    
</head>
<body>
     <table>
          <caption>학생정보</caption>
          <tr>
               <th>학년</th><th>학번</th><th>이름</th><th>학과</th>
          </tr>
          <tr>
               <td>1</td><td>B10001</td><td>홍길동1</td><td>컴퓨터공학과</td>
          </tr>
          <tr>
               <td>1</td><td>B10002</td><td>홍길동2</td><td>물리과</td>
          </tr>
          <tr>
               <td>2</td><td>B10003</td><td>홍길동3</td><td>식품공학과</td>
          </tr>
          <tr>
               <td>2</td><td>B10004</td><td>홍길동4</td><td>화학과</td>
          </tr>
     </table>
</body>
</html>


2. 실행 결과 화면

사용 예제 실행 결과 화면입니다.

2. border 속성

1. 표 테두리 예제 소스 코드

→ 표 테두리에 검은색 실선 표시

<style>
     table {
         border: 2px solid #000;     /* 표 테두리에 검음색 실선 표시 */
     }
 </style>


2. 표 테두리 예제 실행 결과 화면

border 속성 표 테두리 지정 실행 결과 화면입니다.


3. 셀 테두리 예제 소스 코드

→ 셀 테두리에 검은색 점선 표시

<style>
     table {
         border: 2px solid #000;     /* 표 테두리에 검음색 실선 표시 */
     }
     th, td {
         border: 2px dotted #000;    /* 셀 테두리에 검은색 점선 표시 */
         padding: 10px;                /* 설 테두리와 내용 사이에 여백 지정 */
         text-align: center;           /* 셀 내용을 가운데 정렬 */ 
     }
 </style>


4. 셀 테두리 예제 실행 결과 화면

border 속성 셀 테두리 지정 실행 결과 화면입니다.

3. border-spacing 속성

[사용법] border-spacing: 수평거리 수직거리


1. 예제 소스 코드

<style>
     table {
         border: 2px solid #000;     /* 표 테두리에 검음색 실선 표시 */
         border-spacing: 20px 10px;    /* 셀 사이 여백 지정 */
     }
     th, td {
         border: 2px dotted #000;    /* 셀 테두리에 검은색 점선 표시 */
         padding: 10px;                /* 설 테두리와 내용 사이에 여백 지정 */
         text-align: center;           /* 셀 내용을 가운데 정렬 */ 
     }
 </style>


2. 실행 결과 화면

border-spacing 속성 사용 예제 실행 결과 화면입니다.

4. border-collapse 속성


[속성의 값]

collapse : 표와 셀의 테두리를 합쳐 한 줄로 표시합니다.

separate : 표와 셀의 테두리를 따로 표시합니다. 기본값입니다.


1. 예제 소스 코드

<style>
     table {
         border: 2px solid #000;     /* 표 테두리에 검음색 실선 표시 */
         border-spacing: 20px 10px;    /* 셀 사이 여백 지정 */
         border-collapse: collapse;    /* 표 테두리를 한 줄에 표시 */
     }
     th, td {
         border: 1px dotted #000;    /* 셀 테두리에 검은색 점선 표시 */
         padding: 10px;                /* 설 테두리와 내용 사이에 여백 지정 */
         text-align: center;           /* 셀 내용을 가운데 정렬 */ 
     }
 </style>


2. 실행 결과 화면

border-collapse 속성 사용 예제 실행 결과 화면입니다.

5. caption-side 속성


[속성의 값]

top : 제목을 표 위에 표시합니다. 기본값입니다.

bottom : 제목을 표 아래에 표시합니다.


1. 예제 소스 코드

<style>
     table {
         border: 2px solid #000;     /* 표 테두리에 검음색 실선 표시 */
         border-spacing: 20px 10px;    /* 셀 사이 여백 지정 */
         border-collapse: collapse;    /* 표 테두리를 한 줄에 표시 */
         caption-side: bottom;         /* 표 캡션을 아래로 위치 */
     }
     th, td {
         border: 1px dotted #000;    /* 셀 테두리에 검은색 점선 표시 */
         padding: 10px;                /* 설 테두리와 내용 사이에 여백 지정 */
         text-align: center;           /* 셀 내용을 가운데 정렬 */ 
     }
 </style>


2. 실행 결과 화면

caption-side 속성 예제 실행 결과 화면입니다.

6. 예제 1) 표에서 가로선만 표시하기

1. 예제 소스 코드

<style>
     table {
         border-collapse: collapse;          /* 표 테두리를 한 줄에 표시 */
     }
     th, td {
         border-bottom: 1px solid #000;    /* 셀 테두리에 아래에 검은색 실선 표시 */
         padding: 10px;                      /* 설 테두리와 내용 사이에 여백 지정 */
         text-align: center;                 /* 셀 내용을 가운데 정렬 */ 
     }
 </style>


2. 실행 결과 화면

표에서 가로선만 표시하기 예제 실행 결과 화면입니다.

7. 예제 2) 표 양쪽 옆에 선 없애기

1. 예제 소스 코드

<style>
     table {
         border-collapse: collapse;    /* 표 테두리를 한 줄에 표시 */
     }
     th, td {
         border: 1px solid #000;     /* 셀 테두리에 검은색 실선 표시 */
         padding: 10px;                /* 설 테두리와 내용 사이에 여백 지정 */
         text-align: center;           /* 셀 내용을 가운데 정렬 */ 
     }
     th:first-child, td:first-child {
         border-left: none;            /* th, td 첫 번째 요소에 왼쪽 테두리 없애기 */ 
     }
     th:last-child, td:last-child {
         border-right: none;           /* th, td 마지막 요소에 오른쪽 테두리 없애기 */
     }
 </style>


2. 실행 결과 화면

표 양쪽 옆에 선 없애기 예제 실행 결과 화면입니다.

CSS 관련 이전 게시글

  1. CSS 스타일과 스타일시트 적용 방법 그리고 티스토리
  2. CSS 선택자 유형 – 전체, 태그, 클래스, ID, 그룹
  3. CSS 스타일 적용 순서(우선순위) – !important
  4. CSS 글꼴(폰트) 관련 스타일, font-family 속성 등
  5. CSS 웹 폰트 사용하기 – @font-face
  6. CSS 구글 웹 폰트 사용하기, 티스토리 적용 방법
  7. [CSS] 눈누 웹 폰트 사용하기, 티스토리 적용 방법
  8. [CSS] 색상 지정하기(6가지 방법), 티스토리 글자색 지정
  9. [CSS] 텍스트 정렬(text-align), 줄 간격 조절(line-height)
  10. [CSS] a태그 링크 밑줄 없애기, 밑줄 스타일, 색상 변경
  11. [CSS] 목록 리스트 스타일 정리 및 예제, list-style 속성
위로 스크롤