[html] table 관련 태그

안녕하세요 오늘은 table 태그를 포스팅 하겠습니다.

 

table은 웹상에서 표 형식을 나타낼수 있습니다.

 

table : 해당 테이블 

tr : 테이블에서의 행을 나타냅니다

td : 테이블에서의 열을 나타냅니다.

th : 테이블에서의 열을 나타내지만 head로 제목에 쓰입니다.

 

<table>
	<tr>
    	<th>제목1</th>
        <th>제목2</th>
        <th>제목3</th>
    </tr>
    <tr>
    	<td>내용1</td>
        <td>내용2</td>
        <td>내용3</td>
    </tr>
    <tr>
    	<td>내용4</td>
        <td>내용5</td>
        <td>내용6</td>
    </tr>
</table>

기본적으로 위와 같이 작성해서 사용됩니다.

 

하지만 표에서 엑셀처럼 행 합치기, 열 합치기를 이용하듯이 사용할수 있습니다.

 

보통 td 안에 넣어서 사용됩니다.

 

rowspan 행합치기

colspan 열합치기

 

<table>
	<tr>
    	<th>제목1</th>
        <th>제목2</th>
        <th>제목3</th>
    </tr>
    <tr>
    	<td colspan='2'>내용1 + 내용2</td>
        <td>내용3</td>
    </tr>
    <tr>
    	<td>내용4</td>
        <td>내용5</td>
        <td>내용6</td>
    </tr>
</table>

열을 합치게 되면 td가 두개가 합쳐지므로 2개의 열을 이용합니다.

 

행합치기도 같은 방식으로 생각해주시면 되겠습니다.

 

보통 테이블에는 마진값이 기본으로 잡혀있으므로 cellpadding, cellspacing을 0값으로 잡아주기도 하는데요.

 

<table cellpadding='0' cellspacing='0'>

</table>

맨처음에 테이블을 선언할때 잡아주면 됩니다.

 

테이블에서는 각 행열 마다 스타일을 줄수도 있는데요.

 

기본적으로 border를 이용해서 선을 그어줄 수 있습니다.