Table 속성

📍 표 관련 속성

🧷 코드 예시

 #movies { /* table 전체를 꾸밈 */ 
        border-collapse: collapse; /*속성에 사용하여 중복된 테두리를 하나로 합친다.*/
        width: 100%;
      }
      #movies th,
      #movies td {  /* table 제목과 일반 열 꾸밈 */ 
        border: 1px solid rgb(114, 114, 114);
        padding: 8px;
      }
      #movies th { /* table 제목 꾸미기 */ 
        padding-top: 12px;
        padding-bottom: 12px;
        background-color: rgb(115, 169, 212);
        text-align: left;
        color: white;
      }
      #movies tr:nth-child(odd) { /* table 일반열 */ 
        background-color: rgb(238, 213, 255);
      }
      #movies tr:hover { /* table 일반열에 마우스를 올렸을 때 변하는 속성 */ 
        background-color: rgb(179, 214, 220);
      }

• border-collapse : 테이블의 테두리를 한 줄로 나타낼지를 설정함.
  -default값 : border(테두리) 가 2줄씩 나타남
  -<th>,<td> 태그가 각각 자신만의 테두리를 가지고 있기 때문이다.
• :nth-child( ) : 형제의 목록에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정한다. (index는 1부터 시작)
  -odd : 형제 요소의 홀수번째인 요소를 나타냄
  -even : 형제 요소의 짝수번째인 요소를 나타냄
  📂 MDN
• :hover
  사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택된다.
  - 다른 의사 클래스에 덮어씌워진다.
  -순서 배치 (덮어씌워지지 않게 하려면 이 순서를 따르자.)
  LVHA-순서(:link — :visited— :hover — :active)
  

📂 CSS Table MDN