본문 바로가기
수업(국비지원)/HTML, CSS

[HTML/CSS] HTML의 기본 구조 - 테이블 삽입하기

by byeolsub 2023. 4. 17.
  • 웹페이지에서 테이블 제작 시 사용하는 태그
<table> : 표에 넣고자 하는 내용
<tr> : 하나의 행. 가로 한줄
<th> : 테이블 각 열의 제목. 두꺼운 글자. 가운데 정렬.
       "table header"
<td> : 셀 한칸. 데이터 표시
  1. 테이블 삽입하기

 

📌

<!DOCTYPE html>
<!--  src/main/webapp/4/train.html -->
<html>
<head>
<meta charset="UTF-8">
<title>KTX열차 시간표</title>
<style type="text/css">
	table,tr,td,th{
		border : solid 1px blue;
		border-collapse : collapse;
		padding: 8px;
	}
</style>
</head>
<body>
<h3>KTX열차 시간표</h3>
<table border="1">
<tr>
<th>출발</th>
<th>도착</th>
<th>객실</th>
<th>요금</th>
<th>비고</th>
</tr>
<tr>
<td>서울(18:00)</td>
<td>부산(20:07)</td>
<td>일반실</td>
<td>50,800</td>
</tr>
<tr>
<td>서울(17:25)</td>
<td>부산(20:35)</td>
<td>특실</td>
<td>83,700</td>
</tr>
<tr>
<td>서울(18:15)</td>
<td>부산(20:50)</td>
<td>일반실</td>
<td>50,800</td>
</tr>
</table>
</body>
</html>

 

2. 테이블의 행과 열 합치기

rowspan 속성 : 행(세로) 합치는 데 사용. 
               합치고자 하는 셀의 개수를 속성 값으로 지정
colspan 속성 : 열(가로)을 합치는 데 사용

 

📌

<!DOCTYPE html>
<!-- src/main/webapp/4/weather.html -->
<html>
<head>
<meta charset="UTF-8">
<title>일기예보</title>
<style type="text/css">
	table,tr,td,th{	/*table태그 또는 tr태그 또는 td태그 또는 th태그*/
		border : solid 1px blue; /*soild => 실선, dashed => 점선 /px => 선의 두께/ 컬러 => 색상*/
		border-collapse : collapse;	/* margin => 셀과 셀사이의 거리 간격. / collapse => magin을 제거 */
		padding: 8px;	/*padding => 셀내부의 여백*/
	}
	td{
		text-align : center;
	}
</style>
</head>
<body>
<h3>일기예보</h3>
<table>
<tr>
	<th rowspan="2">지역</th>
	<th colspan="2">27일(목)</th>
	<th colspan="2">28일(금)</th>
	<th colspan="2">29일(토)</th>
</tr>
<tr>
	<td>오전</td>
	<td>오후</td>
	<td>오전</td>
	<td>오후</td>
	<td>오전</td>
	<td>오후</td>
</tr>
<tr><td>서울<br>경기도</td>
<td><img src="img/shine.png"></td><td><img src="img/shine.png"></td>
<td><img src="img/shine.png"></td><td><img src="img/rain.png"></td>
<td><img src="img/rain.png"></td><td><img src="img/rain.png"></td>
</tr>
<tr><td>제주도</td>
<td><img src="img/shine.png"></td><td><img src="img/shine.png"></td>
<td><img src="img/shine.png"></td><td><img src="img/rain.png"></td>
<td><img src="img/rain.png"></td><td><img src="img/rain.png"></td>
</tr>
</table>
<br>
<table>
<tr>
	<th rowspan="2">지역</th>
	<th colspan="2">27일(목)</th>
	<th colspan="2">28일(금)</th>
	<th colspan="2">29일(토)</th>
</tr>
<tr>
	<td>오전</td>
	<td>오후</td>
	<td>오전</td>
	<td>오후</td>
	<td>오전</td>
	<td>오후</td>
</tr>
<tr><td>서울<br>경기도</td>
<td colspan="2" alingn="center"><img src="img/shine.png"></td>
<td><img src="img/shine.png"></td><td><img src="img/rain.png"></td>
<td colspan="2"><img src="img/rain.png">
</tr>
<tr><td>제주도</td>
<td colspan="2"><img src="img/shine.png"></td>
<td><img src="img/shine.png"></td><td><img src="img/rain.png"></td>
<td colspan="2"><img src="img/rain.png"></td>
</tr>
</table>
</body>
</html>


<!DOCTYPE html>
<!-- src/main/webapp/4/exam1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table,tr,td,th { /* table태그 또는 tr태그 또는 td태그 또는 th태그 */
   border : solid 1px black; /* 실선 선의 두께 선의 색상*/
   border-collapse : collapse; /* 셀과 셀사이의 간경을 제거 */
   padding : 8px; /* 셀 내부의 여백 */
}
 td {
     text-align : center;
 }
</style>
</head>
<body>
<h3>서해 앞바다 해상예보</h3>
<table>
<tr><th colspan="2">날짜</th>
    <th>날씨</th>
    <th>풍향</th>
    <th>풍속(m/s)</th>
</tr>
<tr><td>24일(월)</td><td>오후</td><td><img src="img/rain.png"></td><td>남-남서</td><td>3~7</td></tr>
<tr><td rowspan="2">25일(화)</td><td>오전</td><td><img src="img/rain.png"></td><td>서-북서</td><td>3~6</td></tr>
<tr><td>오후</td><td><img src="img/shine.png"></td><td>북서-서</td><td>3~6</td></tr>
</table>
</body>
</html>

 

 

3. 폼 양식

         : 사용자가 각종 정보 입력 시 사용하는 입력 창, 선택 버튼 등

<form> : 텍스트 입력 창
radio : 원형의 선택 폼 양식. 여러 항목 중 단 하나만 선택
checkbox : 사각형의 선택 폼 양식. 다수 항목 선택 가능
<select> : 선택 박스 생성
<option> : 선택 박스에 들어갈 항목

 

📌

<!DOCTYPE html>
<!-- src/main/webapp/4/form.html 
  form 관련 태그 : 입력태그들을 가짐.
                 입력된 값들을 전송하는 단위.
                 form 내부에 입력값(파라미터값)들을 한꺼번에 서버로 전송.
 - input 태그
     type="text" : 텍스트 한줄 입력. 기본값
     type="password" : 텍스트 한줄 입력. 입력된 내용이 보이지 않음.
     type="radio" : name속성의 값이 같은 경우 한개만 선택.(토글키는 아니다.)
     type="checkbox" : 선택 또는 선택안함.
     type="file" : 파일 선택가능.
     type="date" : 날짜 선택가능.
     
 - select 태그 : 여러개의 목록 중 선택.
 - textarea 태그 : 텍스트 여러줄(여러 행) 입력.
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
 아이디:<input type="text"><br>
 비밀번호:<input type="password"><br>
 <hr>
 정보공개:<input type="radio" name="a" checked>공개
        <input type="radio" name="a"> 비공개<br>
 취미 : <input type="checkbox" checked>탁구    
       <input type="checkbox">배드민턴 
       <input type="checkbox">축구 <br>   
 일자 : <input type="date">
 <hr>
 <input type="file">
 <hr>
 이메일:<input type="text" size="10">@
 <select>
   <option>선택</option><option>naver.com</option>
   <option>hanmail.net</option><option>gmail.com</option>
   <option>직접입력</option>
   </select>
   <hr>
   인사말 : 
   <textarea rows="5" cols="60"></textarea>      
</form>
</body>
</html>

 

 

 

저작자표시 (새창열림)

'수업(국비지원) > HTML, CSS' 카테고리의 다른 글

[HTML/CSS] CSS 적용 - 외부 CSS Style변경, 글자 스타일 지정, 목록 스타일 지정하기  (0) 2023.04.17
[HTML/CSS] CSS 적용  (0) 2023.04.17
[HTML/CSS] HTML의 기본 구조 - 오디오,비디오 삽입하기, 링크걸기  (0) 2023.04.17
[HTML/CSS] HTML의 기본 구조 - 이미지 삽입하기  (0) 2023.04.17
[HTML/CSS] HTML의 기본 구조 - HTML 태그  (0) 2023.04.17

관련글

티스토리툴바