2019. 10. 1. 22:52
Keyword :
셀 병합 : <colspan>세로끼리 합치기, <rowspan> 가로줄끼리 합치기,
테이블 제조 : <table>, <tr>, <td>, <th>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<hr>
<h1>table로 만드는 표</h1>
<hr>
<table border = 1>
<tr>
<td>1 cell</td>
<td>2 cell</td>
</tr>
<tr>
<td>3 cell</td>
<td>4 cell</td>
</tr>
</table>
<br><br>
<table border = 1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<br><br>
<table border = 1>
<tr>
<th>table</th>
<td>표를 구성하는 가장 큰 태그</td>
</tr>
<tr>
<th>tr</th>
<td>줄을 구성하는 태그</td>
</tr>
<tr>
<th>th</th>
<td>제목칸을 구성하는 태그 특징(볼드체, 중앙정렬)</td>
</tr>
<tr>
<th>td</th>
<td>일반칸을 구성하는 태그</td>
</tr>
</table>
<h1>※첫줄이 제목칸인 표만들기</h1> <br><br>
<table border = 1>
<tr>
<th>번호</th>
<th>이름</th>
<th>불참</th>
</tr>
<tr>
<td>0</td>
<td>불참자없음</td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>서에번쩍</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>동에번쩍</td>
<td> </td>
</tr>
</table>
<br>
<hr>
<h1>셀(칸)합치기</h1>
<hr>
<table border = 1>
<tr>
<td>colspan=n</td>
<td>가로로 n개만큼 하나로 합치기</td>
</tr>
<tr>
<td>rowspan=n</td>
<td>세로로 n개만큼 하나로 합치기
</tr>
</table>
<hr>
<hr>
<table border = 1>
<tr>
<th colspan = 2>셀(칸)합치기</th>
</tr>
<tr>
<td>colspan</td>
<td>rowspan</td>
</tr>
</table>
<table border = 1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan = "3">4</td>
</tr>
</table>
<hr>
<br><br><br><br>
<h3>가로합치기 - colspan</h3>
<table border = "1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td colspan = "2">e</td>
<td colspan = "2">f</td>
</tr>
<tr>
<td colspan = "3"> g</td>
<td>h</td>
</tr>
</table>
<h3>세로로 합치기 - rowspan</h3>
<table border = "1">
<tr>
<td rowspan = "2"> 셀(칸) 합치는 속성 </td>
</tr>
<tr>
<td>colspan</td>
<td>rowspan</td>
</tr>
</table>
<hr>
<h2>세로로 합치기</h2>
<table border = "1">
<tr>
<td rowspan = "3">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
<h2>문제. 세로로 합치기</h2>
<table border ="1">
<tr>
<td>a</td>
<td rowspan = "3">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td rowspan = "2">e</td>
</tr>
<tr>
<td>f</td>
</tr>
</table>
<table border = "1">
<tr>
<td colspan = "2">기타사항</td>
<td> </td>
</tr>
<tr>
<td rowspan = "4">특기사항</td>
<td>지각자</td>
<td> </td>
</tr>
<tr>
<td>결석자</td>
<td> 홍길동, 길동홍, 동길홍, 길홍동</td>
</tr>
<tr>
<td>조퇴자</td>
<td> </td>
</tr>
<tr>
<td> 그 밖의 </td>
<td> -외출: <br> -휴가: <br> -지각 &조퇴: </td>
</tr>
</table>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML/CSS] 형제 태그 선택자 +, ~ (0) | 2019.11.06 |
|---|---|
| <a>태그 / <embed>태그 (0) | 2019.06.14 |
| 이미지 태그 <img> (0) | 2019.06.04 |
| 목록태그 <ol> , <ul> , <dl> (0) | 2019.06.04 |