[ 생활코딩 ] 주요태그 - 표 - table

주요태그 - 표 - table

table 태그

- (Exel 같이) 구조화된 정보를 표현하고자 씁니다.
- 과거에는 레이아웃을 만들 때 이용하기도 하였습니다.
- 등장시기 : HTML2
- 테이블을 만들고 싶은 전체 행을 <table> 태그로 감싸줍니다.
- <tr>, </tr> 태그로 행을 묶어줍니다.
- 테두리를 주고 싶을 때는 border을 이용합니다.

table의 결과화면과 코딩화면 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/10949 )

주요태그 - 표2: 구조

테이블을 좀 더 구조화하는 법 (해도 되지만 안해도 됨)

• <thead> : 표의 맨 위에 위치합니다.
• <th> : thead 안에 위치합니다. 맨 위의 중요한 행을 명시하고 싶을 때 표현합니다. td 태그 대신에 사용합니다.
• <tbody> : 표의 중간이 위치합니다.
• <thead> : 코딩 한 부분이 어디든 (결과화면의)표 상에서 가장 아래쪽 위치로 자동으로 내려갑니다.

테이블을 좀 더 구조화하는 법 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/10949 )

주요태그 - 표3: 병합

테이블을 병합하는 법

 

rowspan : 행을 합칠 때

• 두 개의 행을 하나로 합치고 싶을 때 : 병합하고자 하는 부분의 첫 번째 부분에다가 <td rowspan="2">이라는 속성을 추가해줍니다. 그 밑의 부분은 지워줍니다.

두 개의 행을 하나로 합치고 싶을 때 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/10949 )

 

colspan : 열을 합칠 때

• 세 개의 열을 하나로 합치고 싶을 때 : 병합하고자 하는 부분의 첫 번째 부분에다가 <td colspan="3">이라는 속성을 추가해줍니다. 그 뒤의 부분은 지워줍니다.

세 개의 열을 하나로 합치고 싶을 때 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/10949 )