[HTML] table | inline vs block

FE/HTML,CSS

[HTML] table | inline vs block

mandelina 2022. 4. 5. 16:55

HTML - Tabular data

🚀 <table> : 테이블 생성시 사용

<caption> : 테이블의 제목이나 설명을 의미 / table요소의 첫번째 자식으로 사용해야한다!!

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

이달의 책 판매량
구분	이름	판매량

🚀 <thead> , <tbody>,<tfoot>

각각 머리글, 본문, 바닥 글을 의미한다.

테이블의 내용이 많을때 테이블의 구역별로 나누는 요소로 사용한다.

이 요소들은 레이아웃에 영향을 미치진 않으나 css를 통해 디자인 스타일을 지정할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <style>
      table,
      tr,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>구분</th>
          <th>이름</th>
          <th>판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>해리포터</td>
          <td>100</td>
        </tr>
        <tr>
          <td>2</td>
          <td>헝거게임</td>
          <td>200</td>
        </tr>
        <tr>
          <td>3</td>
          <td>반지의제왕</td>
          <td>300</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">총 판매량</td>
          <td>600</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

- colspan : 열과 열을 병합한다 (보이는것 : row병합)

- rowspan : 행과 행을 병합한다 (보이는것 : col병합)

Page Title

구분	이름	판매량
1	해리포터	100
2	헝거게임	200
3	반지의제왕	300
총 판매량		600

🚀 <tr> <th> <td>

tr : table row / th : table header / td : table data

의미를 생각하며 쓰면 될 것 같다.

<td>태그는 < tr>태그로 나눈 행에서 셀을 분리할때 사용한다.

<th>태그는 행,열의 머리말을 나타낼 때 사용한다.

<table>
		<caption> 이달의 책 판매량 </caption>
    <tr>
        <th>구분</th>
        <th>이름</th>
        <th>판매량</th>
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터</td>
        <td>100</td>
    </tr>
</table>

이달의 책 판매량
구분	이름	판매량
1	해리포터	100

* 구분,이름,판매량은 헤더이고 1,해리포터,100은 data이다.

🚀 <colgroup> , <col>

<colgroup>과 그 자식요소인<col>를 통해 한 열에 공통적인 스타일을 주는것도 가능하다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Page Title</title>
    <style>
      table {
        width: 100%;
      }
      table,
      tr,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      .구분 {
        width: 20%;
      }
      .이름 {
        width: 50%;
      }
      .판매량 {
        width: 20%;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        이 table은 영국에서 최초로 시작되어 일년에 한바퀴 돌면서...
      </caption>
      <colgroup>
        <col class="구분" />
        <col class="이름" />
        <col class="판매량" />
      </colgroup>
      <thead>
        <tr>
          <th>구분</th>
          <th>이름</th>
          <th>판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>해리포터</td>
          <td>100</td>
        </tr>
        <tr>
          <td>2</td>
          <td>헝거게임</td>
          <td>200</td>
        </tr>
        <tr>
          <td>3</td>
          <td>반지의제왕</td>
          <td>300</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">총 판매량</td>
          <td>600</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Page Title

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

🚀 scope - <th>요소의 속성

속성을 통해 <td>와의 연결 관계를 설정 할 수 있다.

<!-- 직접 구현하여 결과를 확인해 보세요 -->
<table>
  <caption>요일별 급식 만족도</caption>
  <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>
  <tfoot>
    <tr>
      <th scope="row">만족도</th>
      <td>3/5</td>
      <td>4/5</td>
      <td>1/5</td>
      <td>5/5</td>
      <td>2/5</td>
      <td>3/5</td>
    </tr>
  </tfoot>
</table>

요일별 급식 만족도
	월요일	화요일	수요일	목요일	금요일	토요일
메뉴	돈까스	짜장면	볶음밥	해물라면	잔치국수	떡볶이
만족도	3/5	4/5	1/5	5/5	2/5	3/5

*주의 : row와 col을 바꾼다고해서 표가 바뀌는것은 아니다. (브라우저에 알리는 용도이다 . )

* 웹접근성, 웹표준에 적합한 코드이다.

🚀 inline vs block

inline	block
컨텐츠 부분만큼만 영역을 차지한다.	한줄을 모두 차지한다.
높이와 너비가 조절이 불가능하다. (css로 적용안됨)	높이,너비 모두 조정 가능하다.

Q. 만약 inline요소처럼 가로로 배치되면서 높이와 너비를 설정해주고 싶다면?

A. inline-block 사용!

🔥 회고

- 드디어 html 진도가 끝이 났다. 계속 글에 쓰는것 같지만 시맨틱한 코드작성, 웹접근성, 웹표준을 잘 지키며 코드를 짜는것을 잊지말자!

(결과물보다 코드를 얼마나 시맨틱하게 짯느냐!)

- css도 조금 진도를 나갔지만 그건 내일 정리하는걸로 해야지. .

(아주 기본적인 내용이였다.)

- 제코베 이호준 강사님께서 인프런 쿠폰을 뿌려주셨다 . . . 코딩인터뷰,코테,슬랙,노션템플릿까지 ..!!

물론 모두 듣진 못할 것 같지만 뭔가 든든해진 이 기분 .. 주말을 활용해서 꼭 들어야겠다.

- 요즘 FE개발자 채용은 코딩테스트보다 SPA구현이 추세라고 한다.

코딩테스트에 너무 얽매이지 말고 구현능력에도 집중해야겠다.

'FE > HTML,CSS' 카테고리의 다른 글

[CSS ] 마진 겹침 현상 \| inline \| block (2)	2022.04.06
[css] reset css \| Vendor-Prefix \| Selector우선순위 (4)	2022.04.06
[HTML] form태그 (0)	2022.04.05
[HTML] Text-level semantics (0)	2022.03.30
[HTML] Grouping Content \| HTML Living Standard (0)	2022.03.29

현재글[HTML] table | inline vs block

Hello_coding

useEffect, node.js, 프론트엔드스쿨2기, react, 코딩테스트, 프론트엔드스쿨, 멋쟁이사자처럼, 자바스크립트, JS, HTML, 프론트엔드, TypeScript, 리액트, 프로그래머스, http, spa, 리덕스, CSS, TpyeScript, 리덕스툴킷,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Hello_coding