표 만들기

표는 행(가로줄)과 열(세로줄), 그리고 셀로 이루어진다.

셀은 표의 내용이 들어가는 한 칸을 의미한다.

1. 표를 만드는 table, caption 태그 & 행을 만드는 tr 태그와 셀을 만드는 td, th 태그

table 태그는 표의 시작과 끝을 알려준다. 

caption 태그는 표에 제목을 붙여준다. 

(table 태그만으로는 표가 만들어지지 않는다.)

tr 태그는 표의 행을 만든다.

td 태그는 행 안의 셀을 만든다.

따라서 table 태그 안에 tr, td 태그가 모두 있어야 하나의 셀을 만든다.

<table>
	<tr>    <!--1행-->
    	<td>1행 1열</td>
        <td>1행 2열</td>
    </tr>
    <tr>    <!--2행-->
    	<td>2행 1열</td>
        <td>2행 2열</td>
    </tr>
</table>

위의 코드를 표로 그리면 아래와 같다.

1행 1열	1행 2열
2행 1열	2행 2열

 

th 태그는 표의 제목 행에 셀을 만들 때에 td 태그 대신 사용한다.

th 태그는 내용을 진하게 표시하고 셀 안에서 중앙에 배열된다.

 

 

<h2>상품 구성</h2>
    <table>
        <caption>선물용과 가정용 상품 구성</caption>
        <tr>   <!--1행-->
            <th>용도</th>
            <th>중량</th>
            <th>개수</th>
            <th>가격</th>
        </tr>
        <tr>   <!--2행-->
            <td>선물용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>35,000원</td>
        </tr>
        <tr>   <!--3행-->
            <td>선물용</td>
            <td>5kg</td>
            <td>18~26과</td>
            <td>52,000원</td>
        </tr>
        <tr>   <!--4행-->
            <td>가정용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>30,000원</td>
        </tr>        
        <tr>   <!--5행-->
            <td>가정용</td>
            <td>5kg</td>
            <td>18~26과</td>
            <td>47,000원</td>
        </tr>
    </table>

표 만들기 태그

 

 

2. 행을 합지는 rowspan 속성, 열을 합치는 colspan 속성

표를 만들다 보면 셀을 합쳐야 하는 경우가 있다. 

이 때 td 태그나 th 태그에서 rowspan, colspan 속성을 이용하면 된다.

rowspan은 행을 합치기 때문에 위, 아래가 합쳐지고

colspan은 열을 합치기 때문에 좌, 우가 합쳐진다.

<h2>상품 구성</h2>
    <table>
        <caption>선물용과 가정용 상품 구성</caption>
            <tr>
                <th>용도</th>
                <th>중량</th>
                <th>개수</th>
                <th>가격</th>
            </tr>
            <tr>
                <td rowspan="2">선물용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>35,000원</td>
            </tr>
            <tr>
            <!--<td>선물용</td>-->
                <td>5kg</td>
                <td>18~26과</td>
                <td>52,000원</td>
            </tr>
            <tr>
                <td rowspan="2">가정용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>30,000원</td>
            </tr>        
            <tr>
            <!--<td>가정용</td>-->
                <td>5kg</td>
                <td>18~26과</td>
                <td>47,000원</td>
            </tr>
    </table>

rowspan 태그 사용

선물용을 2행 합치고 가정용을 2행 합치기 때문에

두 부분 모두 속성을 rowspan="2" 라고 썼다.

이 때 주의할 점은 합치고 싶은 셀이 코드에서 최초로 입력한 부분에만 속성을 적용한다.

그리고 합치고 싶은 셀이 중복해서 나오는 부분은 지운다. (또는 주석처리)

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.