[HTML/CSS] table 태그 기본 속성

HTMl table 태그를 알아보자

table 태그에서 행은 tr 태그, 열은 td 태그에 넣는다.

이중 열 제목은 thead 태그안에 th태그로 작성하며, 데이터는 tbody 태그안에 담아서 표현한다.

즉 표를 그릴때 하나의 tr태그 안에 여러개의 td 태그를 넣어 구현한다 아래 예시를 보자

...HTML code
    <!-- <thead></thead> 제목행 -->
    <!-- <tbody></tbody> 일반행 -->
    
 <!-- 행을 태그를 먼저 만들고 그안에 열을 만들어야함  -->
<table>
    <thead>
        <!-- 제목 행 -->
        <tr>
          <th>열1</th>
          <th>열2</th>
          <th>열3</th>
        </tr>
    </thead>

    <tbody>
        <!-- 첫번째 행 -->
        <tr>
            <td>열1 데이터1</td>
            <td>열2 데이터1</td>
            <td>열3 데이터1</td>
        </tr>

        <!-- 두번째 행 -->
        <tr>
            <td>열1 데이터2</td>
            <td>열2 데이터2</td>
            <td>열3 데이터2</td>
        </tr>
    </tbody>
</table>

결과

표가 만들어졌지만 뭔가 부족하다 열에 스타일링을 해보자

td,th 태그에 태두리를 그리고 둥글게 스타일리 해보았다.

td,th {
 border:1px solid black;
 border-radius: 5px;

 padding: 8px;
 text-align: center;
}

스타일링을 해보니 열과 행 사이에 빈공간이 있음을 알수있다.
이건 table 태그의 default 값이 열과 행을 분리하여 그렇다.

border-collapse: collapse;넣어 빈공간을 제거해보자.

...css
border-collapse: collapse;

이제 엑셀과 비슷한 모양이 되었다.

        <thead class="cart-thead">
            <tr>
                <th colspan="2">ITEM</th>
                <th>AMOUNT</th>
                <th>PRICE</th>
                <th>TOTAL</th>
            </tr>
        </thead>