HTML 학습 24 부 : HTML에서 셀 패딩 및 셀 간격 속성 사용

이전 기사에서, 나는 설명했다HTML로 테이블을 만드는 방법에 대해 이전에 기사를 읽은 사람들에게는 HTML에서 테이블 사용을 지원하는 몇 가지 태그와 함께 HTML로 테이블을 만드는 방법을 이미 알고 있습니다.

여러 태그를 사용하는 방법에 대한 설명HTML의 테이블 속성에 대해서도 이전 기사에서 설명했습니다. 이 토론에서는 HTML에서 테이블 사용을 지원하는 다른 속성, 즉 cellpadding 및 cellspacing 속성을 소개합니다. 다음은 셀 패딩 및 셀 간격 속성에 대한 설명입니다.

셀 패딩

cellpadding 속성은 결정하는 데 사용됩니다셀 벽과 셀 내용 사이에있는 셀의 스페이스 바. cellpadding 속성 사용은 HTML4.01에서만 지원되지만 HTML5에서는 지원되지 않습니다. HTML cellpadding 속성의 작성은 다음과 같습니다.

<table cellpadding="pixel">

셀의 간격을 결정할 때 cellpadding 속성의 값은 픽셀입니다. 다음 샘플 코드는 HTML에서 cellpadding을 작성하고 사용합니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cellpadding di HTML</title>
</head>
<body>
<table border="2" cellpadding="5">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>

위의 HTML 코드가 브라우저에서 실행되면 아래와 같이 나타납니다.

세포 간격

cellspacing 속성은 다음을 결정하는 데 사용됩니다.셀 사이의 간격. cellpadding 속성과 마찬가지로 cellspacing 속성도 HTML5에서 지원되지 않습니다. 다음은 cellspacing 속성을 HTML로 작성하는 예입니다.

셀의 공간을 결정할 때 셀 공간 속성의 값은 픽셀입니다. 다음 샘플 코드는 HTML에서 셀 간격을 작성하고 사용합니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cellspacing di HTML</title>
</head>
<body>
<table border="2" cellspacing="5">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>

위의 코드가 브라우저에서 실행되면 아래와 같이 나타납니다.

위의 설명은 셀 패딩과 셀 간격의 차이점과이 두 속성의 사용을 보여 주므로 두 속성의 차이점에 대해 혼동하지 않아도됩니다.

즉, 셀 패딩은 사이의 거리를 조절합니다셀 간격은 한 셀과 다른 셀 사이의 거리를 조절하는 동안 셀 벽 (프레임) 및 셀 내용. 다음은 HTML에서 cellpadding 및 cellspacing 속성을 작성하고 사용하기위한 코드의 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Cellspacing dan Cellpadding di HTML</title>
</head>
<body>
<table border="2" cellspacing="5" cellpadding="5">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td align="center">3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>

위의 코드가 브라우저에서 실행되면 아래와 같이 나타납니다.