HTML 표 (Table)에 대한 자세한 설명 및 선 속성

 

HTML 표 (Table)에 대한 자세한 설명 및 선 속성

HTML 표란?

HTML 표는 데이터를 행과 열 형태로 정렬하여 표현하는 요소입니다. 데이터베이스의 내용을 웹 페이지에 시각적으로 나타내거나, 목록이나 스케줄 등을 정리할 때 유용하게 사용됩니다.

표 구성 요소

• <table>: 전체 표를 감싸는 태그입니다.
• <tr>: 표의 한 행을 나타내는 태그입니다.
• <th>: 표의 머리글(헤더) 셀을 나타내는 태그입니다.
• <td>: 표의 데이터 셀을 나타내는 태그입니다.

표의 기본 구조

HTML

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>성별</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>남</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>25</td>
    <td>남</td>
  </tr>
</table>

코드를 사용할 때는 주의가 필요합니다.

 

선 속성 (Border)

표에 선을 추가하여 가독성을 높이고 디자인을 다양하게 할 수 있습니다. 선 속성은 주로 border 속성을 사용하여 설정합니다.

• border-width: 테두리 선의 두께를 설정합니다.
• border-style: 테두리 선의 스타일을 설정합니다 (solid, dashed, dotted 등).
• border-color: 테두리 선의 색상을 설정합니다.

예시: 다양한 스타일의 표

HTML

<table>
  <style>
    table {
      border-collapse: collapse; /* 테두리 합치기 */
    }
    td, th {
      border: 1px solid black;
      padding: 15px;
    }
  </style>

  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>성별</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>남</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>25</td>
    <td>남</td>
  </tr>
</table>

코드를 사용할 때는 주의가 필요합니다.

 

위 예시에서는 border-collapse: collapse 속성을 사용하여 테두리가 서로 합쳐져 깔끔한 모양을 만들었습니다. td와 th 태그에 border: 1px solid black;을 적용하여 각 셀에 검은색 테두리를 추가했습니다.

더 다양한 스타일링

• 셀 간격: cellspacing 속성을 사용하여 셀 간의 간격을 조절할 수 있습니다.
• 셀 내 여백: padding 속성을 사용하여 셀 내부 내용과 테두리 사이의 여백을 조절할 수 있습니다.
• 배경색: background-color 속성을 사용하여 셀 또는 전체 테이블의 배경색을 설정할 수 있습니다.
• 텍스트 정렬: text-align 속성을 사용하여 셀 내 텍스트의 정렬 방식을 설정할 수 있습니다.

주의 사항

• 표의 남용: 표는 데이터를 정렬하여 보여주는 데 효과적이지만, 레이아웃을 구성하는 용도로는 적합하지 않습니다. div와 같은 요소를 사용하여 레이아웃을 구성하는 것이 좋습니다.
• 접근성: 시각 장애인을 위한 스크린 리더가 표를 정확하게 해석할 수 있도록 <caption> 태그를 사용하여 표의 제목을 추가하고, <thead>, <tbody>, <tfoot> 태그를 사용하여 표의 구조를 명확하게 해주는 것이 좋습니다.

결론

HTML 표는 데이터를 효과적으로 표현하는 데 유용한 도구입니다. 다양한 속성을 활용하여 표의 모양과 기능을 커스터마이징할 수 있습니다. 하지만 표의 남용은 웹 페이지의 가독성을 저하시킬 수 있으므로, 적절한 상황에서 사용해야 합니다.