HTML - table, ol, ul, rowspan, colsapn

 

 

 

	<H1>LIST (li)종류</H1> 

	<ol>
		<strong>Order List : 순서가 있는 태그 (oi)</strong>
		<li>HELLO</li>
		<li>WORLD</li>
		<li>TIGER</li>
		<li>APPLE</li>
		<li>VIDEO</li>
	</ol>
	
	
	<ul>
		<strong>Unorder List : 순서가 없는 태그 (ul)</strong>
		<li>바나나</li>
		<li>복숭아</li>
		<li>토마토</li>
		<li>무화과</li>
		<li>청포도</li>
	</ul>
	
	<!-- alt 이미지 깨졌을 때 대체-->
	<!-- title : 이미지 마우스 접근 시, 설명 -->
	<img src ="picture.jpg" alt ="picture_alt : 이미지 깨짐" title ="picture_name">

	<h1> 테이블 만들기 </h1>
	<!-- border : 테이블 테두리 크기 -->
	<table border = "3">
	<!-- thead : 테이블 head 라고 명시적으로 의미-->
	<thead>	
		<!-- Table Row : 가로줄 row를 만듬 -->
		<tr>
			<!--Table Header : 테이블의 제목 -->
			<th>이름</th> <th>주소</th> <th>나이</th> <th>별명</th>
		</tr>
	</thead>	
	
	<!-- Table Body : 테이블 제목, 컬럼을 제외한 데이터 의미 -->
	</tbody>
		<tr>
			<!-- Table Data : 테이블 실제 데이터 의미 -->
			<td>피카츄</td> <td>미국</td> <td rowspan ="2">td rowspan ="2" 세로 2칸 병합</td> <td>포켓몬</td>
		</tr>
		
		<tr>
			<td>파이리</td> <td>영국</td> <td>포켓몬</td>
		</tr>
		<tr>
			<td colspan="3">td colspan="3" 가로 3칸 병합</td> <td>포켓몬</td>
		</tr>
	</tbody>

	<!--tfoot : thead 처럼 테이블 foot 마지막 부분이라는 명시적 의미 -->
	</tfoot>
		<tr>
			<td>이름끝</td><td>주소끝</td><td>나이끝</td><td>별명끝</td>
		</tr>
	</tfoot>
	</table>

Order List : 순서가 있는태그

Unorder List : 순서가 없는 태그

img alt ="이미재 깨졌을 때 나오는 알림"

title ="이미지 마우스 커서 이동 시 나오는 말풍선?"

rowspan : 세로 칸 병합

colspan : 가로 칸 병합

테이블은 tr, td 이런식으로만 주어도 되지만, 가독성과 구분을 위해서 다음과 같이 표현함