Categories: IT

table tag(테이블 태그) 설명 행,열 병합 방법-테그 이해하기

html을 공부하면서 처음 본 내용이 있어서 적어보려고하는데요. 이 내용은 유튜브 생활코딩에서 봤고 설명을 아주 잘해주시니 공부하시는 분들은 보시면 도움이 많이 될 것 같아요.

table태그 설명

우리들이 기본적으로 생각하는 테이블의 모습은 탁자를 그리는 분들도 있지만 여기에선 표를 말하는데요. 여러가지 모양의 선으로 각 셀을 나누고 그 안에 데이터들을 표시합니다. 엑셀이 대표적인 표의 형태를 갖고 있죠. 각 태그를 간단히 설명하고 아래에서 그림으로도 설명해볼께요.

  • <td></td> – 가장 기본적인 셀을 나타내는 단위입니다.
  • <tr></tr> – td태그를 묶어서 하나의 행으로 표시를 해줍니다.
  • <thead></thead> – 태이블 태그에서 가장 위에 오는 데이터들입니다. 테이블의 머리에 해당되죠.
  • <th></th> – thead 태그에 오는 데이터 셀입니다. 각 열의 제목이라고 보면 되겠네요.
  • <tbody></tbody> – 몸통이라는 뜻으로 테이블에서 각 항목에 대한 값들입니다.
  • <tfoot></tfoot> – 발이라는 뜻으로 테이블의 맨 아래에 오며 합계, 평균 등을 나타낼 수 있죠.


위의 사진과 같은 테이블을 표현하려면 아래처럼 html 코딩을 하게 됩니다.

HTML TABLE태그 열병합과 행병합

병합이 이루어진 곳은 주소의 청주에서 첫째행과 둘째행이 병합이 됐고 합계라는 데이터로 첫째열, 둘째열, 셋째열이 병합됐습니다. 코드를 보면 행병합이 이뤄질 때는 rowspan이라는 속성을 사용했고, 열병합을 할 땐 colspan 속성을 사용했습니다. 그리고 병합할 셀만큼 그 뒤에 숫자를 써줬고 그 아래에 있는 최유빈 행의 자리에는 <tr>청주</tr>을 삭제했음을 볼 수 있습니다.
 
 

DDable

Share
Published by
DDable
Tags: htmltabletag

Recent Posts

파타고니아 모자 잃어버리고 똑같은거 다시 샀음

내가 좋아하는 파타고니아 모자임 이름은 스크랩 에브리데이 캡(33580P5)인데 내가 갖고 있던건 겨자색이었음. 이 모자의 특징은…

3일 ago

사주 상담 받았던 것 복습하고 기록해놓기

하모웨이 하병열선생님께 받았던 사주에 대해 복습하고 기록해보려고 한다. 내 사주는 '토'가 4개로 상당히 많음. 무토일간라고…

4주 ago

250708 사주봤는데 재밌네

하모웨이라는 곳에서 사주상담을 받아봄(https://www.hamoway.co.kr/reviews) 20대에 사주까페에서 들어본 뒤에 엄청 오랜만이었다. 그 당시 들었던 말 중에…

4주 ago

250707 돈이 부족해

7월중순에 돈이 들어갈 일이 있다. 재개발로 이주를 하면서 세입자에게 돈을 줘야하는 것 때문에 5천정도 필요하다.…

4주 ago

250706 이재명 무섭다

아직까지 내가 받은 피해는 없다. 하지만 무슨 짓을 할지 모른다는게 가장 큰 공포임 물론 이…

4주 ago

250611 일기 파일이 없다

매일 쓴 것은 아니지만 간혹 썼던 일기가 사라졌다. 컴퓨터 워드파일에 저장해뒀는데 갑자기 사라졌다. 너무 안써서…

2개월 ago