HTML 테이블

### html 테이블

  데이터를 행과 열로 정렬할 수 있다. 
    ex)
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
    </table>

  <tr> :각 테이블 행을 정의
  
  <th>: 각 테이블 헤더 정의 ( 굵게 가운데에 표시됨)
  
    테이블 헤더 왼쪽정렬하기 (text-align 사용)
    
    ex)
    th {
      text-align: left;
    }
    
  <td>: 각 테이블 데이터 정의 (규칙적이고 왼쪽정렬로 표시됨)
  
  표에 테두리 추가하기
  
    두 겹 테두리 (border 사용) ex)
      table, th, td {
        border: 1px solid black;
      }
      
    한 겹 테두리 (border-collapse 사용) ex)
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      
  padding 추가하기
    ex) 
    th, td {
      padding: 15px;
    }
    
  테이블에서 셀 사이의 간격 추가하기
    ex)
    table {
      border-spacing: 5px;
    }
    
  여러 열로 확장되는 셀(colspan 사용)
    ex)
    <table style="width:100%">
      <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
      </tr>
      <tr>
        <td>Bill Gates</td>
        <td>55577854</td>
        <td>55577855</td>
      </tr>
    </table>
    
  여러 행으로 확장되는 셀 (rowspan 사용)
    ex)
    <table style="width:100%">
      <tr>
        <th>Name:</th>
        <td>Bill Gates</td>
      </tr>
      <tr>
        <th rowspan="2">Telephone:</th>
        <td>55577854</td>
      </tr>
      <tr>
        <td>55577855</td>
      </tr>
    </table>
    
  캡션 추가하기
    ex)
    <table style="width:100%">
      <caption>Monthly savings</caption>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$50</td>
      </tr>
    </table>
    
  id 지정해서 커스텀 테이블 만들기 
    ex)
    <table id="t01">

    #t01 {
      width: 100%;
      background-color: #f1f1c1;
    }
    =============================
    #t01 tr:nth-child(even) {
      background-color: #eee;
    }
    #t01 tr:nth-child(odd) {
      background-color: #fff;
    }
    #t01 th {
      color: white;
      background-color: black;
    }