[HTML] 표 만드는 태그& 이미지

🔶 표를 만드는 태그

<table> /<table> 

 - border를 설정해주지 않으면 선이 나타나지 않음

 

<tr>/<tr> - 행 row 

 - 위의 사진에서는 초록 박스

<th> 셀 제목 ( row / col 상관없이 ) 

 - 위의 사진에서는 [ "이름" , "주소" , "연락처", "자기소개" ]

<td> - 셀 ( cell )

- 위의 사진에서는 모든 빈칸

 

[ th , td 속성 - colspan/rowspan ]

✔️사용 방법 예시 : <th colspan="2" rowspan="2"> 구분 </th>

<colspan>
 - column 합칠 때 사용
<rowspan> 
 - row 합칠 때 사용

 

<caption>

 - 표 제목으로 [ 위쪽 중앙 ]에 표시 
 - 아래의 그림처럼 나옴 

<figure>, <figcaption> 

 - 표 제목으로 figcaption의 위치에 따라 위나 아래에 제목 표시

<figcaption>이 table 위에 있을 때

<figcaption>이 table 아래에 있을 때

[ 표 구조 정의 ]

 

<thead - 제목>, <tbody - 내용> , <tfoot - 요약>

- 시각 장애인도 화면 판독기를 통해 표의 구조를 쉽게 이해 가능

- 표의 내용이 길어질 경우 자바 스크립트를 이용하면 제목과 바닥 부분을 고정하면 본문만 스크롤되도록 할 수 있음

아래와 같이 스타일도 지정해줄 수 있음.

주황박스는 <thead> 흰색은 <tbody>

 

<col>, <colgroup>

 - column끼리 묶어서 스타일 지정 가능 
 - <caption> 태그 뒤에 <tr><td> 태그 전에 사용  ➡️  caption▶️ colgroup, col ▶️ tr , th, td 순
 - colgroup 태그 안 <col> 개수 + 단독 <col> 개수 = 표의 열 개수
 <col>
     - 닫는 태그 없음 
     - span 속성으로 여러 column 묶어서 사용 가능 

---

<img> 태그

src 속성

- src = "url" 
- 이미지 파일 경로
- html 기준으로 이미지 경로 지정 ➡️ html과 이미지가 같은 폴더에 있다면 이미지 파일 이름만 적음
- 웹 사이트에 있는 이미지의 주소로도 사용 가능 ➡️ http:// 포함한 주소

alt 속성

- alt = " "
- 이미지를 설명하는 대체 텍스트
- 화면 낭독기에서 이미지 대신 대체 텍스트를 읽어줌 

width, height 속성

- 이미지 크기 조정
- 이 속성을 사용하지 않으면 원래 이미지 크기대로 표시
- 이 속성을 사용하더라도 이미지의 용량은 그대로 화면에 표시하는 이미지 크기만 조정

 

[ <figure>, <figcaption> - 이미지 설명글 붙이기 ]

<figure> - 설명글을 붙일 대상 지정

<figcation> - 이미지를 설명하는 텍스트  ➡️ <table> 태그에서 썼던 것처럼 <figure> 태그 안에 쓰면 됨