[HTML] Table 삽입하기 🐱‍🏍🐱‍🏍(+ caption, span 등)

목표: HTML문서에 Table을 삽입해보자

요약

1. 기본 스타일 테이블
2. 표 스타일 지정
3. 캡션 넣기

Source: https://www.codewall.co.uk

 

위에 그림에서 보이는 것처럼 

 

테이블 태그의 종류는

<table> </table>: table tag/elements

<tr> </tr>: table row

<td> </td>: table column

<th> </th>: table header

<caption> </caption>: caption

 

이게 기본임

 

1. 기본 스타일 테이블

 

기본스타일 테이블은 보시는 바와같이 좀.. 구리다 

2. 표 스타일 지정

header에 표 스타일을 지정해줄 수 있다.

아재력 상승 🐱‍🏍🐱‍🏍🐱‍🏍

 

아재력 상승 🐱‍🏍🐱‍🏍🐱‍🏍🐱‍🏍🐱‍🏍🐱‍🏍

 

 

     style="display:inline-block;width:740px;height:200px"
     data-ad-client="ca-pub-9512983930357661"
     data-ad-slot="5785466884">

3. 캡션 넣기

선택적이지만 caption 태그가 존재한다.

body >  table 태그 안에 넣어준다.

 

---

 

caption 스타일 지정

 

 

header > style 안에 넣어준다.

 

더 구리게 만들고 싶으면 아래 참고 사이트 고고

---

---

---

 

셀 넓이, 높이가 다른 표를 만들고 싶어: span

 

 

열(column)을 합치고 싶을 때: colspan

 

행(row)를 합치고 싶을 때: rowspan

 

 

---