CSS Tables
CSS Tables: 웹 페이지에서 테이블 스타일링하는 방법
HTML의 **테이블(Table)**은 데이터를 **행(row)**과 **열(column)**로 구조화하여 표시하는 데 유용합니다. 기본 HTML 테이블은 텍스트나 숫자 데이터를 단순히 표시하지만, CSS를 사용해 테이블의 레이아웃, 경계선, 간격 및 배경색 등을 조정할 수 있습니다. 이 자료에서는 CSS를 사용한 테이블 스타일링과 다양한 예제를 다룹니다.
1. 기본 HTML 테이블
먼저, CSS로 테이블을 스타일링하기 전에 HTML 테이블의 기본 구조를 이해하는 것이 중요합니다.
HTML 테이블 기본 구조 예시:
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>28</td>
<td>개발자</td>
</tr>
<tr>
<td>이영희</td>
<td>35</td>
<td>디자이너</td>
</tr>
</tbody>
</table>위 코드는 이름, 나이, 직업을 표시하는 기본적인 HTML 테이블입니다. 이제 이 테이블에 CSS 스타일을 적용하여 디자인을 개선할 수 있습니다.
2. 기본 테이블 스타일링
CSS를 사용하면 테이블의 경계선, 셀 간격, 텍스트 정렬 등을 쉽게 조정할 수 있습니다.
기본 테이블 스타일링 예시:
table {
width: 100%; /* 테이블의 너비를 부모 요소에 맞춤 */
border-collapse: collapse; /* 테이블 경계선 간격 제거 */
}
th, td {
border: 1px solid #ddd; /* 셀 경계선 설정 */
padding: 8px; /* 셀 내부 여백 */
text-align: left; /* 텍스트 왼쪽 정렬 */
}
th {
background-color: #f2f2f2; /* 헤더 배경색 */
font-weight: bold; /* 헤더 글꼴 굵기 */
}위 코드는 테이블의 기본 스타일을 정의합니다:
border-collapse속성은 테이블 셀 간의 공백을 제거하고, 경계선을 하나로 결합합니다.- *
padding*을 추가하여 셀 내 텍스트와 경계선 사이에 여백을 설정하고, 테이블의 가독성을 높입니다. - *헤더 셀(
th)**에 배경색을 적용하여 시각적으로 구분합니다.
3. 테이블 줄무늬 효과 (Zebra Stripes)
줄무늬 효과는 테이블의 가독성을 향상시키는 데 매우 유용합니다. 테이블 행을 번갈아가며 다른 배경색으로 설정하여, 사용자가 데이터를 쉽게 읽을 수 있도록 도와줍니다.
줄무늬 테이블 예시:
tr:nth-child(even) {
background-color: #f9f9f9; /* 짝수 행에 배경색 적용 */
}
tr:nth-child(odd) {
background-color: #fff; /* 홀수 행에 배경색 적용 */
}위 코드는 테이블의 짝수 행(even)에 옅은 회색 배경을 적용하고, 홀수 행(odd)에는 흰색 배경을
유지하여 줄무늬 효과를 줍니다.
4. 테이블 경계선 스타일
테이블의 경계선(border) 스타일은 테이블의 전반적인 시각적 스타일을 결정하는 중요한 요소입니다. 두께, 색상, 모양 등을 조정하여 테이블을 더 세련되게 만들 수 있습니다.
경계선 스타일 예시:
table, th, td {
border: 1px solid #ddd; /* 모든 테이블 요소에 경계선 적용 */
}
table {
border-collapse: collapse; /* 테두리 겹침 제거 */
}
th, td {
padding: 10px;
border-bottom: 2px solid #444; /* 아래쪽 경계선만 굵게 설정 */
}위 코드는 테이블의 경계선과 셀 간의 경계선을 굵고 어두운 색으로 설정하여, 테이블에 정돈된 느낌을 줍니다.
5. 테이블 머리글 고정 (Sticky Headers)
많은 데이터가 포함된 테이블에서 헤더를 고정하면, 사용자가 페이지를 스크롤할 때도 머리글이 상단에 고정되어 데이터를 쉽게 이해할 수 있습니다.
머리글 고정 예시:
thead th {
position: sticky;
top: 0;
background-color: #333;
color: white;
z-index: 1;
}위 코드는 테이블의 머리글을 고정하고, 배경색을 어둡게 설정하여 시각적 구분을 더 명확하게 합니다. 사용자가 스크롤을 내려도 헤더가 상단에 고정됩니다.
6. 테이블 너비 및 높이 조정
테이블 셀의 너비와 높이를 조정하여 데이터를 더 효율적으로 배치할 수 있습니다. 또한, 테이블이 부모 요소의 크기에 맞게 반응형으로 조정될 수 있도록 설정할 수 있습니다.
테이블 너비 및 높이 조정 예시:
table {
width: 100%; /* 부모 요소에 맞춤 */
}
th, td {
width: 33%; /* 각 셀의 너비를 1/3로 설정 */
height: 50px; /* 셀 높이를 고정 */
text-align: center; /* 텍스트를 가운데 정렬 */
}위 코드는 테이블의 너비를 부모 요소에 맞게 설정하고, 각 셀의 너비를 동일하게 분배합니다. 높이를 고정하여 데이터가 한눈에 들어오도록 디자인했습니다.
7. 테이블에 그림자 효과 추가 (Box Shadow)
테이블에 **그림자 효과(box-shadow)**를 추가하여 시각적으로 더욱 입체감 있고 모던한 디자인을 구현할 수 있습니다.
그림자 효과 테이블 예시:
table {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 적용 */
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
}위 코드는 테이블에 부드러운 그림자 효과를 추가하여, 테이블이 페이지 위에 떠 있는 듯한 느낌을 줍니다. 이 스타일은 현대적인 웹 디자인에서 자주 사용됩니다.
8. 반응형 테이블 디자인
모바일 및 작은 화면에서 테이블을 반응형으로 디자인하면, 사용자가 테이블의 데이터를 쉽게 확인할 수 있습니다. CSS의 미디어 쿼리와 스크롤 기능을 사용하면 테이블이 작은 화면에서도 제대로 표시되도록 만들 수 있습니다.
반응형 테이블 예시:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
}
@media screen and (max-width: 600px) {
table {
display: block;
overflow-x: auto; /* 작은 화면에서 가로 스크롤 활성화 */
}
th, td {
display: block;
width: 100%;
}
}위 코드는 600px 이하의 화면에서는 테이블이 블록 레벨 요소로 변환되고, 가로 스크롤이 가능해지도록 설정합니다. 이를 통해 모바일 화면에서도 테이블을 쉽게 확인할 수 있습니다.
9. 데이터 강조를 위한 테이블 스타일링
특정 데이터를 강조하기 위해 글꼴 두께, 배경색 또는 텍스트 색상을 변경할 수 있습니다. 중요한 데이터를 시각적으로 구분해주면 사용자가 쉽게 인식할 수 있습니다.
강조된 데이터 스타일링 예시:
td.highlight {
background-color: #ffeb3b; /* 중요한 데이터의 배경색 설정 */
font-weight: bold; /* 텍스트 굵게 */9. 데이터 강조를 위한 테이블 스타일링 (계속)
특정 데이터를 강조하면 테이블에서 중요한 정보를 쉽게 인식할 수 있습니다. 배경색, 텍스트 굵기, 텍스트 색상 등을 조정하여 특정 셀을 시각적으로 구분할 수 있습니다.
강조된 데이터 스타일링 예시 (계속):
td.highlight {
background-color: #ffeb3b; /* 중요한 데이터의 배경색 설정 */
font-weight: bold; /* 텍스트 굵게 */
color: #333; /* 텍스트 색상 설정 */
}위 코드는 중요한 데이터에 노란색 배경을 설정하고, 텍스트를 굵게 만들어 쉽게 눈에 띄도록 강조한 예시입니다. 텍스트 색상은 더 어두운 색(#333)으로 설정하여 가독성을 유지합니다.
HTML 예시:
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>28</td>
<td class="highlight">95</td> <!-- 중요한 데이터 강조 -->
</tr>
<tr>
<td>이영희</td>
<td>35</td>
<td>87</td>
</tr>
</tbody>
</table>이 코드는 테이블의 점수 데이터 중에서 95점을 강조하여 시각적 차별화를 통해 사용자가 중요한 정보를 쉽게 파악할 수 있도록 도와줍니다.
10. 호버 효과를 통한 강조 (Hover Effect)
호버 효과는 사용자가 테이블의 특정 행이나 열에 마우스를 올렸을 때 스타일이 변경되어, 시각적으로 강조하는 데 유용합니다. 이를 통해 사용자는 테이블 내 데이터를 더 직관적으로 탐색할 수 있습니다.
테이블 행에 호버 효과 적용 예시:
tr:hover {
background-color: #f1f1f1; /* 마우스 오버 시 배경색 변경 */
}위 코드는 사용자가 테이블 행에 마우스를 올렸을 때, 해당 행의 배경색이 연한 회색으로 변경되도록 설정한 예시입니다. 이를 통해 사용자가 데이터를 쉽게 구분할 수 있습니다.
HTML 예시:
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>28</td>
<td>개발자</td>
</tr>
<tr>
<td>이영희</td>
<td>35</td>
<td>디자이너</td>
</tr>
</tbody>
</table>위 테이블에서 사용자는 각 행에 마우스를 올리면 해당 행이 강조되며, 시각적 효과를 통해 가독성이 향상됩니다.
11. 고정 레이아웃 테이블 (Fixed Layout Table)
고정 레이아웃(fixed-layout) 테이블은 각 셀의 너비를 고정하고, 내용에 따라 크기가 변하지 않도록 설정할 수 있습니다. 이 방식은 특히 많은 데이터를 담는 테이블에서 사용되며, 테이블이 일정한 너비를 유지하도록 만듭니다.
고정 레이아웃 테이블 예시:
table {
table-layout: fixed; /* 고정 레이아웃 설정 */
width: 100%; /* 테이블 너비를 100%로 설정 */
}
th, td {
width: 25%; /* 모든 셀의 너비를 25%로 고정 */
padding: 10px;
text-align: center;
overflow: hidden; /* 내용이 넘치면 숨김 */
text-overflow: ellipsis; /* 넘치는 텍스트를 생략(...)으로 표시 */
}위 코드는 테이블 셀의 너비를 고정하고, 내용이 넘칠 경우 텍스트를 **생략(...)**으로 처리하여 테이블의 일관된 레이아웃을 유지합니다. 특히, 데이터가 많을 때 유용한 방식입니다.
HTML 예시:
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>28</td>
<td>개발자</td>
<td>웹 개발자로서 다양한 프로젝트를 담당하고 있습니다.</td>
</tr>
<tr>
<td>이영희</td>
<td>35</td>
<td>디자이너</td>
<td>사용자 경험과 인터페이스 디자인에 집중합니다.</td>
</tr>
</tbody>
</table>이 테이블은 각 셀의 너비가 고정되어 있으며, 셀의 내용이 길어도 고정된 공간 안에서 표시됩니다.
12. 미디어 쿼리를 사용한 반응형 테이블
미디어 쿼리를 사용하면 화면 크기에 따라 테이블이 자동으로 재배치되거나 스크롤 기능이 추가되어 모바일 기기에서도 데이터를 쉽게 확인할 수 있습니다.
반응형 테이블 예시:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto; /* 작은 화면에서 가로 스크롤 활성화 */
white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}
}위 코드는 600px 이하의 화면에서는 테이블을 가로로 스크롤할 수 있게 설정하여 작은 화면에서도 테이블이 깨지지 않고 적절히 표시되도록 설정합니다.
13. 테이블 내 이미지 및 링크 사용
테이블 내 이미지나 링크를 함께 사용하면, 상품 목록이나 프로젝트 정보를 제공할 때 유용합니다. 테이블 셀 안에 이미지를 넣고, 링크로 클릭 가능한 콘텐츠를 만들 수 있습니다.
이미지와 링크가 포함된 테이블 예시:
<table>
<thead>
<tr>
<th>상품</th>
<th>설명</th>
<th>가격</th>
<th>구매</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="product1.jpg" alt="상품1" width="50"></td>
<td>고품질 무선 이어폰</td>
<td>₩120,000</td>
<td><a href="#">구매하기</a></td>
</tr>
<tr>
<td><img src="product2.jpg" alt="상품2" width="50"></td>
<td>최신 스마트워치</td>
<td>₩200,000</td>
<td><a href="#">구매하기</a></td>
</tr>
</tbody>
</table>이 테이블은 이미지, 설명, 가격, 구매 링크로 구성되어 있으며, 상품 목록이나 카탈로그 페이지에 유용합니다.
CSS 스타일링:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
td img {
border-radius: 5px; /* 이미지 모서리를 둥글게 */
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}위 코드는 이미지와 링크에 기본적인 스타일을 적용하고, 이미지 모서리를 둥글게 처리하여 더 모던한 디자인을 제공합니다.
CSS 테이블 스타일링은 웹 페이지의 데이터 표현을 더 매력적이고 효율적으로 만들 수 있는 강력한 도구입니다. 테이블은 정보를 구조적으로 표시하는 데 매우 유용하며, CSS를 사용하여 테이블을 맞춤화하고 다양한 기능을 추가하면 사용자 경험을 크게 향상시킬 수 있습니다.
14. 테이블에 툴팁 추가
테이블의 데이터가 더 많은 정보를 제공해야 할 경우, **툴팁(Tooltip)**을 추가하여 특정 셀에 마우스를 올렸을 때 추가 설명을 표시할 수 있습니다. 이를 통해 테이블을 더 깔끔하게 유지하면서도 세부 정보를 제공할 수 있습니다.
툴팁을 이용한 테이블 예시:
<table>
<thead>
<tr>
<th>상품명</th>
<th>가격</th>
<th>상세 정보</th>
</tr>
</thead>
<tbody>
<tr>
<td>노트북</td>
<td>₩1,500,000</td>
<td><span class="tooltip" data-tooltip="최신 13인치 노트북">상세 정보</span></td>
</tr>
<tr>
<td>스마트폰</td>
<td>₩1,000,000</td>
<td><span class="tooltip" data-tooltip="128GB 메모리 포함">상세 정보</span></td>
</tr>
</tbody>
</table>CSS 툴팁 스타일링:
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%; /* 툴팁이 요소 위에 나타나도록 설정 */
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
z-index: 1;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}위 코드는 테이블에서 상세 정보를 표시하는 툴팁을 추가하는 예시입니다. 사용자가 특정 셀에 마우스를 올리면 추가적인 설명이 툴팁으로 나타나도록 설정했습니다. 이 방법은 테이블에 너무 많은 텍스트를 넣지 않고도 추가 정보를 제공할 수 있는 좋은 방법입니다.
15. 테이블에서의 체크박스 및 선택
체크박스나 라디오 버튼을 테이블에 추가하여 선택 기능을 구현할 수 있습니다. 이를 통해 사용자는 특정 행을 선택하거나 여러 항목을 선택한 후 추가 작업을 수행할 수 있습니다.
체크박스가 포함된 테이블 예시:
<form>
<table>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>상품명</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="product"></td>
<td>노트북</td>
<td>₩1,500,000</td>
</tr>
<tr>
<td><input type="checkbox" name="product"></td>
<td>스마트폰</td>
<td>₩1,000,000</td>
</tr>
</tbody>
</table>
</form>체크박스와 선택 모두 기능 추가:
document.getElementById('checkAll').onclick = function() {
var checkboxes = document.getElementsByName('product');
for (var checkbox of checkboxes) {
checkbox.checked = this.checked;
}
};위 코드는 체크박스를 사용하여 사용자가 테이블의 여러 항목을 한 번에 선택할 수 있도록 합니다. "전체 선택" 체크박스를 클릭하면 나머지 항목도 자동으로 선택됩니다. 이 방법은 상품 목록에서 특정 항목을 선택하거나, 대량 작업을 수행할 때 유용합니다.
16. 대화형 테이블 기능 (정렬 및 필터링)
테이블에 정렬 기능이나 필터링 기능을 추가하면 대규모 데이터에서 사용자가 필요한 정보를 빠르게 찾을 수 있는 강력한 도구가 됩니다. 이를 구현하려면 JavaScript와 CSS를 결합하여 테이블을 동적으로 제어할 수 있습니다.
테이블 정렬 기능 예시 (HTML):
<table id="sortableTable">
<thead>
<tr>
<th onclick="sortTable(0)">이름</th>
<th onclick="sortTable(1)">나이</th>
<th onclick="sortTable(2)">점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>28</td>
<td>95</td>
</tr>
<tr>
<td>이영희</td>
<td>35</td>
<td>87</td>
</tr>
<tr>
<td>박수진</td>
<td>22</td>
<td>92</td>
</tr>
</tbody>
</table>JavaScript로 테이블 정렬 기능 구현:
function sortTable(n) {
var table = document.getElementById("sortableTable");
var rows = table.rows;
var switching = true;
var shouldSwitch;
var dir = "asc";
var switchCount = 0;
while (switching) {
switching = false;
var rowsArray = Array.from(rows).slice(1);
for (var i = 0; i < rowsArray.length - 1; i++) {
shouldSwitch = false;
var x = rowsArray[i].getElementsByTagName("td")[n];
var y = rowsArray[i + 1].getElementsByTagName("td")[n];
if (dir === "asc" && x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
} else if (dir === "desc" && x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rowsArray[i].parentNode.insertBefore(rowsArray[i + 1], rowsArray[i]);
switching = true;
switchCount++;
} else if (switchCount === 0 && dir === "asc") {
dir = "desc";
switching = true;
}
}
}위 코드는 테이블의 헤더를 클릭하면 해당 열의 데이터를 오름차순 또는 내림차순으로 정렬할 수 있게 만드는 간단한 JavaScript 구현입니다. 이 기능은 데이터 목록이 클 때 유용하며, 사용자가 원하는 데이터를 쉽게 정렬하여 볼 수 있습니다.
17. 인쇄에 적합한 테이블 스타일링
웹 페이지의 테이블을 인쇄할 때는 화면에 표시된 방식과 다를 수 있으므로, 인쇄 전용 스타일을 사용해 테이블을 적절히 조정하는 것이 좋습니다. 미디어 쿼리를 사용해 인쇄할 때에만 적용되는 스타일을 지정할 수 있습니다.
인쇄에 적합한 테이블 스타일 예시:
@media print {
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
font-size: 12px;
}
th {
background-color: #f2f2f2;
color: black;
}
/* 배경 이미지를 인쇄하지 않도록 설정 */
body {
background: none;
}
/* 링크의 URL 표시 */
a::after {
content: " (" attr(href) ")";
}
}위 코드는 인쇄 전용 스타일을 지정하는 미디어 쿼리 예시입니다. 인쇄 시 테이블 경계선, 셀 간격, 글꼴 크기를 적절히 설정하고, 링크의 경우 URL을 함께 표시하도록 처리합니다. 이 설정은 테이블을 인쇄할 때 읽기 쉽고 깨끗하게 나타나도록 도와줍니다.
CSS를 사용하여 테이블을 스타일링하면 단순한 데이터 표기뿐만 아니라, 데이터 강조, 정렬 및 필터링 기능, 반응형 디자인, 툴팁 추가와 같은 다양한 기능을 구현할 수 있습니다. 이러한 기능들은 테이블을 더욱 시각적으로 매력적이고 사용자 친화적으로 만들어 주며, 데이터를 보다 효율적으로 표현하는 데 도움을 줍니다.
18. 테이블에 다크 모드 적용
- *다크 모드(Dark Mode)**는 웹 디자인에서 점점 더 많이 사용되고 있으며, 사용자들이 어두운 환경에서 눈의 피로를 덜 느끼게 해줍니다. CSS를 사용하여 미디어 쿼리를 통해 자동으로 다크 모드를 감지하고, 테이블의 스타일을 다크 모드에 맞게 변경할 수 있습니다.
다크 모드 테이블 스타일 예시:
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
table {
border: 1px solid #333;
background-color: #1e1e1e;
}
th, td {
border: 1px solid #444;
padding: 10px;
color: #e0e0e0;
}
th {
background-color: #333;
color: #fff;
}
tr:nth-child(even) {
background-color: #2b2b2b;
}
tr:nth-child(odd) {
background-color: #1f1f1f;
}
}위 코드는 미디어 쿼리를 사용해 사용자의 다크 모드 환경을 감지하고, 테이블 배경색, 텍스트 색상, 행 배경색 등을 어두운 색상으로 자동 조정합니다. 줄무늬 효과 역시 어두운 배경에서 명확하게 구분되도록 색상을 변경합니다.
19. 대용량 테이블 최적화
대규모 데이터를 다루는 테이블에서는 성능 최적화가 매우 중요합니다. 특히, 수천 개의 행이 있는 테이블에서 CSS와 JavaScript를 잘 조합하여 렌더링 성능을 높이는 것이 필요합니다. 여기서는 가상 스크롤링(Virtual Scrolling) 또는 **페이징(Pagination)**을 통해 대용량 데이터를 효율적으로 처리하는 방법을 소개합니다.
페이징(Pagination)을 사용한 테이블 예시:
<div id="table-container">
<table id="paginatedTable">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<!-- 여러 데이터 행들 -->
</tbody>
</table>
</div>
<div id="pagination">
<button onclick="prevPage()">이전</button>
<span id="page-num">1</span>
<button onclick="nextPage()">다음</button>
</div>JavaScript로 페이징 구현:
let currentPage = 1;
const rowsPerPage = 10;
function displayTable(page) {
const table = document.getElementById('paginatedTable');
const rows = table.getElementsByTagName('tr');
const start = (page - 1) * rowsPerPage;
const end = page * rowsPerPage;
for (let i = 1; i < rows.length; i++) {
rows[i].style.display = i > start && i <= end ? '' : 'none';
}
}
function prevPage() {
if (currentPage > 1) {
currentPage--;
displayTable(currentPage);
document.getElementById('page-num').innerText = currentPage;
}
}
function nextPage() {
const table = document.getElementById('paginatedTable');
const rows = table.getElementsByTagName('tr');
if (currentPage * rowsPerPage < rows.length - 1) {
currentPage++;
displayTable(currentPage);
document.getElementById('page-num').innerText = currentPage;
}
}
displayTable(currentPage);위 코드는 페이징 기능을 사용하여 테이블을 페이지별로 나누어 한 번에 10개의 행만 표시합니다. 이전과 다음 버튼을 클릭하여 페이지를 이동하며, 테이블의 성능을 최적화할 수 있습니다. 이 방법은 대용량 데이터를 테이블에 표시할 때 렌더링 성능을 크게 향상시킵니다.
20. 테이블 내 차트 및 그래프 추가
테이블에서 데이터를 더욱 시각적으로 표현하고 싶다면 차트나 그래프를 함께 사용할 수 있습니다. 이를 위해 SVG나 **캔버스(Canvas)**를 사용하여 테이블 내에 미니 차트를 삽입하면, 데이터의 패턴과 트렌드를 쉽게 시각화할 수 있습니다.
SVG 차트를 포함한 테이블 예시:
<table>
<thead>
<tr>
<th>이름</th>
<th>점수</th>
<th>성장 그래프</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>95</td>
<td>
<svg width="100" height="50">
<rect x="10" y="20" width="20" height="30" fill="#4CAF50"></rect>
<rect x="40" y="10" width="20" height="40" fill="#FFC107"></rect>
<rect x="70" y="15" width="20" height="35" fill="#F44336"></rect>
</svg>
</td>
</tr>
<tr>
<td>이영희</td>
<td>87</td>
<td>
<svg width="100" height="50">
<rect x="10" y="15" width="20" height="35" fill="#4CAF50"></rect>
<rect x="40" y="25" width="20" height="25" fill="#FFC107"></rect>
<rect x="70" y="5" width="20" height="45" fill="#F44336"></rect>
</svg>
</td>
</tr>
</tbody>
</table>위 코드는 각 데이터 행에 간단한 SVG 막대 차트를 포함하여 점수 변화나 성장 추세를 시각적으로 보여줍니다. 이 방식은 숫자 데이터만으로는 한눈에 파악하기 어려운 트렌드를 시각적으로 표현하는 데 매우 유용합니다.
21. 테이블 디자인 트렌드
최신 웹 디자인에서는 테이블 디자인에도 미니멀리즘과 반응형 웹 트렌드가 적용됩니다. 단순하면서도 효율적인 테이블 디자인을 구현하는 것이 중요하며, 사용자 경험을 개선할 수 있는 기능들이 점점 더 많이 요구됩니다.
최신 테이블 디자인 팁:
- 심플한 경계선: 테이블의 경계선은 너무 굵거나 눈에 띄지 않게 설정하여, 데이터를 부각시킬 수 있도록 디자인합니다.
- 컬러 대비: 중요한 데이터는 배경색이나 글꼴 색상으로 차별화하여 강조합니다. 하지만 너무 많은 색상은 피하고, 최소한의 색상으로도 강한 대비를 줄 수 있도록 합니다.
- 모바일 최적화: 작은 화면에서도 테이블이 제대로 작동하도록 가로 스크롤을 허용하거나, 데이터를 카드 형태로 재구성하여 가독성을 높입니다.
- 애니메이션 추가: 사용자가 특정 행을 선택하거나 필터링할 때, 부드러운 전환 효과나 애니메이션을 사용하여 자연스러운 시각적 피드백을 제공합니다.
CSS를 사용한 테이블 스타일링은 단순한 데이터를 더 직관적이고 사용자 친화적으로 표현하는 데 중요한 역할을 합니다. 테이블의 반응형 디자인, 데이터 강조, 정렬 및 필터링과 같은 고급 기능을 추가하면, 웹 페이지에서 데이터를 훨씬 더 효율적으로 관리하고 시각적으로 개선할 수 있습니다.
최적화된 성능, 접근성, 그리고 최신 디자인 트렌드를 고려하여 테이블을 스타일링함으로써 모든 사용자에게 매력적이고 사용 가능한 데이터 경험을 제공할 수 있습니다.