셀 패딩(Cell Padding)은 셀의 테두리와 그 안에 들어 있는 내용 사이의 여백을 의미합니다. HTML에서 셀 패딩을 설정하려면 style 속성을 사용하며, 이 속성은 요소에 인라인(inline) 스타일을 지정하는 역할을 합니다. HTML <table> 태그와 함께 CSS의 padding 속성을 조합하여 사용하면 됩니다.
HTML5에서의 변경 사항
과거에는 <table> 태그의 cellpadding 속성으로 셀 여백을 조절했지만, HTML5에서는 이 속성을 더 이상 지원하지 않습니다. 따라서 현재는 style 속성에 CSS padding 속성을 적용하는 방식이 표준적인 방법입니다.
주의할 점: 스타일 우선순위
style 속성은 인라인 스타일이기 때문에 우선순위가 가장 높다는 점을 기억해야 합니다. 즉, HTML 문서 내의 <style> 태그나 외부 스타일시트(CSS 파일)에서 전역적으로 설정한 스타일이 있더라도, style 속성으로 지정한 값이 항상 그것을 덮어쓰게(override) 됩니다.
예제 코드
아래 코드를 실행하면 HTML에서 셀 패딩을 설정하는 방법을 직접 확인할 수 있습니다. 이 예제에서는 <style> 태그로 표의 테두리를 정의하고, style 속성으로 각 셀에 패딩을 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Programming Language</h1>
<table>
<tr>
<th style="padding:10px">Language</th>
</tr>
<tr>
<td style="padding:10px">Ruby</td>
</tr>
</table>
</body>
</html>코드 설명
- 테두리 설정:
<style>태그 안에서table, th, td선택자에border: 1px solid black;을 적용해 표 전체와 각 셀에 검은색 테두리를 만들었습니다. - 패딩 적용:
<th>와<td>요소에style="padding:10px"를 지정하여 셀 안쪽에 10픽셀의 여백을 부여했습니다. 덕분에 텍스트가 테두리에 딱 붙지 않고 여유 있게 배치됩니다.
실행 결과
위 코드를 브라우저에서 실행하면 'Language' 헤더 셀과 'Ruby' 데이터 셀이 모두 상하좌우 10px의 패딩을 가진 깔끔한 표로 출력됩니다. 패딩 값을 조정하면 셀 내부 여백의 크기를 자유롭게 변경할 수 있습니다.