03.HTML-Tabular Data

31838 단어 html멋사TILhtml

Tabular Data

1.<table>

: 테이블 형성 . 하나의 테이블 정의
컨테이너 요소로써그 내부에는 제목(caption)과 하나의 행(tr), 열(col) 그리고 셀(td)과 셀의 제목(th)이 자식으로 사용된다

  • 기본적으로 반응형!

1-1.<caption>

테이블의 제목이나 설명 , 테이블 첫번째 자식으로 사용해야한다 

<table>
		<caption> 이달의 책 판매량 </caption>
    <tr>
        <th>구분</th>
        <th>이름</th>
        <th>판매량</th>
    </tr>
</table>

1-2.<thead>, <tbody>, <tfoot>

  • 머리글
  • 본문
  • 바닥글

테이블의 크기는 자식컨텐츠에 달려있다. 

 <table>
    <caption></caption>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
  </table>

1-3.<tr>, <th>, <td>

  • <tr> : 테이블의 행을 나눌 때 사용
  • <td> : <tr> 태그로 나눈 행에서 셀을 분리 . table data
  • <th> : 태그는 행, 열의 머리말을 나타내는 데 사용. 글씨를 굵게, 가운데 정렬하여 보여준다. table heading
이달의 책 판매량
구분 이름 판매량
1 해리포터 100 
<table>
		<caption> 이달의 책 판매량 </caption>
    <tr>
        <th>구분</th>
        <th>이름</th>
        <th>판매량</th>
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터</td>
        <td>100</td>
    </tr>
</table>

2. table 속성

colspan, rowspan

colspan : 열간 병합
rowspan : 행간 병합

  • 행과 행을 병합하기 때문에 세로 방향으로 셀들을 병합
  • 병합하고 싶은 셀의 개수 지정이 가능하다
이달의 책 판매량
구분 이름
1 해리포터 100
1 해리포터2 
<table>
    <caption> 이달의 책 판매량 </caption>
    <tr>
        <th>구분</th>
        <th colspan="2">이름</th>
        <!-- <th>판매량</th> -->
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터</td>
        <td rowspan="2">100</td>
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터2</td>
        <!-- <td>100</td> -->
    </tr>
</table>
  • 이름으로 열병합
  • 판매량으로 행병합을 해주었다
  • rowspan colspan 둘 헷갈리는데 주의하자 !

<colgroup>, <col>

<col> 은 <colgroup> 의 자식요소이다

  • CSS 스타일링할때 많이 사용
  • 열을 늘리기위해 사용
  • 열의 개수와 col 개수와 맞춰줘야함
  • tr 태그엔 css 를 주기 애매하고 어려워서 colgroup으로 깔끔하게 묶어서 해주는 것 
<colgroup>
        <col class="구분" />
        <col class="이름" />
        <col class="판매량" />
</colgroup>

.구분 {
        width: 20%;
      }
      .이름 {
        width: 50%;
      }
      .판매량 {
        width: 20%;
Page Title
이 table은 영국에서 최초로 시작되어 일년에 한바퀴 돌면서...
구분 이름 판매량
1 해리포터 100
2 헝거게임 200
3 반지의제왕 300
총 판매량 600

scope

수평, 수직 테이블의 구현이 가능하다

  • th 요소에 사용해 td와의 연결관계 설정
  • row 행방향진행
  • col 열방향진행
  • 제목을 기준으로 한다!
요일별 급식 만족도
월요일 화요일 수요일 목요일 금요일 토요일
메뉴 돈까스 짜장면 볶음밥 해물라면 잔치국수 떡볶이
만족도 3/5 4/5 1/5 5/5 2/5 3/5 
<tbody>
    <tr>
      <th></th>
      <th scope="col">월요일</th>
      <th scope="col">화요일</th>
      <th scope="col">수요일</th>
      <th scope="col">목요일</th>
      <th scope="col">금요일</th>
      <th scope="col">토요일</th>
    </tr>      
    <tr>
      <th scope="row">메뉴</th>
      <td>돈까스</td>
      <td>짜장면</td>
      <td>볶음밥</td>
      <td>해물라면</td>
      <td>잔치국수</td>
      <td>떡볶이</td>
    </tr>
  </tbody>
  • 이런식으로 코드 작성

실습

테이블을 이용하여 아래 이미지 만들기

처음 코드를 작성할 때
나라이름을 적는 파트에서

⬇️ 방향으로 마크업을 했다 ,, 

 <tr>
     <th>Group A</th>
     <th>Group B</th>
     <th>Group C</th>
     <th>Group D</th>
   </tr>
   <tr>
     <td>카타르</td>
     <td>에콰도르</td>
     <td>세네갈</td>
     <td>네덜란드</td>
    </tr>
Group A Group B Group C Group D
카타르 에콰도르 세네갈 네덜란드
그랬드니 나의 예상과 다르게 세로로 안나오고 가로로만 나옴,,, 당연함 tr = table row 임

그래서 가로방향으로 다시 마크업을 해주었다 

<body>
<table>
  <caption>
    2022 카타르 월드컵
    <p>본선 조추첨 결과</p>
  </caption>
  <!-- 캡션 안에 p -->
 <tr>
   <th>Group A</th>
   <th>Group B</th>
   <th>Group C</th>
   <th>Group D</th>
 </tr>

 <!-- tr이 table row 니깐 가로로 적어주어야 한다  -->
 <tr>
   <td>카타르</td>
   <td>잉글랜드</td>
   <td>아르헨티나</td>
   <td>프랑스</td>
  </tr>
2022 카타르 월드컵

본선 조추첨 결과
Group A Group B Group C Group D
카타르 잉글랜드 아르헨티나 프랑스
에콰도르 이란 사우디아라비아 대륙 PO-1

가로로 쌓듯이 작성해야 원하는 테이블 모양을 만들 수 있다!!

[JAVA] SWEA 3131 - 100만 이하의 모든 소수
22.04.05[이론] 04.04 요약

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage