Table 테이블 <table>, <tr>, <th>, <td>

FrontEnd/HTML

by H_Develop 2022. 6. 15. 17:01

<table> 은 <form> 처럼 사용
<tr> <th>, <td>를 감싸줌, 각 행을 만들 때 사용 table row
<th> TITLE, 첫 행에서 각 열의 제목을 생성 table header
<td> CONTANTS, 행 내에 있는 각 셀을 표현 table division (division 분할)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<h3>오늘의 날씨</h3>

 <table border="100">
  <tr>
   <th>지역</th>	<!-- 첫줄 제목 -->
   <th>최저기온</th>
   <th>최고기온</th>
  </tr>
  <tr>
   <td>서울</td>
   <td>20</td>
   <td>30</td>
  </tr>
  <tr>
   <td>부산</td>
   <td>23</td>
   <td>34</td>
  </tr>
  <tr>
   <td>대구</td>
   <td>30</td>
   <td>36</td>
  </tr>
  <tr>
   <td>광주</td>
   <td>25</td>
   <td>31</td>
  </tr>
  
</table>
</body>
</html>

<!-- border="1" border 테두리 "1" 1px / 테두리 너비-->

colspan 속성으로 열을 병합
colspan="2" 두개의 열을 하나로 합침
rowspan 속성으로 행을 병합
rowspan="2" 두개의 행을 하나로 합침

colspan을 이용한 table

<!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 border="1">
  <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="submit" value="예약신청"></td>
  </tr>
  <tr>
   <td>서울(10:00)</td>
   <td>부산(13:00)</td>
   <td>특실</td>
   <td>80,000원</td>
   <td><input type="submit" value="예약불가"></td>
  </tr>
  <tr>
   <td>서울(11:00)</td>
   <td>부산(14:00)</td>
   <td>특실</td>
   <td>80,000원</td>
   <td><input type="submit" value="예약신청"></td>
  </tr>
  
</table>
</body>
</html>

'FrontEnd > HTML' 카테고리의 다른 글

색상, 글자 google font 사용법, a 테그 링크 속성 (0)	2022.06.16
내부, 외부 style, <span> (0)	2022.06.16
Form 폼 (0)	2022.06.15
하이퍼 링크, 경로, a 태그, img 삽입 (0)	2022.06.15
목록 (Ul, Ol, Li) (0)	2022.06.15