[HTML/CSS] table 태그의 정의 및 사용법

HTML 테이블 테두리 사용법

HTML 테이블에 테두리를 추가하여 테이블 요소들을 시각적으로 구조화하고 분리할 수 있습니다. 테두리를 추가하는 가장 권장되고 유연한 방법은 CSS를 사용하는 것입니다. 다음은 CSS를 사용하여 테두리를 추가하는 방법을 자세히 설명합니다.

1. CSS border 속성 사용:

HTML 테이블에 테두리를 추가하는 가장 일반적이고 권장되는 방법은 CSS를 사용하는 것입니다. border 속성을 다음 요소에 적용할 수 있습니다.

<table>: 전체 테이블 주위에 테두리를 추가합니다.
<th>: 테이블 헤더 셀에 테두리를 추가합니다.
<td>: 테이블 데이터 셀에 테두리를 추가합니다.

다음은 기본적인 CSS 구문입니다.

선택자 {
  border: 테두리-두께 테두리-스타일 테두리-색상;
}

선택자: table, th, td 또는 조합 (예: table, th, td)이 될 수 있습니다.
테두리-두께: 테두리의 두께를 지정합니다. 일반적인 단위는 픽셀 (px), em, rem 등입니다.
테두리-스타일: 테두리의 모양을 정의합니다. 일반적인 스타일은 다음과 같습니다.
- solid: 실선 (테이블에 가장 일반적).
- dashed: 대시 (—-) 선.
- dotted: 점 (….) 선.
- double: 이중 실선.
- groove: 3D 홈이 있는 테두리.
- ridge: 3D 융기된 테두리.
- inset: 3D 안쪽으로 들어간 테두리.
- outset: 3D 바깥쪽으로 튀어나온 테두리.
- none: 테두리 없음.
- hidden : none과 유사하지만 테두리 충돌 해결에 영향을 줍니다.
테두리-색상 : 테두리 색상을 설정합니다. 색상 이름 (예: black, red), 16진수 값 (예: #000000, #FF0000), RGB/RGBA 값 등을 사용할 수 있습니다.

예시 1: 테이블 및 셀에 기본적인 실선 테두리 적용

<!DOCTYPE html>
<html>
<head>
<title>테이블 테두리 예시</title>
<style>table, th, td {
  border: 1px solid black; /* 1px 두께, 실선, 검정색 테두리 */
}
</style>
</head>
<body>
<table>
  <tr>
    <th>머리글 1</th>
    <th>머리글 2</th>
  </tr>
  <tr>
    <td>데이터 1</td>
    <td>데이터 2</td>
  </tr>
</table>
</body>
</html>

이 코드는 테이블 자체, 머리글 셀 (<th>), 데이터 셀 (<td>) 주위에 1픽셀 실선 검정색 테두리가 있는 테이블을 만듭니다.

2. 테두리 병합 (border-collapse 속성):

기본적으로 HTML 테이블은 각 셀 주위에 분리된 테두리를 가집니다. border-collapse 속성을 사용하여 테두리가 만날 때 표시되는 방식을 제어할 수 있습니다.

border-collapse: collapse;: 인접한 셀 테두리를 병합하여 단일 테두리로 만듭니다. 이것은 테이블에 가장 일반적이고 종종 원하는 스타일입니다.
border-collapse: separate;: 테두리를 분리합니다. 이것이 기본 동작입니다. separate와 함께 border-spacing을 사용하여 테두리 사이의 간격을 제어할 수 있습니다.

예시 2: 병합된 테두리

<!DOCTYPE html>
<html>
<head>
<title>병합된 테이블 테두리</title>
<style>
table {
  border-collapse: collapse; /* 테두리 병합 */
}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>머리글 1</th>
    <th>머리글 2</th>
  </tr>
  <tr>
    <td>데이터 1</td>
    <td>데이터 2</td>
  </tr>
</table>
</body>
</html>

이 예시에서 table 스타일의 border-collapse: collapse;는 인접한 셀의 테두리를 단일 선으로 병합하여 더 깔끔한 모양을 만듭니다.

3. 분리된 테두리 및 테두리 간격 (border-spacing 속성):

border-collapse가 separate로 설정된 경우 border-spacing 속성을 사용하여 셀 테두리 사이의 간격을 조정할 수 있습니다.

예시 3: 간격이 있는 분리된 테두리

<!DOCTYPE html>
<html>
<head>
<title>간격이 있는 분리된 테이블 테두리</title>
<style>
table {
  border-collapse: separate; /* 테두리 분리 */
  border-spacing: 10px;      /* 테두리 사이 10px 간격 */
}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>머리글 1</th>
    <th>머리글 2</th>
  </tr>
  <tr>
    <td>데이터 1</td>
    <td>데이터 2</td>
  </tr>
</table>
</body>
</html>

이 코드는 셀 주위에 분리된 테두리를 만들고 테두리 사이에 10픽셀 간격을 둡니다.

4. 개별 테두리 면 스타일 지정:

다음과 같은 속성을 사용하여 테두리의 특정 면 (위, 아래, 왼쪽, 오른쪽)을 스타일링할 수 있습니다.

border-top
border-bottom
border-left
border-right

이러한 속성은 축약형 border 속성과 동일한 테두리-두께, 테두리-스타일, 테두리-색상 값을 사용합니다.

예시 4: 아래쪽 테두리만 스타일 지정

<!DOCTYPE html>
<html>
<head>
<title>아래쪽 테두리만</title>
<style>
table {
  border-collapse: collapse;
}
th, td {
  border-bottom: 2px solid red; /* 아래쪽 테두리만, 2px 두께, 빨간색 */
  padding: 8px; /* 더 나은 간격을 위해 패딩 추가 */
}
</style>
</head>
<body>
<table>
  <tr>
    <th>머리글 1</th>
    <th>머리글 2</th>
  </tr>
  <tr>
    <td>데이터 1</td>
    <td>데이터 2</td>
  </tr>
</table>
</body>
</html>

이 예시는 <th> 및 <td> 요소에 아래쪽 테두리만 적용하여 수평 구분선을 만듭니다.

5. 인라인 스타일 (덜 권장됨):

인라인 스타일을 사용하여 HTML 내에서 직접 테두리를 적용할 수도 있지만, 일반적으로 외부 또는 포함된 CSS를 사용하는 것보다 유지 관리하기 어렵고 효율성이 떨어집니다.

예시 5: 인라인 스타일

<!DOCTYPE html>
<html>
<head>
<title>인라인 스타일 테두리 (덜 권장됨)</title>
</head>
<body>
<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid blue;">머리글 1</th>
    <th style="border: 1px solid blue;">머리글 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid blue;">데이터 1</td>
    <td style="border: 1px solid blue;">데이터 2</td>
  </tr>
</table>
</body>
</html>

이 방법도 작동하지만, 더 나은 구성과 재사용성을 위해 스타일을 CSS에 유지하는 것이 좋습니다.

6. 더 이상 사용되지 않는 border 속성 (사용하지 마십시오):

이전 HTML에서는 다음과 같이 <table> 태그에서 직접 border 속성을 사용하는 것을 볼 수 있습니다.

<table border="1">
  ...
</table>

이 방법은 이제 HTML5에서 더 이상 사용되지 않으며 피해야 합니다. 기본적인 실선 테두리만 추가하고 CSS만큼 스타일링 유연성을 제공하지 않습니다. 테이블 테두리 스타일링에는 항상 CSS를 사용하십시오.

권장 사항:

테이블 테두리 스타일링에는 CSS를 사용하십시오. 이것이 현대적이고 권장되는 방법입니다.
깔끔하고 병합된 테두리 스타일을 위해 border-collapse: collapse;를 사용하십시오. 이것이 테이블에 가장 시각적으로 매력적입니다.
분리된 테두리를 원하는 경우 border-collapse: separate;와 함께 border-spacing을 사용하여 간격을 제어하십시오.
더 나은 구성과 유지 관리를 위해 CSS 스타일을 외부 스타일 시트 또는 <head>의 <style> 태그 안에 보관하십시오.
HTML에서 더 이상 사용되지 않는 border 속성을 사용하지 마십시오.

CSS 속성인 border, border-collapse, border-spacing 등을 사용하면 HTML 테이블 테두리의 모양을 완전히 제어하여 시각적으로 더 매력적이고 구조화된 테이블을 만들 수 있습니다.

Post Views: 14

[HTML/CSS] table 태그의 정의 및 사용법

HTML 테이블 테두리 사용법

답글 남기기 응답 취소