웹 기초 - table 태그

table 태그

• 위 사진처럼 나오게 구현을 해보자.
• table 태그를 사용하기, 안에 있는 콘텐츠들을 만들기

HTML
<table border="1">
  <tr>
    <th>교시/요일</th>
    <th>월</th>
    <th>화</th>
    <th>수</th>
  </tr>
  <tr>
    <th>1교시</th>
    <td>국어</td>
    <td>수학</td>
    <td>일본어</td>
  </tr>
  <tr>
    <th>2교시</th>
    <td>영어</td>
    <td>국사</td>
    <td>음악</td>
  </tr>
</table>

• 이렇게 하면 위 사진처럼 나오게 된다.

• table : 표를 생성
• table - border : 테이블 테두리
• th : 표 제목
• tr : 가로줄
• td : 셀을 만드는 역할

---

• 여기서 끝나는게 아니라, 표의 여백을 없애고 싶은데 어떻게 하면 여백을 없앨 수 있을까?

CSS
table,tr,td {
 /*  표의 기본값  */
 border-collapse: separate;
 /* 표의 여백 없애기 */
 border-collapse: collapse;
}

• CSS에 위처럼 구현하면,

• 이처럼 표의 여백이 사라지게 된다.

• border-collapse : 테이블(table) 셀의 테두리(border)를 서로 합칠지, 분리할지를 지정

  • separate(분리된 테두리 표) : 테이블의 각 셀이 개별적으로 테두리를 유지하도록 분리해서 표시한다.(기본값)

• collapse(상쇄된 테두리 표) : 테이블 셀 간의 테두리를 하나로 합쳐 표시한다.