표 만드는게 어렵게 느껴질수 있지만 우리는 언제나 그렇듯 답을 찾을것입니다.국비충의 유쾌한 반란을 시작해보겠습니다.
우선 간단히 html:5를 입력해 엔터를 누르면
기본양식이 나옵니다. 2열에서 <html lang="ko">로 바꾸고 다른건 건들것도 없습니다 <body></body>사이에 우리가 만들고자하는걸 코드로 입력하면 웹브라우저를통해 볼 수 있습니다.
<table border="1">
<tr> <!-- 1행 -->
<th colspan="6">전국 군 이름</th>
</tr>
<tr> <!-- 2행 -->
<th rowspan="3">경기도</th>
<td>가평군</td>
<th rowspan="3">충청북도</th>
<td>괴산군</td>
<th rowspan="4">경상북도</th>
<td>고령군</td>
</tr>
<tr> <!-- 3행 -->
<td>양평군</td>
<td>보은군</td>
<td>울릉군</td>
</tr>
<tr> <!-- 4행 -->
<td>연천군</td>
<td>진천군</td>
<td>청송군</td>
</tr>
<tr> <!-- 5행 -->
<th rowspan="4">강원도</th>
<td>고성군</td>
<th rowspan="3">전라북도</th>
<td>고창군</td>
<td>봉화군</td>
</tr>
<tr> <!-- 6행 -->
<td>양구군</td>
<td>완주군</td>
<th rowspan="5">경상남도</th>
<td>고성군</td>
</tr>
<tr> <!-- 7행 -->
<td>정선군</td>
<td>진안군</td>
<td>창녕군</td>
</tr>
<tr> <!-- 8행 -->
<td>철원군</td>
<th rowspan="3">전라남도</th>
<td>강진군</td>
<td>하동군</td>
</tr>
<tr> <!-- 9행 -->
<th rowspan="2">충청남도</th>
<td>금산군</td>
<td>완도군</td>
<td>산청군</td>
</tr>
<tr> <!-- 10행 -->
<td>부여군</td>
<td>신안군</td>
<td>의령군</td>
</tr>
</table>
<table border="1">는 주변 테두리에 줄을 긋는 겁니다. 저는 표만들때 반드시 쓰고 시작하는데 그래야 보기 편하기 때문입니다.
----------*** 중요***-----------
<tr> table row -> row(행)에 들어갈 요소를 적는것
<td> table data -> column(열)에 들어갈 요소를 적는것
<th> table head로 td와 같지만 다른점은 글자가 굵어지는정도
<tr>은 이해하기 쉽지만 <td>와 <th>가 헷갈릴수있는데 별거 없습니다.
<th>나 <td> 같은 역할이지만 <h1>, <h2>처럼 글자의 스타일이 다르다정도로만 생각하면될것같아요
(행 방향으로 진행된다는게 같음 다만, th는 bold체인게 디폴트)
colspan="숫자" -> 행 방향으로 포함하는 표의 갯수
rowspan="숫자" -> 열 방향으로 포함하는 표의 갯수
<tr>
<th colspan="6">전국 군 이름</th>
</tr>
처음 코드를 예로보면
<tr> </tr> 사이에 <th> -> "전국 군 이름"이 1행에서 6열을 포함하겠다 는것
<tr>
<th rowspan="3">경기도</th>
<td>가평군</td>
<th rowspan="3">충청북도</th>
<td>괴산군</td>
<th rowspan="4">경상북도</th>
<td>고령군</td>
</tr>
<tr>이 또 나왔는데 2행에 들어가는 요소라는것
<th>는 글자 굵은것, <td>는 normal한 글자
"경기도"는 2열로부터 3개의 열까지 포함하겠다(2, 3, 4)
"가평군"은 2열 2행에 들어가는 요소
"충청북도"는 2열로부터 3개의 열까지 포함하겠다(2, 3, 4)
"괴산군"은 2열 4행에 들어가는 요소
"경상북도"는 2열로부터 4개의 열까지 포함하겠다(2, 3 , 4, 5)
"고령군"은 2열 6행에 들어가는 요소
'프론트엔드 > HTML5' 카테고리의 다른 글
| 수정 (2) | 2021.02.02 |
|---|---|
| Instagram 클론해보기 (HTML, CSS) (0) | 2021.01.27 |