728x90
테이블
웹 페이지에 테이블을 삽입하는 데에는 <table>, <tr>, <th>, <td> 태그를 사용한다. 테이블을 만들고, 행과 열을 병합할 수 있다.
테이블 삽입 - <table>, <tr>, <th>, <td>
| 종류 | 설명 | 참고 |
| <table> | 전체 테이블을 감싸는 것(border="1" 경계선의 두께) | border="1" 경계선의 두께 |
| <caption> | 테이블의 제목 | |
| <tr> | 각각의 행을 만들 때 (table row) | table row |
| <th> | 테이블의 첫 번째 행에서 각 열의 제목 생성 (table header) | table header |
| <td> | 테이블 행 내에 있는 각각의 셀 표현 (table division) | table division |
| <thead> | 표 구조의 제목부분 | |
| <tbody> | 표 구조의 본문부분 | |
| <tfoot> | 표 구조에서 요약이나 정리 부분 | |
| <col> | 표에서 열의 스타일 지정 | |
| <colgroup> | 표에서 여러 열을 함께 묶어서 스타일을 지정 |
** <th> 태그나 <td> 태그에서 사용하는 colspan 속성을 이용해서 열을 병합. colspan="2"는 두 개의 열을 하나로 합침
** <th> 태그나 <td> 태그에서 사용되는 rowspan 속성을 이용해서 행을 병합. rowsapn="2"는 두 개의 행을 하나로 합침
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>오늘의 날씨</h3>
<table border="1">
<tr>
<th>지역</th><th>최저기온</th><th>최고기온</th> <!-- 첫줄 제목-->
</tr>
<tr>
<td>서울</td><td>20</td><td>30</td> <!-- 각 행의 각 셀 -->
</tr>
<tr>
<td>부산</td><td>22</td><td>34</td>
</tr>
<tr>
<td>대구</td><td>28</td><td>36</td>
</tr>
<tr>
<td>제주</td><td>24</td><td>28</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>오늘의 날씨</h3>
<table border="1">
<tr>
<th>지역</th><th colspan="2">최저/최고기온</th><th>습도</th>
</tr>
<tr>
<td>서울</td><td>20</td><td>28</td><td>60</td>
</tr>
<tr>
<td>부산</td><td>22</td><td>29</td><td>58</td>
</tr>
<tr>
<td>대구</td><td>28</td><td>32</td><td>50</td>
</tr>
<tr>
<td>제주</td><td>24</td><td>30</td><td>52</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3 style="color:skyblue">전국 날씨</h3>
<table border="1">
<tr>
<th>도</th><th>시</th><th colspan="2">최저/최고기온</th>
</tr>
<tr>
<td rowspan="2">경기도</td><td>수원</td><td>24</td><td>26</td>
</tr>
<tr>
<td>인천</td><td>22</td><td>29</td>
</tr>
<tr>
<td rowspan="2">강원도</td><td>강릉</td><td>20</td><td>30</td>
</tr>
<tr>
<td>원주</td><td>25</td><td>27</td>
</tr>
<tr>
<td rowspan="2">전라도</td><td>전주</td><td>20</td><td>30</td>
</tr>
<tr>
<td>광주</td><td>25</td><td>27</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table, tr, th, td {
border: solid 1px black;
border-collapse: collapse;
padding: 10px;
}
</style>
</head>
<body>
<h3>KTX 열차 시간표</h3>
<table>
<tr>
<th>출발</th> <th>도착</th> <th colspan="2">객실/요금</th> <th>예약</th>
</tr>
<tr>
<td>서울(09:00)</td> <td>부산(12:00</td> <td>일반실</td><td>50,000원</td> <td><input type="button" value="예약신청"></td>
</tr>
<tr>
<td>서울(10:00)</td> <td>부산(13:00)</td> <td>특실</td><td>80,000원</td> <td><input type="button" value="예약불가"></td>
</tr>
<tr>
<td>서울(11:00)</td> <td>부산(14:00)</td> <td>특실</td><td>80,000원</td> <td><input type="button" value="예약신청"></td>
</tr>
</<table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h3>답변 글쓰기</h3>
<table>
<tr>
<td>이름</td> <td><input type="text" value="홍길동" disabled></td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" value="RE: "></td>
</tr>
<tr>
<td>내용</td>
<td>
<textarea cols="80" rows="8"></textarea>
</td>
</tr>
</table>
</body>
</html>'일단 해보는 코딩 > HTML' 카테고리의 다른 글
| [HTML]Div태그 (0) | 2022.06.17 |
|---|---|
| [HTML] 텍스트 다양한 태그 (0) | 2022.06.16 |
| [HTML] Form 양식 (0) | 2022.06.15 |
| [HTML] 목록(list)와 하이퍼링크(Hyperlink OR Link) 삽입하기 (0) | 2022.06.14 |
| [HTML] IMG(사진),Video, URL 삽입 방법 (0) | 2022.06.14 |