CSS로 테이블 스타일을 지정하기 위해 테두리 설정, 축소, 너비 및 높이 설정이 가능합니다. 패딩, 텍스트 정렬 등을 설정할 수도 있습니다. 몇 가지 예를 살펴보겠습니다 −
예시
CSS에서 표에 테두리를 추가하려면 border 속성을 사용하십시오. 이제 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px dashed orange;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html> 출력
예시
표 테두리를 축소하려면 CSS에서 border-collapse 속성을 사용하십시오. 테이블 테두리를 축소하는 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
background-color: black;
color: white;
}
th, td {
border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html> 출력
예시
테두리와 내용 사이의 간격을 설정하려면 아래 예제와 같이 padding 속성을 사용하십시오 -
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid black;
background-color: blue;
color: white;
}
th, td {
border: 1px solid black;
padding: 20px;
text-align: center;
}
table#demo {
table-layout: fixed;
width: 100%;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table id="demo">
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
</table>
</body>
</html> 출력
