SW정리: css

2023년 6월 17일 토요일

html table 에 행별 색상 넣기 css 이용

table에 행별 색상 넣기

이게 뭔말인고 하니.... 예를 보겠습니다.

table을 만들게 되면 구별이 안되니 보통 홀수나 짝수별로 같은 배경색을 넣습니다.

이것을 어떻게 하는지에 대한 내용입니다.

html에 CSS 라는것이 있는데 거기에 CSS를 이용해서 설정이 가능합니다.

table을 먼저 만듭니다.

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr class="even">
    <td>Jane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Aane</td>
    <td>Boe</td>
  </tr>
  <tr class="even">
    <td>Cane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Eane</td>
    <td>Foe</td>
  </tr>
</table>

tr이 행별로 나타나게 되는데 이때 짝수행에는 class="even"이라는 것을 만들어 둡니다.

그리고 even의 background css 색상을 설정하는 방식입니다.

tr.even td{
	background-color:#ff8877;;
}

위와 같이 CSS 설정을 합니다.

그러면 tr의 even class만 색상이 변경됩니다.

전체 html 코드 입니다.

<html>
<head>
<title>test table</title>
</head>

<style>
table, td, th {
  border : 1px solid black;
  border-collapse : collapse;
}

tr.even td{
	background-color:#ff8877;;
}
</style>

<body>
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Aane</td>
    <td>Boe</td>
  </tr>
  <tr>
    <td>Cane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Eane</td>
    <td>Foe</td>
  </tr>
</table>

<p></p>

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>print 'hello world!'
  </tr>
  <tr class="even">
    <td>Jane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Aane</td>
    <td>Boe</td>
  </tr>
  <tr class="even">
    <td>Cane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Eane</td>
    <td>Foe</td>
  </tr>
</table>

</body>
</html>

전체 화면입니다.