HTML 테이블을 스타일링하는 6가지 예제를 CSS와 HTML로 구성하고 상세히 설명하겠습니다.
예제 1: 테이블 테두리 스타일 변경
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
</body>
</html>
이 예제에서는 테이블의 테두리 스타일을 변경하였습니다. border-collapse 속성을 사용하여 테두리를 합친 후, border 속성을 사용하여 테이블 셀의 테두리를 스타일링하였습니다.
예제 2: 짝수 행 배경색 변경
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
이 예제에서는 짝수 행의 배경색을 변경하였습니다. tr:nth-child(even) 선택자를 사용하여 짝수 행을 선택하고 배경색을 변경합니다.
예제 3: 테이블 가운데 정렬
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 0 auto;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
</body>
</html>
이 예제에서는 테이블을 수평으로 가운데 정렬하였습니다. margin: 0 auto; 속성을 사용하여 가운데 정렬합니다.
예제 4: 테이블 헤더 배경색 변경
<!DOCTYPE html>
<html>
<head>
<style>
th {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
</body>
</html>
이 예제에서는 테이블 헤더의 배경색을 변경하였습니다. th 요소에 배경색과 글자색을 설정하여 헤더를 스타일링하였습니다.
예제 5: 테이블 셀 내용 정렬
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
</body>
</html>
이 예제에서는 테이블 셀 내용을 가운데 정렬하였습니다. text-align: center; 속성을 사용하여 텍스트를 가운데 정렬합니다.
예제 6: 테이블 셀 간격 설정
<!DOCTYPE html>
<html>
<head>
<style>
td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
</body>
</html>
이 예제에서는 테이블 셀 간격을 설정하였습니다. padding 속성을 사용하여 셀 내부 여백을 지정하여 간격을 조절합니다.
'CSS' 카테고리의 다른 글
| 카드 디자인: 카드 레이아웃 스타일링. (0) | 2023.12.23 |
|---|---|
| 미리보기 이미지 갤러리: 이미지 갤러리 스타일링. (0) | 2023.12.23 |
| 텍스트 그라데이션: 텍스트에 그라데이션 효과. (0) | 2023.12.23 |
| 3D 효과: 요소에 3D 효과 적용. (0) | 2023.12.23 |
| 반복 배경 이미지: 배경 이미지 반복 설정. (0) | 2023.12.23 |