테이블 태그는 HTML 페이지에서 표를 만들 때 사용하는 태그이다.
<body>
<table>
</table>
</body>
| 태그 이름 | 설명 |
| tr | 표 내부의 행 태그 |
| th | 행 내부의 제목 셀 태그 |
| td | 행 내부의 일반 셀 태그 |
tr 태그는 table row
th 태그는 table header
td 태그는 table data
테이블 태그 속성
| 속성 이름 | 설명 |
| border | 표의 테두리 두께를 지정 |
| 속성이름 | 설명 |
| rowspan | 셀의 높이 |
| colspan | 셀의 너비 |
<실습>
1) tableExam1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<caption><b>테이블이름</b></caption>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
</tr>
<tr>
<td width = "100px" height = "50px">1행1열</td>
<td width = "100px">1행2열</td>
<td width = "100px">1행3열</td>
</tr>
<tr>
<td height = "50px">2행1열</td>
<td height = "50px">2행2열</td>
<td height = "50px">2행3열</td>
</tr>
</table>
<hr>
<table border ="1">
<caption><b>웹 브라우져 종류</b></caption>
<tr>
<th>브라우저명</th>
<th>브라우저명</th>
<th>브라우저명</th>
</tr>
<tr>
<td>크롬</td>
<td>google</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>익스플로러</td>
<td>MS</td>
<td>http://www.microsoft.com</td>
</tr>
<tr>
<td>사파리</td>
<td>apple</td>
<td>http://www.apple.com</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan = "2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<hr>
<table border = "1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan = "2">Sum:$180</td>
</tr>
</table>
<hr>
<table border = "1">
<tr>
<td colspan = "2" rowspan = "2">
합쳐진 셀</td>
<td>추가열</td>
</tr>
<tr>
<!-- <td></td><td></td> 두개 칼럼이 rowspan에 의해서
합쳐짐 -->
<td>추가열</td>
</tr>
<tr>
<td>추가열</td>
<td>추가열</td>
<td>추가열</td>
</tr>
</table>
</body>
</html>
| 컬럼1 | 컬럼2 | 컬럼3 |
|---|---|---|
| 1행1열 | 1행2열 | 1행3열 |
| 2행1열 | 2행2열 | 2행3열 |
| 브라우저명 | 브라우저명 | 브라우저명 |
|---|---|---|
| 크롬 | http://www.google.com | |
| 익스플로러 | MS | http://www.microsoft.com |
| 사파리 | apple | http://www.apple.com |
| test1 | test2 |
| Month | Savings | Savings for holiday |
|---|---|---|
| January | $100 | $50 |
| February | $80 |
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| Sum:$180 | |
| 합쳐진 셀 | 추가열 | |
| 추가열 | ||
| 추가열 | 추가열 | 추가열 |
2) tableExam2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border = "1">
<tr>
<th colspan = "5" >보석컬렉션</th>
</tr>
<tr>
<th rowspan = "5">제품리스트</th>
<th>코드</th>
<th>분류</th>
<th>가격</th>
<th>구매가능 개수</th>
</tr>
<tr>
<td>01-468</td>
<td>에메랄드</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr>
<td>01-468</td>
<td>에메랄드</td>
<td>150,000원</td>
<td>1700</td>
</tr>
<tr>
<td>01-468</td>
<td>에메랄드</td>
<td>950,000원</td>
<td>2500</td>
</tr>
<tr>
<td>01-468</td>
<td>에메랄드</td>
<td>120,000원</td>
<td>3200</td>
</tr>
<tr>
<th>★ 특 가★</th>
<td colspan="4">푸드렛 타이트 (문의전화주세요)</td>
</tr>
</table>
<hr>
<hr>
<hr>
<table border ="1">
<tr>
<th colspan="5"> 이력서</th>
</tr>
<tr>
<th rowspan="4" width = "100px"> 사진 </th>
<td>이름</td>
<td colspan="3"></td>
</tr>
<tr>
<td>생년월일</td>
<td colspan="3"></td>
</tr>
<tr>
<td>주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td>전화번호</td>
<td width = "50px"></td>
<td>이메일</td>
<td width = "50px"></td>
</tr>
</table>
<hr>
<table border ="1">
<tr>
<td width = "100px"></td>
<td width = "100px">기간</td>
<td>출신학교명</td>
<td>전공</td>
<td>졸업여부</td>
<td>학점</td>
</tr>
<tr>
<td rowspan ="2" >학력사항</td>
<td height = "20"> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height = "20"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr>
<hr>
<table border ="1">
<tr>
<td width = "50px"></td>
<td width = "100px">기간</td>
<td width = "100px">시행처</td>
<td width = "100px">취득일</td>
</tr>
<tr>
<td rowspan ="2" >자격증</td>
<td height = "20"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td height = "20"></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<hr>
<table border = "1">
<tr>
<td colspan="2" rowspan="2"> 사진
</td>
<td height = "30">이름</td>
<td width = "150px"></td>
</tr>
<tr>
<td height = "30">연락처</td>
<td></td>
</tr>
<tr>
<td>주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td height = "100px">자기소개</td>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
| 보석컬렉션 | ||||
|---|---|---|---|---|
| 제품리스트 | 코드 | 분류 | 가격 | 구매가능 개수 |
| 01-468 | 에메랄드 | 200,000원 | 1068 | |
| 01-468 | 에메랄드 | 150,000원 | 1700 | |
| 01-468 | 에메랄드 | 950,000원 | 2500 | |
| 01-468 | 에메랄드 | 120,000원 | 3200 | |
| ★ 특 가★ | 푸드렛 타이트 (문의전화주세요) | |||
| 이력서 | ||||
|---|---|---|---|---|
| 사진 | 이름 | |||
| 생년월일 | ||||
| 주소 | ||||
| 전화번호 | 이메일 | |||
| 기간 | 출신학교명 | 전공 | 졸업여부 | 학점 | |
| 학력사항 | |||||
| 기간 | 시행처 | 취득일 | |
| 자격증 | |||
| 사진 | 이름 | ||
| 연락처 | |||
| 주소 | |||
| 자기소개 | |||
3) tableExam3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border = "1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>이름1</td>
<td>20</td>
<td>서울</td>
</tr>
<tr>
<td>이름2</td>
<td>30</td>
<td>경기</td>
</tr>
<tr>
<td>이름3</td>
<td>40</td>
<td>대구</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan = "2"> 총 인원
</td>
<td>3명</td>
</tr>
</tfoot>
</table>
<hr>
<table border = "1">
<caption>네이버화면</caption>
<tr height ="100">
<th width = "100px" >네이버로고</th>
<th colspan = "5" width = "500px">검색창</th>
</tr>
<tr height = "30px">
<td>메일</td>
<td>카페</td>
<td>블로그</td>
<td>지식In</td>
<td>쇼핑</td>
<td rowspan = "2" width = "200px" >로그인</td>
</tr>
<tr height = "100px">
<td colspan = "5" rowspan="2">
<table border ="1">
<tr height = "100px">
<td width = "80px">MBN</td>
<td width = "80px">NewDelity</td>
<td width = "80px">중앙일보</td>
<td width = "80px">연합뉴스</td>
</tr>
<tr height = "100px">
<td width = "80px">파이낸셜</td>
<td width = "80px">SBS</td>
<td width = "80px">매일경제</td>
<td width = "80px">동아일보</td>
</tr>
<tr height = "100px">
<td width = "80px">KBS</td>
<td width = "80px">전자신문</td>
<td width = "80px">시사IN</td>
<td width = "80px">노컷뉴스</td>
</tr>
<tr height = "100px">
<td width = "80px">프레시안</td>
<td width = "80px">OSEN</td>
<td width = "80px">이투데이</td>
<td width = "80px">뉴스타파</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height = "300px">광고</td>
</tr>
</table>
</body>
</html></pre Insert title here이름나이주소이름120서울이름230경기이름340대구총 인원3명네이버화면네이버로고검색창메일카페블로그지식In쇼핑로그인MBNNewDelity중앙일보연합뉴스파이낸셜SBS매일경제동아일보KBS전자신문시사IN노컷뉴스프레시안OSEN이투데이뉴스타파광고
| 이름 | 나이 | 주소 |
|---|---|---|
| 이름1 | 20 | 서울 |
| 이름2 | 30 | 경기 |
| 이름3 | 40 | 대구 |
| 총 인원 | 3명 | |
| 네이버로고 | 검색창 | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 메일 | 카페 | 블로그 | 지식In | 쇼핑 | 로그인 | |||||||||||||||
|
||||||||||||||||||||
| 광고 | ||||||||||||||||||||
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 6. HTML 입력 양식 태그 / form 태그 (0) | 2019.09.10 |
|---|---|
| <이공계전문기술연수> 5. HTML 이미지 태그 / 오디오 태그 / 비디오 태그 (0) | 2019.09.09 |
| <이공계전문기술연수> 3. HTML 웹의 역사 / tag / 이클립스(Eclipse)(2) (0) | 2019.09.07 |
| <이공계전문기술연수> 2. HTML 웹의 역사 / tag / 이클립스(Eclipse)(1) (0) | 2019.09.07 |
| <이공계전문기술연수> 1. HTML/CSS 브라켓(bracket) 설치 (0) | 2019.09.05 |
테이블 태그는 HTML 페이지에서 표를 만들 때 사용하는 태그이다.
<body>
<table>
</table>
</body>
| 태그 이름 | 설명 |
| tr | 표 내부의 행 태그 |
| th | 행 내부의 제목 셀 태그 |
| td | 행 내부의 일반 셀 태그 |
tr 태그는 table row
th 태그는 table header
td 태그는 table data
테이블 태그 속성
| 속성 이름 | 설명 |
| border | 표의 테두리 두께를 지정 |
| 속성이름 | 설명 |
| rowspan | 셀의 높이 |
| colspan | 셀의 너비 |
<실습>
1) tableExam1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<caption><b>테이블이름</b></caption>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
</tr>
<tr>
<td width = "100px" height = "50px">1행1열</td>
<td width = "100px">1행2열</td>
<td width = "100px">1행3열</td>
</tr>
<tr>
<td height = "50px">2행1열</td>
<td height = "50px">2행2열</td>
<td height = "50px">2행3열</td>
</tr>
</table>
<hr>
<table border ="1">
<caption><b>웹 브라우져 종류</b></caption>
<tr>
<th>브라우저명</th>
<th>브라우저명</th>
<th>브라우저명</th>
</tr>
<tr>
<td>크롬</td>
<td>google</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>익스플로러</td>
<td>MS</td>
<td>http://www.microsoft.com</td>
</tr>
<tr>
<td>사파리</td>
<td>apple</td>
<td>http://www.apple.com</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan = "2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<hr>
<table border = "1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan = "2">Sum:$180</td>
</tr>
</table>
<hr>
<table border = "1">
<tr>
<td colspan = "2" rowspan = "2">
합쳐진 셀</td>
<td>추가열</td>
</tr>
<tr>
<!-- <td></td><td></td> 두개 칼럼이 rowspan에 의해서
합쳐짐 -->
<td>추가열</td>
</tr>
<tr>
<td>추가열</td>
<td>추가열</td>
<td>추가열</td>
</tr>
</table>
</body>
</html>
| 컬럼1 | 컬럼2 | 컬럼3 |
|---|---|---|
| 1행1열 | 1행2열 | 1행3열 |
| 2행1열 | 2행2열 | 2행3열 |
| 브라우저명 | 브라우저명 | 브라우저명 |
|---|---|---|
| 크롬 | http://www.google.com | |
| 익스플로러 | MS | http://www.microsoft.com |
| 사파리 | apple | http://www.apple.com |
| test1 | test2 |
| Month | Savings | Savings for holiday |
|---|---|---|
| January | $100 | $50 |
| February | $80 |
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| Sum:$180 | |
| 합쳐진 셀 | 추가열 | |
| 추가열 | ||
| 추가열 | 추가열 | 추가열 |
2) tableExam2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border = "1">
<tr>
<th colspan = "5" >보석컬렉션</th>
</tr>
<tr>
<th rowspan = "5">제품리스트</th>
<th>코드</th>
<th>분류</th>
<th>가격</th>
<th>구매가능 개수</th>
</tr>
<tr>
<td>01-468</td>
<td>에메랄드</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr>
<td>01-468</td>
<td>에메랄드</td>
<td>150,000원</td>
<td>1700</td>
</tr>
<tr>
<td>01-468</td>
<td>에메랄드</td>
<td>950,000원</td>
<td>2500</td>
</tr>
<tr>
<td>01-468</td>
<td>에메랄드</td>
<td>120,000원</td>
<td>3200</td>
</tr>
<tr>
<th>★ 특 가★</th>
<td colspan="4">푸드렛 타이트 (문의전화주세요)</td>
</tr>
</table>
<hr>
<hr>
<hr>
<table border ="1">
<tr>
<th colspan="5"> 이력서</th>
</tr>
<tr>
<th rowspan="4" width = "100px"> 사진 </th>
<td>이름</td>
<td colspan="3"></td>
</tr>
<tr>
<td>생년월일</td>
<td colspan="3"></td>
</tr>
<tr>
<td>주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td>전화번호</td>
<td width = "50px"></td>
<td>이메일</td>
<td width = "50px"></td>
</tr>
</table>
<hr>
<table border ="1">
<tr>
<td width = "100px"></td>
<td width = "100px">기간</td>
<td>출신학교명</td>
<td>전공</td>
<td>졸업여부</td>
<td>학점</td>
</tr>
<tr>
<td rowspan ="2" >학력사항</td>
<td height = "20"> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height = "20"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr>
<hr>
<table border ="1">
<tr>
<td width = "50px"></td>
<td width = "100px">기간</td>
<td width = "100px">시행처</td>
<td width = "100px">취득일</td>
</tr>
<tr>
<td rowspan ="2" >자격증</td>
<td height = "20"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td height = "20"></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<hr>
<table border = "1">
<tr>
<td colspan="2" rowspan="2"> 사진
</td>
<td height = "30">이름</td>
<td width = "150px"></td>
</tr>
<tr>
<td height = "30">연락처</td>
<td></td>
</tr>
<tr>
<td>주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td height = "100px">자기소개</td>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
| 보석컬렉션 | ||||
|---|---|---|---|---|
| 제품리스트 | 코드 | 분류 | 가격 | 구매가능 개수 |
| 01-468 | 에메랄드 | 200,000원 | 1068 | |
| 01-468 | 에메랄드 | 150,000원 | 1700 | |
| 01-468 | 에메랄드 | 950,000원 | 2500 | |
| 01-468 | 에메랄드 | 120,000원 | 3200 | |
| ★ 특 가★ | 푸드렛 타이트 (문의전화주세요) | |||
| 이력서 | ||||
|---|---|---|---|---|
| 사진 | 이름 | |||
| 생년월일 | ||||
| 주소 | ||||
| 전화번호 | 이메일 | |||
| 기간 | 출신학교명 | 전공 | 졸업여부 | 학점 | |
| 학력사항 | |||||
| 기간 | 시행처 | 취득일 | |
| 자격증 | |||
| 사진 | 이름 | ||
| 연락처 | |||
| 주소 | |||
| 자기소개 | |||
3) tableExam3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border = "1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>이름1</td>
<td>20</td>
<td>서울</td>
</tr>
<tr>
<td>이름2</td>
<td>30</td>
<td>경기</td>
</tr>
<tr>
<td>이름3</td>
<td>40</td>
<td>대구</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan = "2"> 총 인원
</td>
<td>3명</td>
</tr>
</tfoot>
</table>
<hr>
<table border = "1">
<caption>네이버화면</caption>
<tr height ="100">
<th width = "100px" >네이버로고</th>
<th colspan = "5" width = "500px">검색창</th>
</tr>
<tr height = "30px">
<td>메일</td>
<td>카페</td>
<td>블로그</td>
<td>지식In</td>
<td>쇼핑</td>
<td rowspan = "2" width = "200px" >로그인</td>
</tr>
<tr height = "100px">
<td colspan = "5" rowspan="2">
<table border ="1">
<tr height = "100px">
<td width = "80px">MBN</td>
<td width = "80px">NewDelity</td>
<td width = "80px">중앙일보</td>
<td width = "80px">연합뉴스</td>
</tr>
<tr height = "100px">
<td width = "80px">파이낸셜</td>
<td width = "80px">SBS</td>
<td width = "80px">매일경제</td>
<td width = "80px">동아일보</td>
</tr>
<tr height = "100px">
<td width = "80px">KBS</td>
<td width = "80px">전자신문</td>
<td width = "80px">시사IN</td>
<td width = "80px">노컷뉴스</td>
</tr>
<tr height = "100px">
<td width = "80px">프레시안</td>
<td width = "80px">OSEN</td>
<td width = "80px">이투데이</td>
<td width = "80px">뉴스타파</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height = "300px">광고</td>
</tr>
</table>
</body>
</html></pre Insert title here이름나이주소이름120서울이름230경기이름340대구총 인원3명네이버화면네이버로고검색창메일카페블로그지식In쇼핑로그인MBNNewDelity중앙일보연합뉴스파이낸셜SBS매일경제동아일보KBS전자신문시사IN노컷뉴스프레시안OSEN이투데이뉴스타파광고
| 이름 | 나이 | 주소 |
|---|---|---|
| 이름1 | 20 | 서울 |
| 이름2 | 30 | 경기 |
| 이름3 | 40 | 대구 |
| 총 인원 | 3명 | |
| 네이버로고 | 검색창 | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 메일 | 카페 | 블로그 | 지식In | 쇼핑 | 로그인 | |||||||||||||||
|
||||||||||||||||||||
| 광고 | ||||||||||||||||||||
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 6. HTML 입력 양식 태그 / form 태그 (0) | 2019.09.10 |
|---|---|
| <이공계전문기술연수> 5. HTML 이미지 태그 / 오디오 태그 / 비디오 태그 (0) | 2019.09.09 |
| <이공계전문기술연수> 3. HTML 웹의 역사 / tag / 이클립스(Eclipse)(2) (0) | 2019.09.07 |
| <이공계전문기술연수> 2. HTML 웹의 역사 / tag / 이클립스(Eclipse)(1) (0) | 2019.09.07 |
| <이공계전문기술연수> 1. HTML/CSS 브라켓(bracket) 설치 (0) | 2019.09.05 |
