HTML에서 테이블 테두리를 만들 때 과거에는 border 속성을 사용했습니다. 그러나 HTML5가 도입되면서 이 속성은 더 이상 권장되지 않으며(사용 중단), 현재는 CSS의 border 속성을 사용하는 것이 표준적인 방법입니다.
CSS로 테두리를 적용할 때는 <table> 요소뿐만 아니라 셀을 구성하는 <th>(제목 셀)와 <td>(데이터 셀)에도 각각 테두리를 지정해야 완전한 표 형태가 완성됩니다.
예제
아래 코드를 실행하면 HTML 테이블에 테두리가 적용된 결과를 확인할 수 있습니다. 여기서는 <style> 태그를 활용했습니다:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Employee Details</h1>
<table>
<tr>
<th>Name</th>
<td>Amit</td>
<td>Sachin</td>
</tr>
<tr>
<th>Age</th>
<td>27</td>
<td>34</td>
</tr>
</table>
</body>
</html>
실행 결과
참고: 테두리 겹침(border-collapse) 활용하기
위 예제처럼 각 셀에 개별적으로 테두리를 적용하면 셀 사이에 간격이 생겨 이중 선처럼 보일 수 있습니다. 이때 CSS에 border-collapse: collapse;를 추가하면 인접한 셀들의 테두리가 하나로 합쳐져 훨씬 깔끔하고 전문적인 표를 만들 수 있습니다.