(CSS) table 표 만들기 (2019/11/3)

-HTML

  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>

table

표의 최상위 부모는 table태그이다.

talbe태그 안에 tr태그와 td태그를 넣는다.

 

tr

가로줄을 의미한다. 위 코드에는 tr이 2개가 있으니 가로줄 2줄이 생긴다.

 

td

세로줄을 의미한다. 각 tr에 td가 3개가 있으니 가로줄(tr)에 3개의 칸(td)이 생긴다.

html로 구조는 잡았으나 아직 css로 border를 넣지않아 표의 모습은 아니다.

html코드 구현 화면

 

 

-CSS

table{
  border-collapse: collapse;
}

tr,
td{
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

border-collapse: collapse

table에 border-collapes: collapse를 하지 않으면 tr,td에 준 border가 두줄나온다.

(좌)border-collapse :  collapse 사용 (우)border-collapse :  collapse 안함

 

tr,

td{

  width: 100px;

  height: 100px;

  border: 1px solid black;

}

가로줄(tr), 세로칸(td)에게 border값을 준다. tr,td에게 border값을 줬기 때문에 굳이 table에 border값을 주지 않아도 표 전체에 border값이 들어간다. 

 

tr,td에 width값과 height값을 설정하여 크기조절을 한다.

table에도 width값과 height값을 설정 할 수 있다. table에 widht값과 height값을 설정하면

table의 전체의 크기 설정한다.