[HTML/CSS] create table !

border은 없지만 이런 모양의 table을 만드려면 table tag를 아래와 같이 이용하면 된다.

<table>
      <thead>
        <tr>
          <th>color</th>
          <th>size</th>
          <th>amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            pulple
          </td>
          <td>
            lg
          </td>
          <td>
            110
          </td>
        </tr>
        <tr>
          <td>yellow</td>
          <td>sm</td>
          <td>20</td>
        </tr>
      </tbody>
    </table>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  tr {
   이제 border 속성 추가 가능!
    border-bottom: 1px solid black;
  } 
}
</style>

참고블로그 출처

border 속성은 table tag에 기본적으로 상속되지 않기 때문에 border-collapse: collapse 속성을 사용하여 각 셀마다 구분되는 경계선이 빈공간을 없애준다.
collapse 속성 값이 있어야 tr, th tag의 border 속성 디자인이 알맞게 적용되기 때문에 tr, th tag에 border가 있다면 꼭 넣어줘야 한다.