08_표 콘텐츠

이번엔 표 콘텐츠에 대해서 공부하였다.

 

<table>, <tr>, <th>, <td>
데이터 표(<table>)의 행(줄 / <tr>)과 열(칸, 셀(Cell) / <th>, <td>)을 생성.
(Table Row, Table Header, Table Data)
-블럭요소와 비슷함.

 

table태그를 사용하여 만들면 되고 표의 헤더,데이터에 나누어서 tr,th,td등 데이터로 나누어서 사용하면 된다.

 

<table>   <!-- 표 영역 표시-->
            <tr>
                <th colspan = "3" id="th-data">데이터</th> <!-- 열 병합 -->
            </tr>  

            <tr>
                <th> </th>
                <th abbr = "type" scoper ="col" headers="th-data">타입</th>   <!-- th-data 에 종속되어 있다-->
                <th abbr = "value" scoper ="col" headers="th-data">값</th>
            </tr>
            <tr>
                <th>1</th>
                <td>알파벳</td>
                <td>A</td>
            </tr>
            <tr>
                <th>1</th>
                <td>숫자</td>
                <td>7</td>
            </tr>

아주간단하게 만들어본 표이다.

 

table{
    border-collapse: collapse;

}

td{
    border : 1px solid red;
    padding : 10px;
}
th{
    border : 1px solid red;
    padding : 10px;
    background: lightblue;
}

위 css를 적용하여서 색을 적용해보았따.

 

 

table에는 여러 옵션들이 있어서 적용해볼수 있는데,

<table>
            <caption>데이터 타입과 값</caption>
            <tr>
                <td rowspan = "2" id = "th-data">데이터</td>
                <th headers = "th-data" id = "th-type">타입</td>
                <td headers = "th-type">알파벳</td>
                <td headers = "th-type">숫자</td>
            </tr>
            <tr>
                
                <th headers = "th-data" id = "th-value">값</td>
                <td headers = "th-value">A</td>
                <td headers = "th-value">7</td>
            </tr>
        </table>

다음과 같이 header를 정해서 연결할수도 있고, rowspan이나 colspan을 통해서 표를 합치는 것도 가능하다. 맨 첫번째 예제에선 colspan을 사용하였었다.

 

위처럼 caption을 사용하면 제목을 넣을 수 있다.

 

<table>   <!-- 표 영역 표시-->
            <caption>데이터 타입과 값</caption>
            <colgroup>
                <col style ="background-color: gray;">
                <col style ="background-color: tomato;" span = "2">  <!-- span << 두번째 넘어가서까지 style을 유지-->
                
            </colgroup>
            <tr>
                <th colspan = "3" id="th-data">데이터</th> <!-- 열 병합 -->
            </tr>  

            <tr>
                <th> </th>
                <th abbr = "type" scoper ="col" headers="th-data">타입</th>   <!-- th-data 에 종속되어 있다-->
                <th abbr = "value" scoper ="col" headers="th-data">값</th>
            </tr>
            <tr>
                <th>1</th>
                <td>알파벳</td>
                <td>A</td>
            </tr>
            <tr>
                <th>1</th>
                <td>숫자</td>
                <td>7</td>
            </tr>
        </table>

위도 간단하게 css를 입혀본 예제인데, 특징은 scoper와 abber값을 넣어서 각 표의 정보를 추가했단 것이다. 눈에 가시적으로 보이지는 않지만, 분류를 했다고 생각하면 될 것 같다.

 

<th>
‘머리글 칸’을 지정

속성 의미 값 기본값
abbr 열에 대한 간단한 설명
headers 관련된 하나 이상의 다른 머리글 칸 id 속성 값
colspan 확장하려는(병합) 열의 수 1
rowspan 확장하려는(병합) 행의 수 1
scope 자신이 누구의 ‘머리글 칸’인지 명시

 

<td>
‘일반 칸’을 지정

속성 의미 값 기본값
headers 관련된 하나 이상의 다른 머리글 칸 id 속성 값
colspan 확장하려는(병합) 열의 수 1
rowspan 확장하려는(병합) 행의 수 1

 

<caption>
표의 제목을 설정.

열리는 TABLE 태그 바로 다음에 작성해야 함.
<table> 당 하나의 <caption>만 사용 가능.


<colgroup>, <col />
표의 열들을 공통적으로 정의하는 컬럼(<col>)과 그의 집합(<colgroup>).
(Column, Column Group)

속성 의미 값 기본값
span 연속되는 열 수 숫자(Number) 1

 

<table>
        <caption>Fruits</caption>
        <colgroup>
          <col span="2" style="background-color: yellowgreen;">
          <col style="background-color: tomato;">
        </colgroup>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>F123A</td>
            <td>Apple</td>
            <td>$22</td>
          </tr>
          <tr>
            <td>F098B</td>
            <td>Banana</td>
            <td>$19</td>
          </tr>
        </tbody>
      </table>

표는  colgroup으로 묶어서 thead,tbody,tfoot으로 나누어서 분류할수도 있다.