HTML에서 테이블 너비를 설정하는 방법 – style 속성과 CSS width 활용법

HTML에서 테이블 너비를 설정하려면 style 속성을 사용합니다. style 속성은 특정 요소에 인라인(inline) 스타일을 직접 지정하는 역할을 하며, HTML <table> 태그와 함께 CSS의 width 속성을 조합하여 테이블의 가로 크기를 조절할 수 있습니다.

특히 주의할 점은, HTML5부터는 <table> 태그의 기존 width 속성을 더 이상 지원하지 않는다는 것입니다. 따라서 반드시 style 속성과 함께 CSS width 속성을 사용해야 합니다.

style 속성 사용 시 유의사항

style 속성으로 지정한 인라인 스타일은 전역으로 설정된 다른 스타일보다 우선 적용됩니다. 즉, HTML 문서 내의 <style> 태그나 외부 스타일시트(CSS 파일)에서 정의한 스타일이 있더라도, style 속성값이 그것을 덮어쓰게(override) 됩니다.

HTML에서 테이블 너비를 설정하는 방법 – style 속성과 CSS width 활용법

예제 코드

아래 예제 코드를 실행하면 HTML에서 테이블 너비를 설정하는 방법을 직접 확인할 수 있습니다. 이 예제에서는 <style> 태그와 style 속성을 함께 사용하여 테이블의 테두리(border)까지 함께 스타일링했습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         th, td {
            border: 1px solid black;
         }
      </style>
   </head>

   <body>
      <h1>Programming Languages</h1>
      <table style="width:100px; border: 1px solid black">
         <tr>
            <th>Language</th>
            <th>Release Year</th>
         </tr>
         <tr>
            <td>Java</td>
            <td>1995</td>
         </tr>
         <tr>
            <td>Pascal</td>
            <td>1970</td>
         </tr>
      </table>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 너비가 100px로 고정된 테이블이 검정색 1px 테두리와 함께 화면에 표시됩니다.