웹사이트에 표를 추가하면 많은 양의 정보를 명확하게 표시할 수 있는 유용한 방법입니다. 또한 표를 사용하면 공간을 효율적으로 사용할 수 있고 복잡한 데이터를 더 쉽게 읽고 비교할 수 있습니다.

CSS를 사용하여 표를 시각적으로 더 매력적으로 디자인할 수 있습니다. 이렇게 하면 웹사이트의 전반적인 사용자 경험도 향상시킬 수 있습니다.

모던한 단일 행과 열 디자인

단일 행과 열이 있고 병합된 셀이 없는 단순한 표 디자인을 추가할 수 있습니다. 표를 스타일링하면 웹페이지가 사용자의 관심을 끌 수 있습니다. 표 스타일링 외에도 웹사이트에 추가할 수 있는 다른 멋진 HTML 효과와 CSS 디스플레이 웹사이트 레이아웃이 있습니다.

이 연습에 대한 코드는 GitHub 리포지토리에서 확인할 수 있습니다.

⭐ 새 HTML 파일에 기본 HTML 코드 구조를 추가합니다:

 <!DOCTYPE html>
<html>
  <head>
    <title>My Simple Table</title>
  </head>
  <body>

  </body>
</html>

⭐ 본문 안에 표 태그를 추가합니다:

 <table>
        
</table>

⭐ HTML 표 요소에는 표 내부의 각 행에 대한 표 행 태그가 포함되어야 합니다. 맨 위 행은 일반적으로 제목에 사용됩니다. 표의 각 열을 나타내려면 표 헤더 HTML 태그를 사용합니다:

 <tr>
  <th>Header 1</th>
  <th>Header 2</th>
  <th>Header 3</th>
</tr>

⭐ 헤더 행 아래에 행을 더 추가합니다. 표 데이터 HTML 태그를 사용하여 표의 각 셀에 데이터를 추가합니다:

 <tr>
  <td>Row 1, Column 1</td>
  <td>Row 1, Column 2</td>
  <td>Row 1, Column 3</td>
</tr>
<tr>
  <td>Row 2, Column 1</td>
  <td>Row 2, Column 2</td>
  <td>Row 2, Column 3</td>
</tr>
<tr>
  <td>Row 3, Column 1</td>
  <td>Row 3, Column 2</td>
  <td>Row 3, Column 3</td>
</tr>
<tr>
  <td>Row 4, Column 1</td>
  <td>Row 4, Column 2</td>
  <td>Row 4, Column 3</td>
</tr>
<tr>
  <td>Row 5, Column 1</td>
  <td>Row 5, Column 2</td>
  <td>Row 5, Column 3</td>
</tr>

이 글도 확인해 보세요:  JES를 활용한 흥미로운 사운드 처리 기법 3가지

⭐ 머리글 태그 안에 스타일 태그를 추가합니다. 그림자, 둥근 표 모서리, 글꼴 및 여백과 같은 일반적인 스타일을 표에 추가합니다:

 <style>
  table {
    border-collapse: collapse;
    width: 100%;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: left;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
  }
</style>

⭐ 표 헤더에 배경색과 정렬된 텍스트를 제공하도록 스타일 지정:

 table th {
  background-color: #ff9800;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #ccc;
}

⭐ 표 행에 회색과 흰색을 번갈아 사용하도록 스타일을 지정하고 행 위로 마우스를 가져갈 때 효과를 추가:

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

table tr:hover td {
  background-color: #ffedcc;
}

⭐ 표의 셀 내부 데이터에 스타일을 지정합니다:

 table td {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
}

⭐ 웹 브라우저에서 표를 보려면 HTML 파일을 엽니다:

다중 줄 셀 표 디자인

일부 표에는 행이 병합된 열이 포함되어 다중 줄 셀을 형성합니다.

⭐ 현재 표 행을 모두 제거하고 제목이 있는 맨 위 행만 유지합니다:

 <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</table>

⭐ 행간 속성을 사용하여 여러 줄로 된 셀을 만듭니다. 이렇게 하면 해당 셀이 지정된 행 수만큼 확장됩니다.

 <!-- Section 1 -->
<tr>
  <td rowspan="2">Multi-line cell</td>
  <td>Row 1, Column 2</td>
  <td>Row 1, Column 3</td>
</tr>
<tr>
  <td>Row 2, Column 2</td>
  <td>Row 2, Column 3</td>
</tr>

⭐ 행간 값이 다른 여러 줄로 된 다른 셀을 추가할 때는 해당 테이블 행 수만큼의 HTML 태그를 추가합니다. 이는 셀이 가로지르는 행의 높이 또는 행 수를 일치시키기 위한 것입니다. 예를 들어 셀의 행 간격이 3인 경우 표를 올바르게 정렬하려면 다른 열에 세 행을 추가해야 합니다.

 <!-- Section 2 -->
<tr>
  <td rowspan="3">Multi-line cell</td>
  <td>Row 3, Column 2</td>
  <td>Row 3, Column 3</td>
</tr>
<tr>
  <td>Row 4, Column 2</td>
  <td>Row 4, Column 3</td>
</tr>
<tr>
  <td>Row 5, Column 2</td>
  <td>Row 5, Column 3</td>
</tr>

이 글도 확인해 보세요:  파이썬을 사용하여 FLAMES 게임 플레이하기

⭐ 웹 브라우저에서 표를 보려면 HTML 파일을 엽니다:

병합 행 표 디자인

여러 줄로 된 셀과 마찬가지로 표에도 여러 열에 걸쳐 병합되는 행이 있을 수 있습니다.

⭐ 현재 표 행을 모두 제거하고 제목이 있는 맨 위 행만 유지합니다:

 <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</table>

⭐ 표에 표 행을 더 추가합니다. colspan 속성을 사용하여 행 중 하나를 3개 열에 걸쳐 병합합니다:

 <!-- Section 1 -->
<tr>
  <td style="background-color: #ffedcc" colspan="3">Q1</td>
</tr>
<tr>
  <td>Row 2, Column 1</td>
  <td>Row 2, Column 2</td>
  <td>Row 2, Column 3</td>
</tr>
<tr>
  <td>Row 3, Column 1</td>
  <td>Row 3, Column 2</td>
  <td>Row 3, Column 3</td>
</tr>
<tr>
  <td>Row 4, Column 1</td>
  <td>Row 4, Column 2</td>
  <td>Row 4, Column 3</td>
</tr>

⭐ 병합된 행을 하나 더 추가하여 표의 섹션을 구분합니다:

 <!-- Section 2 -->
<tr>
  <td style="background-color: #ffedcc" colspan="3">Q2</td>
</tr>
<tr>
  <td>Row 6, Column 1</td>
  <td>Row 6, Column 2</td>
  <td>Row 6, Column 3</td>
</tr>
<tr>
  <td>Row 7, Column 1</td>
  <td>Row 7, Column 2</td>
  <td>Row 7, Column 3</td>
</tr>
<tr>
  <td>Row 8, Column 1</td>
  <td>Row 8, Column 2</td>
  <td>Row 8, Column 3</td>
</tr>

⭐ HTML 파일을 열어 웹 브라우저에서 표를 확인합니다:

매력적인 표를 사용하여 데이터를 최대한 활용하기

HTML 표는 웹사이트에 구조화된 데이터를 표시하는 좋은 방법입니다. CSS로 스타일을 지정하여 기본 모양을 개선할 수 있습니다. 하지만 접근성을 위해 표를 레이아웃에 너무 많이 사용하지 말고 데이터용으로만 사용하세요.

큰 표는 특히 여러 열과 행을 사용하는 경우 만들고 업데이트하는 데 많은 노력이 필요할 수 있습니다. 직접 코드를 작성하여 마크업을 생성하거나 마크다운과 같은 친숙한 구문을 활용할 수 있습니다.

By 박준영

업계에서 7년간 경력을 쌓은 숙련된 iOS 개발자인 박준영님은 원활하고 매끄러운 사용자 경험을 만드는 데 전념하고 있습니다. 애플(Apple) 생태계에 능숙한 준영님은 획기적인 솔루션을 통해 지속적으로 기술 혁신의 한계를 뛰어넘고 있습니다. 소프트웨어 엔지니어링에 대한 탄탄한 지식과 세심한 접근 방식은 독자에게 실용적이면서도 세련된 콘텐츠를 제공하는 데 기여합니다.