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. 표 테두리 예제 실행 결과 화면


3. 셀 테두리 예제 소스 코드
→ 셀 테두리에 검은색 점선 표시
<style>
table {
border: 2px solid #000; /* 표 테두리에 검음색 실선 표시 */
}
th, td {
border: 2px dotted #000; /* 셀 테두리에 검은색 점선 표시 */
padding: 10px; /* 설 테두리와 내용 사이에 여백 지정 */
text-align: center; /* 셀 내용을 가운데 정렬 */
}
</style>
4. 셀 테두리 예제 실행 결과 화면


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. 실행 결과 화면


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. 실행 결과 화면


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. 실행 결과 화면


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 관련 이전 게시글
- CSS 스타일과 스타일시트 적용 방법 그리고 티스토리
- CSS 선택자 유형 – 전체, 태그, 클래스, ID, 그룹
- CSS 스타일 적용 순서(우선순위) – !important
- CSS 글꼴(폰트) 관련 스타일, font-family 속성 등
- CSS 웹 폰트 사용하기 – @font-face
- CSS 구글 웹 폰트 사용하기, 티스토리 적용 방법
- [CSS] 눈누 웹 폰트 사용하기, 티스토리 적용 방법
- [CSS] 색상 지정하기(6가지 방법), 티스토리 글자색 지정
- [CSS] 텍스트 정렬(text-align), 줄 간격 조절(line-height)
- [CSS] a태그 링크 밑줄 없애기, 밑줄 스타일, 색상 변경
- [CSS] 목록 리스트 스타일 정리 및 예제, list-style 속성
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!