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

피부관리 초보가 알아야할 것

난 지금껏 로션도 안바르고 선크림도 안바르던 사내였음. 하지만 시간도 남고 하다보니 피부관리에 관심이 생겼음. 피부에…

6일 ago

여드름, 턱드름, 화농성, 민감성, 예민한 피부 해결방법 알려줄테니 들어오셈

어찌보면 간단함 아래에 알려주는 돈 안들고, 지속가능한 것부터 실행해보셈 1.클렌징폼 안쓰기 2.세안은 클렌징밀크로만 하기 3.아침세안은…

1주 ago

남자가 연락안한다고 보채면 안되는 이유 연락안하는 남자

여자는 남자가 연락을 잘 안한다고 보채면 안된다. 당연히 연애초반에는 연락이 잘 안되긴 힘들다. 서로 텐션이…

4주 ago

남자는 외모로 여자를 꼬실 수 없을정도가 적당한것 같다 25.4.1

여자가 남자를 조심해야하듯 남자 역시 여자를 조심해야한다. 요즘은 성형이 많은 시대라 예쁜여자, 잘생긴 남자가 엄청…

4주 ago

너의 이야기를 진지하게 듣지 못했다 25.3.28

미안하다. 너의 고민, 마음속에 있던 이야기를 꺼냈는데 나는 진지하게 듣지 못했다. 진지하게 너에 대해 알아보려고…

1개월 ago

피부과 관리 시술 2주차 (총12주 프로그램)

1주차에는 레이저토닝을 했었다. 수염제모 프로그램도 같이 해서 이것도 1주차에 하긴 했음. 드디어 2주차가 됐는데 이번에는…

1개월 ago