웹사이트에 표를 추가하면 많은 양의 정보를 명확하게 표시할 수 있는 유용한 방법입니다. 또한 표를 사용하면 공간을 효율적으로 사용할 수 있고 복잡한 데이터를 더 쉽게 읽고 비교할 수 있습니다.
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>
⭐ 머리글 태그 안에 스타일 태그를 추가합니다. 그림자, 둥근 표 모서리, 글꼴 및 여백과 같은 일반적인 스타일을 표에 추가합니다:
<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>
⭐ 웹 브라우저에서 표를 보려면 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로 스타일을 지정하여 기본 모양을 개선할 수 있습니다. 하지만 접근성을 위해 표를 레이아웃에 너무 많이 사용하지 말고 데이터용으로만 사용하세요.
큰 표는 특히 여러 열과 행을 사용하는 경우 만들고 업데이트하는 데 많은 노력이 필요할 수 있습니다. 직접 코드를 작성하여 마크업을 생성하거나 마크다운과 같은 친숙한 구문을 활용할 수 있습니다.