[ HTML 웹 문서 ] 표 만들기
[ 표의 구성 요소 ]
👇위의 HTML문만 실행해서는 '표'의 선이 나타나지 않는다.👇
<table>태그 삽입 시
<head></head> 사이에
<style>을 넣어 표의 테두리를 설정해야 표의 선이 생긴다.
>> CSS
<caption> 표 제목
<table> 표 전체
<tr> 행
<td> 셀
<th> 제목 셀
<td>와 <th>의 차이
>> td : '기본 글씨(얇다), 왼쪽 정렬'이 기본이다.
>> th : '두꺼운 글씨, 가운데 정렬'이 기본이다.
표의 구조를 '제목', '본문'과 '요약' 부분으로 나눈다.
<thead>, <tbody>, <tfoot> 태그 사용
웹 브라우저 화면에서 보이지 않지만
, 화면 낭독기나 자바스크립트 등에서 읽을 수 있다.
>> 시각 장애인도 표의 구조를 쉽게 이해할 수 있다.
표의 본문이 길 경우 자바스크립트를 이용해 제목과 바닥 부분을 고정하고
본문만 스크롤되도록 할 수 있다.
[ 표 만들기 ]
HTML 웹 문서로 '표'를 작성해 보자
'표'의 선은 아래의 <style>태그를 <head>영역에 작성하여 나타낸다.
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
th, td{
border: 1px solid black;
width: 150px;
}👇<body>영역에 <table>태그를 이용하여 작성한다.👇
<body>
<table>
<tr>
<th>순번</th>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>1</td>
<td>유연석</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>박보검</td>
<td>27</td>
</tr>
<tr>
<td>3</td>
<td>남주혁</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>유승호</td>
<td>29</td>
</tr>
</table>
</body>'5개의 행' 안에 '3개의 셀'씩 넣어서 작성
👇결과 값👇
[ '표'의 행 또는 열 합치기 ]
<table>, <tr>, <td>태그를 사용하여
👇행 = 3, 열 = 3개인 표 만들기👇
<style> 태그를 사용하여 표의 테두리를 아래와 같이 지정한다.
위의 '표'를 가지고 '행' 또는 '열'을 합쳐보자
>> colspan, rowspan 속성을 이용한다.
기본형
'열' 합치기 : <td rowspan="합칠 셀의 개수"> 셀의 내용 </td>
'행' 합치기 : <td colspan="합칠 셀의 개수"> 셀의 내용 </td>
문제 1
아래 '표'에서 체크된 빨간 '셀'의 열(세로)을 합치시오.
👇👇
첫 번째 '행'이기 때문에 첫 번째 <tr>의
첫 번째 '셀'이기 때문에 첫 번째 <td>에 rowspan="3"을 지정해 주었다.
>> rowspan="N" : N칸만큼 열의 '셀'을 합치겠다.
👇결과값👇
HTML 테이블은 짝이 맞춰지게 나타나진다.
첫 번째 '열'이 하나로 합쳐졌기 때문에 위에 표시된 파란 영역은 비워진 영역이다.
>> 태그가 없기 때문에 데이터를 넣을 수 없다.
3칸이 1칸에 해당되기 때문에
합쳐진 두 번째, 세 번째 행의 빨간 영역의 <td> 셀을 삭제해주어야 한다.
문제 2
'표'에서 체크된 빨간 '셀'의 행(가로)을 합치시오.
👇👇
세 번째 '행'이기 때문에 세 번째 <tr>의
첫 번째 '셀'이기 때문에(앞의 '셀'은 첫 행에 합쳐진 영역이다.)
첫 번째 <td>에 colspan="2"을 지정해 준다.
>> colspan="N" : N칸만큼 행의 '셀'을 합치겠다.
👇결과값👇
세 번째 '행'이 하나로 합쳐졌기 때문에 위에 표시된 파란 영역은 비워진 영역이다.
>> 태그가 없기 때문에 데이터를 넣을 수 없다.
2칸이 1칸에 해당되기 때문에
합쳐진 세번째 행의 파란 영역의 <td>셀을 삭제해주어야 한다.
지금까지 [ HTML ] 웹 문서 '표 만들기'에 대해 알아보았습니다.
다음 포스팅에서는 [ HTML ] 웹 문서 '이미지 삽입하기'에 대해 알아보겠습니다.
❤긴 글 읽어주셔서 감사드립니다❤
'웹개발 > 웹 개발[프런트엔드-VSCode]' 카테고리의 다른 글
| 프런트엔드 [ HTML 웹 문서 ] 오디오/비디오 & 하이퍼링크 삽입하기 (2) | 2022.12.22 |
|---|---|
| 프런트엔드 [ HTML 웹 문서 ] 이미지 삽입하기 (0) | 2022.12.22 |
| 프런트엔드 [ HTML 웹 문서 ] 목록 만들기 (0) | 2022.12.21 |
| 프런트엔드 [ HTML 웹 문서 ] 텍스트 태그 (2) | 2022.12.21 |
| 프런트엔드 [ HTML 웹 문서 ] 기본 구조 & 시맨틱 구조 (0) | 2022.12.21 |