一二三四五六

24646 ワード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
td{
  width : 100px;
  height : 40px;
  text-align : center;
  padding : 5px;
}
#tab1 td:nth-child(1n){/*첫번째의 자식을 선택하라*/
  background : #f1dadd;
}
#tab1 td:nth-child(2n){
  background : #a1faf9;
}
#tab1 td:nth-child(2n-1){
  background : lightgreen;
}
#tab1 td:nth-child(odd){  /*even 짝수*/
  background : pink;
}

#tab1 tr:nth-child(1) td{
  background : black;
  color : white;
  font-weight : bold;
  font-size : 2.0em;
}

 #tab2 tr:nth-child(even){
  background : lightgreen;
  
 }
 #tab2 tr:nth-child(even){
  background : lightgray;
  
 }
 #tab2 tr:nth-child(1){
  background : black;
  color : white;
  font-weight : bold;
  font-size : 2.0em;
 }
</style>
</head>
<body>

<table id="tab1" border="1">
  <tr>
    <td>하나</td>
    <td>두나</td>
    <td>세나</td>
    <td>네나</td>
    <td>다섯</td>
    <td>여섯</td>
  </tr>
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<table id="tab2" border="1">
  <tr>
    <td>하나</td>
    <td>두나</td>
    <td>세나</td>
    <td>네나</td>
    <td>다섯</td>
    <td>여섯</td>
  </tr>
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
</body>
</html>