상담문의 010-7482-0702

Home > 고객센터 > 자료실

자료실

자료실

css 테이블 만들기 (배경색만들기)

  • 하나솔루션
  • 2017-12-11 12:05:11
  • hit1540

배경색을 만드는 속성

배경색은 background-color 속성으로 만듭니다.

table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다.

기본 모양

다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table {
        width: 100%;
        border-top: 1px solid #444444;
        border-collapse: collapse;
      }
      th, td {
        border-bottom: 1px solid #444444;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Lorem</th><th>Ipsum</th><th>Dolor</th><th>Sit</th><th>Amet</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
        </tr>
        <tr>
          <td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
        </tr>
        <tr>
          <td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
        </tr>
        <tr>
          <td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
        </tr>
        <tr>
          <td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
        </tr>
        <tr>
          <td>Lorem</td><td>Ipsum</td><td>Dolor</td><td>Sit</td><td>Amet</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

 

표 전체에 배경색 추가하기

표 전체에 하나의 배경색을 넣을 때는 table에 배경색을 추가하는 게 편합니다.

<style>
  table {
    width: 100%;
    border-top: 1px solid #444444;
    border-collapse: collapse;
  }
  th, td {
    border-bottom: 1px solid #444444;
    padding: 10px;
    text-align: center;
  }
  table {
    background-color: #bbdefb;
  }
</style>

 

 

제목이 있는 행과 내용이 있는 행에 다른 색 추가하기

th 요소와 td 요소에 서로 다른 배경색을 추가합니다. (thead 요소와 tbody 요소에 서로 다른 배경색을 추가해도 됩니다.)

<style>
  table {
    width: 100%;
    border-top: 1px solid #444444;
    border-collapse: collapse;
  }
  th, td {
    border-bottom: 1px solid #444444;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #bbdefb;
  }
  td {
    background-color: #e3f2fd;
  }
</style>

 

행의 배경색을 번갈아 넣기

홀수번째 행과 짝수번째 행의 배경색을 다르게 하고 싶다면 tr 요소에 nth-child 선택자를 이용하여 배경색을 추가합니다.

<style>
  table {
    width: 100%;
    border-top: 1px solid #444444;
    border-collapse: collapse;
  }
  th, td {
    border-bottom: 1px solid #444444;
    padding: 10px;
    text-align: center;
  }
  thead tr {
    background-color: #0d47a1;
    color: #ffffff;
  }
  tbody tr:nth-child(2n) {
    background-color: #bbdefb;
  }
  tbody tr:nth-child(2n+1) {
    background-color: #e3f2fd;
  }
</style>

 

열의 배경색을 번갈아 넣기

홀수번째 열과 짝수번째 열의 배경색을 다르게 하고 싶다면 th 또는 td 요소에 nth-child 선택자를 이용하여 배경색을 추가합니다.

<style>
  table {
    width: 100%;
    border-top: 1px solid #444444;
    border-collapse: collapse;
  }
  th, td {
    border-bottom: 1px solid #444444;
    padding: 10px;
    text-align: center;
  }
  th:nth-child(2n), td:nth-child(2n) {
    background-color: #bbdefb;
  }
  th:nth-child(2n+1), td:nth-child(2n+1) {
    background-color: #e3f2fd;
  }
</style>

 

게시글 공유 URL복사
댓글[0]

열기 닫기

빠른상담 신청현황

  • s**님이 문의하셨습니다.
    상담신청
  • e**님이 문의하셨습니다.
    상담신청
  • 대**님이 문의하셨습니다.
    상담신청
  • 개**님이 문의하셨습니다.
    상담신청
  • 쇼**님이 문의하셨습니다.
    상담신청
  • K**님이 문의하셨습니다.
    상담신청
  • 조**님이 문의하셨습니다.
    상담신청
  • (**님이 문의하셨습니다.
    상담신청
  • 주**님이 문의하셨습니다.
    상담신청
  • 대**님이 문의하셨습니다.
    상담신청
  • T**님이 문의하셨습니다.
    상담신청
  • 로**님이 문의하셨습니다.
    상담신청
  • d**님이 문의하셨습니다.
    상담신청
  • 정**님이 문의하셨습니다.
    상담신청
  • 아**님이 문의하셨습니다.
    상담신청
  • 행**님이 문의하셨습니다.
    상담신청
  • (**님이 문의하셨습니다.
    상담신청
  • 신**님이 문의하셨습니다.
    상담신청
  • 성**님이 문의하셨습니다.
    상담신청
  • 주**님이 문의하셨습니다.
    상담신청

무통장 계좌번호

하나은행 : 661-910388-38207
예 금 주 : 하나솔루션(정지혜)

네임서버

1차 ns1.webit.kr 221.139.47.17
2차 ns2.webit.kr 121.125.73.38

서버 호스팅 주소

서울 서초구 서초동 1710-1 SK 브로드밴드 IDC

커뮤니티

  • 042-362-0702

  • 업무시간 : 월~금 오전9시 ~ 오후 6시

  • 점심시간 : 오후 12시 ~ 오후 1시

  • 토,일,공휴일, 국경일 : 휴무

상단으로 바로가기