[HTML] 표를 나타내는 태그(table)

1.table : 표 형식의 레이아웃을 만드는 태그

    과거 여러 사이트의 레이아웃을 만드는 데에 많이 사용되었으나, 유지보수의 어려움(정보 변경 시 번거로움)으로 현재에는 잘 사용하지 않음. 회원가입과 로그인 테이블을 만드는 데에 주로 쓰임.

    1) tr : 행을 나타내는 태그

    2) td :각 행에 이어진 열을 나타내는 태그

     (tr 안의 td 태그 / 행 안의 열 태그)

    <table border="1">
		<tr>
			<td>1행 1열</td>
			<td>1행 2열</td>
			<td>1행 3열</td>
			<td>1행 4열</td>
		</tr>
		<tr>
			<td>2행 1열</td>
			<td>2행 2열</td>
			<td>2행 3열</td>
			<td>2행 4열</td>
		</tr>		
		<tr>
			<td>3행 1열</td>
			<td>3행 2열</td>
			<td>3행 3열</td>
			<td>3행 4열</td>
		</tr>		
		<tr>
			<td>4행 1열</td>
			<td>4행 2열</td>
			<td>4행 3열</td>
			<td>4행 4열</td>
		</tr>
    </table>

table 태그 화면 표시

    3) 표 태그의 속성

        (1) colspan(colum열 span확장) : 열 병합

        < td colspan="병합할 열의 개수">

    <table border="1">
		<tr>
			<td colspan="4">1행 1열</td>
		</tr>
		<tr>
			<td>2행 1열</td>
			<td>2행 2열</td>
			<td>2행 3열</td>
			<td>2행 4열</td>
		</tr>		
		<tr>
			<td>3행 1열</td>
			<td>3행 2열</td>
			<td>3행 3열</td>
			<td>3행 4열</td>
		</tr>		
		<tr>
			<td>4행 1열</td>
			<td>4행 2열</td>
			<td>4행 3열</td>
			<td>4행 4열</td>
		</tr>
    </table>

colspan 결과 화면 표시

        (2) rowspan(row행 span확장) : 행 병합

        < tr rowspan="병합할 행의 개수">

    <table border="1">
		<tr>
		    <td>1행 1열</td>
		    <td rowspan="3">1행 2열</td>
		    <td>1행 3열</td>
			<td>1행 4열</td>
		</tr>
		<tr>
		    <td>2행 1열</td>
		    <td>2행 3열</td>
			<td>2행 4열</td>
		</tr>		
		<tr>
			<td>3행 1열</td>
			<td>3행 3열</td>
			<td>3행 4열</td>
		</tr>		
		<tr>
			<td>4행 1열</td>
			<td>4행 2열</td>
			<td>4행 3열</td>
			<td>4행 4열</td>
		</tr>
    </table>

rowspan 결과 화면표시