HTML 태그 3편 (table)

7. Table

표는 table로 정의하고 tr, td(th)로 표현

<h2>기본형1</h2>
<table border="1" width="100">
    <tr>
        <td>콘텐츠</td>
    </tr>
</table>
 
<h2>기본형2</h2>
<table border="1" width="200">
    <tr>
        <td>콘텐츠1</td>
        <td>콘텐츠2</td>
    </tr>
</table>
 
<h2>기본형3</h2>
<table border="1" width="200">
    <tr>
        <td>칸1</td>
        <td>칸2</td>
    </tr>
    <tr>
        <td>칸3</td>
        <td>칸4</td>
    </tr>
</table>

1) 표의 제목 달기

표의 제목은 caption을 사용하고 table과 첫번째 행 사이에 입력한다.

<table border="1" width="200">
<caption>표제목</caption>
    <tr>
        <td>칸1</td>
    </tr>
</table>

2) 제목셀 만들기

제목셀을 표현하는 경우 td대신에 th를 사용.

제목셀은 가운데 정렬, 볼드체로 표현.

<table border="1" width="200">
<caption>표제목</caption>
    <tr>
        <th>제목</th>
        <td>내용</td>
    </tr>
</table>

3) 셀병합하기

셀을 합칠 때는 colspan, rowspan 속성을 셀에 작성.

셀을 나누는 태그나 속성은 따로 존재하지 않음

<table border="1" width="300">
<caption>병합</caption>
    <tr>
        <td rowspan="2">1</td>
        <td colspan="2">2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>        
</table>

■ 셀병합시 조건

- 행을 더할 때

- 열을 더할 때

- 행과 열을 더할 때

** 기준 셀을 선택(최상위 셀을 선택)

** 기준셀에 행과, 열에 해당하는 속성을 작성

행을 더할 때는 rowspan

열을 더할 때는 colspan

<h1>셀병합 연습</h1>
<table border="1" width="600">
<caption>표</caption>
    <tr>
        <th rowspan="2">통화명</th>
        <th rowspan="2">매매기준율</th>
        <th colspan="2">현찰</th>
    </tr>
    <tr>
        <th>사실때</th>
        <th>파실때</th>
    </tr>
    <tr>
        <td>미국 USD</td>
        <td>1,117.50</td>
        <td>1,137.05</td>
        <td>1,097.95</td>
    </tr>
</table>

(참고)

표의 디자인은 스타일로 한다. 

스타일 전에 html 속성을 이용하여 표의 아웃라인을 표현(border)

border = 테두리

width = 너비

table 속성에 작성 가능

================================

사실, 표 태그는 이제 거의 쓰지 않게 됐어요.

div라는 태그와 ul, li로 대체가 되고 있는데,

모바일을 지원하기 위해서라고 합니다. 

그래도 어떤 내용인지는 알고 있어야겠죠?

2018/07/06 - [IT/HTML] - HTML 태그 2편(a, ul, li)