6. CSS_테이블에 관련된 속성 알아보기

테이블 속성 예제1

<style type="text/css">
    /* 1. 테이블 전체 스타일 */
    #table1 {
        border : 1px solid black;  
        width  : 400px;           
        height : 200px;           
    }

    /* 2. 모든 셀(헤더 th, 데이터 td)에 공통 테두리 적용 */
    #table1 th, #table1 td {
        border : 1px solid black;  
        border-radius : 10px;     /
    }

    /* 3. 헤더 셀(th) 전용 스타일 */
    #table1 th {
        background : #FEE1E8;  
        color : #232323;       
    }

    /* 4. 일반 셀(td) 전용 스타일 */
    #table1 td {
        background : #F6EAC2; 
        color : #232323;      
        text-align : center;   
    }

    /* 5. 각 행(tr)의 '첫 번째 열(td)'만 스타일 */
    #table1 tr > td:first-child {
        background: #cba1a1; 
    }

    /* 6. 테이블의 '마지막 행(tr)의 모든 td'만 스타일 */
    #table1 tr:last-child > td {
        background : #93CCEA; 
        color : blue;        
    }
</style>

 

✅ 정리 포인트

1. 큰 테두리 vs 셀 테두리
   • #table1 { border: … } → 테이블 자체 외곽선
   • #table1 th, #table1 td { border: … } → 내부 칸마다 선
2. border-radius
   • 셀의 모서리를 둥글게 만들 수 있음. (10px)
3. 의사 클래스 선택자
   • td:first-child → 각 행에서 첫 번째 칸만 선택
   • tr:last-child > td → 마지막 행의 모든 칸 선택

---

테이블 속성 예제2

<style type="text/css">
  body, th, td { 
    font:0.9em "맑은 고딕", 돋움, sans-serif;   /* 문서 전체, th, td 글꼴 */
  }				

  #table1 {
    border-collapse:collapse;   /* 테이블(table1)에 적용 */
    margin:20px auto;           /* table1 위치 가운데 정렬 */
  }

  #table1 caption, #table1 th, #table1 td {
    border:1px solid #000000;   /* table1 안의 caption, th, td */
    padding:5px 10px;           /* 셀 안쪽 여백 */
  }

  #table1 caption {
    color:#FFFFFF;              /* table1의 caption 글자색 */
    background-color:#666666;   /* table1의 caption 배경색 */
  }

  #table1 th {
    background-color:#c5c5c5;   /* table1의 제목 셀(th) */
  }

  #table1 td:first-child {
    background-color:#999999;   /* table1 각 행의 첫 번째 셀(td) */
  }

  #table1 tr:last-child td {
    background-color:#000000;   /* table1 마지막 행 전체 셀(td) */
    color:#ffffff;
    text-align:center;
  }
</style>

 

 

• border-collapse: collapse; → 셀 테두리 겹침 제거
• margin:20px auto; → 위아래 여백 20px, 좌우 자동 → 가운데 정렬
• 테이 제목(caption), 제목(th), 일반 셀(td)에 모두 검은색 1px 테두리
•  

 

 

📌 caption 이란?

• <table> 바로 안쪽에 들어가는 표의 제목 태그
• 보통 테이블 위에 한 줄로 제목이 표시됨
• CSS에서 #table1 caption이라고 쓰면, id="table1"을 가진 테이블의 제목만 스타일을 지정하는 것