[HTML] 테이블 (Table)

테이블 (Table)

표를 구성하는 태그

• <thead>나 <tfoot>은 없어도 되지만, <tbody>는 반드시 필요하다.

태그	설명
<table>	표 영역 지정
<thead>	상단 제목 지정
<tbody>	본문 영역
<tfoot>	하단 영역
<tr>	행이나 열을 한 줄 형성
<th>	열의 제목
<td>	열의 내용

표를 구성하는 태그의 속성

속성	적용 가능한 태그	설명	값
border	<table>	테두리의 두께	1부터 정수 형태로 정의
width	<table> <th> <td>	- 넓이 설정 - <table>에 설정할 경우, 표의 전체 넓이 - <th>, <td>에 설정할 경우, 한 칸의 넓이를 의미하며 각 넓이의 합은 <table>에 정의된 넓이보다 클 수 없음	- px를 의미하는 정수 값 - % 단위의 값
height	<table> <th> <td>	- 높이 설정 - <table>에 설정할 경우, 표의 전체 높이 - <th>, <td>에 설정할 경우, 한 칸의 높이를 의미하며 각 열에 대한 높이의 합은 <table>에 정의된 넓이나 높이보다 클 수 없음	px를 의미하는 정수 값
align	<table> <th> <td>	- 높이 설정 - <table>에 설정할 경우, 표의 전체 높이 - <th>, <td>에 설정할 경우, 한 칸의 높이를 의미하며 각 열에 대한 높이의 합은 <table>에 정의된 넓이나 높이보다 클 수 없음	left, center, right
valign	<th> <td>	한 칸 안에서 텍스트의 세로 정렬을 설정	top, middle, bottom
rowspan	<th> <td>	행 병합	정수
colspan	<th> <td>	열 병합	정수
cellpadding	<table>	각 칸 안에서 내용과 경계 사이의 여백 설정	px를 의미하는 정수 값
cellspacing	<table>	각 칸 안에서 내용과 경계 사이의 여백 설정	px를 의미하는 정수 값

행, 열 병합

행을 병합하기 위한 rowspan

• 현재 열이 아래로 몇 행을 병합할지 결정하는 속성
• 첫 번째 행의 첫 번째 열에서 rowspan="3"을 지정했다면, 그 열은 3줄을 병합하게 되므로 2, 3번째 행은 첫 번째 열을 정의해서는 안 된다.

<table>
	<tr>
    	<th>NAME</th>
        <td>김철수</td>
    </tr>
    <tr>
    	<th rowspan="2">PHONE</th>
        <td>000-0000</td>
    </tr>
    <tr>
        <td>000-0000</td>
    </tr>
</table>

열을 병합하기 위한 colspan

• 가로로 열을 몇 칸 병합할 것인지 설정하는 속성이다.

<table>
	<tr>
    	<th colspan="2">NAME</th>
    </tr>
    <tr>
        <td>000-0000</td>
        <td>000-0000</td>
    </tr>
    <tr>
        <td>000-0000</td>
        <td>000-0000</td>
    </tr>
</table>

여백 관련 속성

• 일반적으로 이 두 속성응ㄴ 모두 0으로 지정한 뒤,  CSS로 디자인을 구성한다.

cellspacing

• 칸과 칸 사이의 여백을 설정하는 속성이다.

cellpadding

• 칸의 경계와 내용 사이의 여백을 설정하는 속성이다.