[Bootstrap] table정리

기존 html에서 기본적으로 쓰는

<table>

<thead>

<tr>

<th>

<th>

<tbody>

<tr>

<td>

<td>

<td>

등의 태그에 클래스만 추가하는 방식이다. 아니 class말고 scope라는 속성이 있다.

코드를 보자면

<table class="table"> 

<!--table 에 
table-dark 또는 table-striped 로 색상 추가가능, table-bordered , table-hover도 있다.
사이즈는 table-sm 으로 줄여도 된다.-->

  <caption>테이블 제목</caption>

  <thead class="thead-light">

<!--.thead-light 또는 .thead-dark-->

    <tr>
      <th scope="col">#</th>
      <th scope="col">이름</th>
      <th scope="col">성</th>
      <th scope="col">아이디</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>twitter</td>
    </tr>
  </tbody>
</table>

table에 class table을 추가해주고 thead에 class thead-light빼고는 

나머지는 row - col 관계이다. 

한 가지 주의할 점은 col,row는 class가 아니라 "scope"에 적용시켜 주어야 한다는 것.

아래는 배경색깔 조절이다. 소스를 부트스트랩에서 가져왔다.

1. table-dark가 아닐때

<!-- 행(row)에 적용 -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- 셀에 적용 (`td` 또는 `th`) -->
<tr>
  <td class="table-active">...</td>
  
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

2. table-dark일때는 위 방법이 소용없고, bg- 를 써줘야함.

<!-- 행에 적용 -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- 셀에 적용 (`td` 또는 `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>