실습) table 게시판 만들기

 

결과물

 

 

---

위의 표 만든 코드↓

 <table>
      <colgroup>
        <col width="8%"/>
        <col width="*"/>  <!--*를 넣어주면 다른 값들을 제외한 나머지 값을 여기에 넣어주겠다는 뜻이다.-->
        <col width="8"/>
        <col width="13%"/>
        <col width="8%"/>
      </colgroup>
      <!-- 표 제목 영역 -->
      <thead>
        <tr>
          <th>NO</th>
          <th>SUBJECT</th>
          <th>NAME</th>
          <th>DATE</th>
          <th>HIT</th>
        </tr>
        <!-- 표 바디부분 -->
        <tbody>
            <tr>
                <td>공지</td>
                <td>2024년 2분기 적립금 소멸안내</td>
                <td>YYYY</td>
                <td>2024-06-17</td>
                <td>11</td>
            </tr>
            <tr>
                <td>공지</td>
                <td>2024년 1분기 적립금 소멸안내</td>
                <td>YYYY</td>
                <td>2024-03-05</td>
                <td>11</td>
            </tr>
            <tr>
                <td>공지</td>
                <td>2023년 2분기 적립금 소멸안내</td>
                <td>YYYY</td>
                <td>2023-11-17</td>
                <td>11</td>
            </tr>
            <tr>
                <td>공지</td>
                <td>2023년 1분기 적립금 소멸안내</td>
                <td>YYYY</td>
                <td>2023-03-17</td>
                <td>11</td>
            </tr>
            <tr>
                <td>공지</td>
                <td>2022년 2분기 적립금 소멸안내</td>
                <td>YYYY</td>
                <td>2022-06-17</td>
                <td>11</td>
            </tr>
            <tr>
                <td>공지</td>
                <td>2022년 1분기 적립금 소멸안내</td>
                <td>YYYY</td>
                <td>2022-05-17</td>
                <td>11</td>
            </tr>
            <tr>
                <td>5</td>
                <td>배송지연 안내</td>
                <td>YYYY</td>
                <td>2024-06-17</td>
                <td>11</td>
            </tr>
            <tr>
                <td>4</td>
                <td>신규회원 안내</td>
                <td>YYYY</td>
                <td>2024-06-17</td>
                <td>11</td>
            </tr>
            <tr>
                <td>3</td>
                <td>교환/ 반품 안내</td>
                <td>YYYY</td>
                <td>2024-06-17</td>
                <td>11</td>
            </tr>
            <tr>
                <td>2</td>
                <td>리뷰 적립금 안내</td>
                <td>YYYY</td>
                <td>2024-06-17</td>
                <td>11</td>
            </tr>
        </tbody>
      </thead>
    </table>
  </body>
</html>

html

<colgroup> 과 <col/>로 한줄씩 넓이를 설정해준다. 이때 각각 넣어주고 남은 부분에는 *를 넣어주면 다른 값을 제외한 나머지 값을 계산해서 처리해준다.

============================

css

표는 브라우저의 70%만 차지시키고 싶기에 width를 70%으로 해주고 높이는 아직 얼마나 될지 모르니 fit-content로 해둔다. 가운데에 보내주면서 위 아래 마진을 50px씩 주었다.

border-collapse: collapse;를 적용해야 아래 css 테두리등을 적용할 수 있다. 

( * border-collapse: collapse;는 table 태그에 줘야한다* )

thead에 위아래 border를 적용해준다

thead / tbody 에 width랑 height 주는 거 잊지말기