지옥의< table> 행열행열...

HTML 태그들 중 가장 난이도 높았던 게 있다면...?

바로 <table> 태그다. (개인적인 이해도입니다 🥲)

 

그래서 엑셀도 안좋아한다ㅋ.ㅋ

그도 그럴 것이 행열로 가득 찬 모니터 화면을 보고 있자면 현기증이 난다...;

 

그것과 비슷한, 아니 거의 똑같은 모습을 구현할 수 있는 태그가 바로 <table> !

이젠 싫다고 피할 수 없게 됐으므로... 하나하나 차근차근 이해해보기로 했다.

개인적으로 공부한 내용을 정리한 게시물입니다.
부정확한 정보가 있을 수 있습니다. 오류 발견 시 피드백 부탁드려요 !

---

어디에 사용되는가?

• <table>  태그는 말 그대로 테이블을 만들 때 사용된다.
• 표의 형태를 갖추고 있으며 그 안에는 제목(caption) 과 행(tr),  열(col), 셀(td),  셀의 제목(th) 을 자식 요소로 가지고 있다.

 

<table> 태그의 종류들

<caption>

• 테이블의 제목이나 설명을 기입할 때 사용한다.
• <caption> 을 사용할 땐 <table> 의 첫 번째 자식 요소로 사용해야 한다.
• 자동으로 중앙 정렬이 된다.

<tr> , <td> , <th>

• <tr> 테이블의 행을 만드는 태그
• <td> 태그는 <tr>로 만든 행을 열로 나눌 때 사용
• <th> 행, 열의 제목을 나타낸다. 자동으로 글씨를 굵게, 가운데 정렬되어 보여진다.

<thead>, <tbody>, <tfoot>

• 표의 구조를 담당하는 태그들
• 각각 머리글, 본문, 바닥 글을 의미한다.
• 테이블의 내용이 많아질 때 사용하며 레이아웃에 영향을 미치지 않는다. (단, CSS로 스타일링은 가능!)
• 구조를 담당하는 태그들은 생략도 가능한데 사용할 경우 구조 태그 안에 표의 구성 태그들을 넣어줘야 한다.

<table>
        <thead>
            <tr>
                <td>머리글</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>본문</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>바닥글</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>

 

 

<colspan>, <rowspan>

• <td>, <th> 태그에 <colspan> 속성을 사용하면 열 방향으로 셀을 병합할 수 있다.
• <rowspan>  속성은 행간 병합.
• 숫자로 병합하고 싶은 셀의 개수를 지정한다.

기존 셀 모양.

<colspan> 열과 열의 병합

 <th colspan="2"></th>

<rowspan> 행과 행의 병합

<td rowspan="2"></td>

 

 

<colgroup>, <col>

• 열을 하나로 묶어주는 기능! 특정 열에 배경색 또는 너비를 지정해 줄 때 이 기능을 통해 간편히 할 수 있다.
• 열을 선택하는 것은 해당 열에 포함되는 모든 셀을 선택하는 것과 같다.
• <thead>, <tbody>, <tfoot> 를 사용할 때도 모든 열을 묶는다.

- <colgroup> : 표의 열을 묶어주는 기능, 생략도 가능하다.

- <col> : 테이블 안의 열을 의미. 열의 개수만큼 작성 가능하고, <colgroup> 태그 안에 넣어주는 것이 좋다. 특징으로는 따로 닫는 태그가 없다는 것! span 속성을 이용해서 또다시 열 그룹을 묶을 수도 있다.

<table>
        <caption>1</caption>
        <colgroup>
            <col class="SUN" />
            <col class="MON" />
            <col class="TUE" />
            <col class="WED" />
            <col class="THU" />
            <col class="FRI" />
            <col class="SAT" />
        </colgroup>
        <thead>
            <tr>
                <th scope="col">SUN</th>
                <th scope="col">MON</th>
                <th scope="col">TUE</th>
                <th scope="col">WED</th>
                <th scope="col">THU</th>
                <th scope="col">FRI</th>
                <th scope="col">SAT</th>
            </tr>
        </thead>
  ... 생략
</table>

이런 식으로 요일을 colgroup 으로 각각 열로 묶을 수 있다.

 

<scope>

<th>요소에 scope속성을 사용해 <td> 와 연결관계를 설정할 수 있다.

디자인에는 영향을 미치지 않지만 스크린리더와 같은 기계로 읽게 될 경우 표의 설명이 되기 때문에 넣어주는 게 좋다.

 

<colgroup> 과 CSS 와의 관계?

과제를 진행하던 중 알게 된 부분.

colgroup으로 열을 묶는 이유 중에 "디자인을 편리하게 하기 위함"이 있는데 알고 보니 디자인이 적용되는 부분이 한정적이었다...

 

col부분에 클래스를 주고 color: red; 를 적용하려 했으나 전혀 먹히질 않았고 background-color: red; 는 잘 적용되는 모습!!

이유가 무엇인지 열심히 구글링을 하다 보니

<col> 에 적용할 수 있는 css는 border, background, width로 한정된다고 한다.

개별 컬러를 적용하기 위해 행과 열 태그에 직접 클래스를 주는 방법으로 해결했다.

---

+ 추가 )

더 쉽고 좋은 방법을 발견! 

CSS selector 를 이용해서 td:nth-child(1), th:nth-child(1) 를 사용해 색상을 변경할 수 있다.

모든 열의 첫 번째 자식이므로 nth-child(n) 선택자가 더 올바른 사용으로 보인다.