HTML

[HTML] Table tr, th, td 배경 색상 지정방법 | bgcolor | background-color


[HTML] Table tr, th, td 배경 색상 지정방법 | bgcolor | background-color




최초 작성일 : 2023-05-12 | 수정일 : 2023-05-12 | 조회수 : 2083


[HTML] Table tr, th, td 배경 색상 지정방법 | bgcolor | background-color

HTML 테이블의 th, tr, td 요소의 배경색을 지정하려면 CSS(Cascading Style Sheets)를 사용해야 합니다. CSS는 웹 페이지의 스타일을 결정하는 언어입니다.

다음은 HTML 테이블의 th, tr, td 요소에 배경색을 지정하는 방법의 예입니다:

  1. Inline CSS: 각 HTML 요소에 직접 스타일을 적용합니다. 이 방법은 유지 관리가 어렵다는 단점이 있습니다.

    html
    <table>
       <tr style="background-color: lightblue;">
          <th style="background-color: lightgreen;">Header</th>
          <td style="background-color: lightpink;">Data</td>
       </tr>
    </table>
  2. Internal CSS: HTML 문서의 <head> 영역에 <style> 태그를 사용해 CSS를 적용합니다.

    html
    <html>
      <head>
        <style>
          th { background-color: lightgreen; }
          tr { background-color: lightblue; }
          td { background-color: lightpink; }
        </style>
      </head>
      <body>
         <table>
            <tr>
              <th>Header</th>
              <td>Data</td>
            </tr>
         </table>
      </body>
    </html>
  3. External CSS: 별도의 CSS 파일에 스타일을 정의하고 HTML 문서에 링크합니다. 이 방법은 여러 HTML 문서에서 동일한 스타일을 재사용할 수 있어 유지 관리가 용이합니다.

    html
    <!-- In your HTML file -->
      <html>
        <head>
          <link rel="stylesheet" type="text/css" href="styles.css">
        </head>
        <body>
          <table>
            <tr>
              <th>Header</th>
              <td>Data</td>
            </tr>
          </table>
         </body>
      </html>
    css
    /* In your CSS file (styles.css) */
    th { background-color: lightgreen; }
    tr { background-color: lightblue; }
    td { background-color: lightpink; }

이와 같이 CSS를 사용하면 웹 페이지의 각 요소에 스타일을 적용할 수 있습니다. 이렇게 하는 것이 HTML 태그의 bgcolor 속성을 사용하는 것보다 권장되는 방법입니다, bgcolor는 HTML 4.01에서는 지원되지만, HTML5에서는 더 이상 지원되지 않습니다.

닉네임:
댓글내용:
🚀 추천글
추천글
카슈미르, 전쟁의 불씨: 국제적 긴장의 중심에서의 갈등 분석
2025-08-02
  • 카슈미르분쟁
  • 인도파키스탄
  • 카르길전쟁




📸 이미지 프롬프트 복사 완료!
이제 어떤 이미지 생성 도구로 이동하시겠어요?
🧠 ImageFX 🧪 Whisk