11_HTML_태그소개_Table정의하기

오늘은 table정의하기에 대해 알아보자

먼저 기본 틀이 될 코드입니다.

또한 행은 tr, 열은 td입니다.

	<h3>회원 정보 목록 게시물</h3>
	<table border="1" width="100%">
		<tr>
			<th>아이디</th>  <!-- 제목은 th 그럼 내용(td)보다 굵어짐 -->
			<th>이름</th>
			<th>패스워드</th>
		</tr>
		<tr>
			<td>a001</td>
			<td>홍길동</td>
			<td>pwa001</td>
		</tr>

		<tr>
			<td>b001</td>
			<td>홍길동</td>
			<td>pwa001</td>
		</tr>
		
		<tr>
			<td>c001</td>
			<td>홍길동</td>
			<td>pwa001</td>
		</tr>

 

1. border : 선그리기

스타일 정의 입니다. 기본값이 두줄그리기로 되어있으면서, 두께, 색상을 설정할 수 있습니다.

또한, border-collapse로 테이블 또는 셀의 테두리선 표시방법을 지정할 수 있습니다.

예시로 위의 기본코드에서도 table, td에 적용해보도록하자.

	<style>
		/* 모든 table과 td 태그에 대해서 스타일 지정하기 */
		table, td {
			/* boder : 태두리 라인 설정 */
			border : 1px solid black;
			/* collapse : 두줄 라인을 한줄로 스타일 적용하기 */
			border-collapse: collapse;
		}
	</style>

---

회원 정보 목록 게시물

아이디	이름	패스워드
a001	홍길동	pwa001
b001	홍길동	pwa001
c001	홍길동	pwa001

---

 

2. colspan

여러개의 열(컬럼, td) 합치기 입니다. 어떻게 보면 여러같의 너비로 늘린다는 것도 맞겠네요

합치고자 하는 열에 가서 합칠 크기도 같이 지정해줍니다.

<tr>
			<!-- colspan :
					- td(칼럼) 합치기
					- 전체 td의 갯수중에 합치고자 하는 갯수 정의 -->
            <td>b001</td>
			<td colspan="2">홍길동</td>
			<!-- <td>pwa001</td> -->
		</tr>
		
		<tr>
			<td colspan="2">c001</td>
			<!-- <td>홍길동</td> -->
			<td>pwa001</td>
		</tr>
		
		<tr>
			<td colspan="3">c001</td>
			<!-- <td>홍길동</td> -->
			<!-- <td>pwa001</td> -->
		</tr>

---

회원 정보 목록 게시물

b001	홍길동
c001		pwa001
c001

---

 

3. rowspan

여러개의 행(th) 합치기입니다. colspan과 동일하게 사용해줍니다.

		<!-- 여러개의 행(tr) 합치기 -->
		<tr>
			<td rowspan="3">a001</td>
			<td>홍길동</td>
			<td>pwa001</td>
		</tr>

		<tr>
			<!-- <td>b001</td> -->
			<td>홍길동</td>
			<td>pwa001</td>
		</tr>
		
		<tr>
			<!-- <td>c001</td> -->
			<td>홍길동</td>
			<td>pwa001</td>
		</tr>
		
		<!-- 2번째 열의 3개 행을 합치기 -->
		<tr>
			<td>a001</td>
			<td rowspan="3">홍길동</td>
			<td>pwa001</td>
		</tr>

		<tr>
			<td>b001</td>
			<!-- <td>홍길동</td> -->
			<td>pwa001</td>
		</tr>
		
		<tr>
			<td>c001</td>
			<!-- <td>홍길동</td> -->
			<td>pwa001</td>
		</tr>

---

회원 정보 목록 게시물

a001	홍길동	pwa001
	홍길동	pwa001
	홍길동	pwa001
a001	홍길동	pwa001
b001		pwa001
c001		pwa001

---

 

4. caption

테이블의 제목을 달아줄수 있습니다.

테이블 태그 아래에 위치하여 작성합니다.

	<table border ="1">
		<!-- 데이블 제목 -->
		<caption>테이블 제목(caption)</caption>
		<tr>
			<th>아이디</th>
			<th>이름</th>
			<th>주소</th>
		</tr>
		<tr>
			<td>a001</td>
			<td>홍길동</td>
			<td>광주 광산구 소촌로</td>
		</tr>
	</table>

---

회원 정보 목록 게시물

테이블 제목(caption)

아이디	이름	주소
a001	홍길동	광주 광산구 소촌로