[day-22] table

Joohyung Park·2024년 1월 29일

[모두연] 오름캠프

목록 보기

30/95

table

테이블을 생성할 때 사용한다.

<table>
</table>

위 표를 보면 각 태그의 역할을 자세히 알 수 있다.

tr, th, td

tr : table row(행)
th : table header, 테이블의 행, 열의 제목
td : table data. 셀 내용

caption

테이블 전체의 제목이나 설명을 적는다. 선택적 요소.

thead, tbody, tfoot

테이블의 머리글, 본문, 바닥글을 의미한다. 구역을 나누는 요소로 필수 요소는 아니지만 가독성을 위해 사용하면 좋다.

colspan, rowspan

셀 병합 속성이다. colspan은 열기준 병합(좌->우로 병합)이며 rowspan은 행기준 병합(상->하로 병합)이다.

<tbody>
      <tr>
        <td colspan="2" rowspan="2">&nbsp;</td>
        <th colspan="3">Clothes</th>
        <th colspan="2">Accessories</th>
      </tr>
</tbody>

위와 같은 형태로 사용한다. colspan="2"라면 2칸을 합친다.

colgroup

테이블에서 서식 지정을 위해 열 그룹을 만들 때 사용한다.

col

colgroup 내부에 포함되며 테이블 열을 하나 이상 묶을 때 사용한다. 선택적 요소

<table>
    <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>
    <tr>
        <td>&nbsp;</td>
        <th scope="col">Batman</th>
        <th scope="col">Robin</th>
        <th scope="col">The Flash</th>
        <th scope="col">Kid Flash</th>
    </tr>
    <tr>
        <th scope="row">Skill</th>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>

실습 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <th>월요일</th>
            </tr>
            <tr>
                <td>짜장면</td>
            </tr>
            <tr>
                <td>육계장</td>
            </tr>
        </tbody>
        
    </table>
    <br>
    <br>
    <br>
    <form>
        <fieldset>
            <legend>HTML 스터디가 망해가는 이유</legend>
            <label>
                노잼이다
                <input type="radio" name="reasome">
            </label>
            <label>
                너무 어렵다
                <input type="radio" name="reasome">
            </label>
            <label>
                주말에 뭐하는 짓이냐
                <input type="radio" name="reasome">
            </label>
            <br>
            <label for="">만약 다른 스터디를 하고 싶다면?</label>
            <br>
            <select name="lang">
                <option value="javascript">자바스크립트</option>
                <option value="python">파이썬</option>
                <option value="java">자바</option>
            </select>
            <br>
            <label for="lastWord">마지막으로 하고싶은 말</label>
            <br>
            <textarea name="lastWord" id="lastWord" cols="30" rows="2"></textarea>
            <br>
            <button type="submit">전송하기</button>
            <button type="reset">다시 작성하기</button>
        </fieldset>
    </form>
</body>
</html>

간단한 테이블과 폼을 만들어 보는 예제이다. 테이블은 table, 폼을 위한 틀은 form, 눈에 보이는 박스는 fieldset, 택1 체크 리스트는 radio, 드롭다운은 select, 텍스트박스는 textarea, 버튼은 button, 줄바꿈은 br 태그로 구현하였다.

실습 2

<body>
    <table>
        <caption>3-1반 역사 성적표</caption>
        <tfoot>
            <tr>
                <td colspan="3" class="text-center">평균</td>
                <td>84점</td>
            </tr>
        </tfoot>
        <thead>
            <tr>
                <th>이름</th>
                <th>반</th>
                <th>번호</th>
                <th>점수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>재현</td>
                <td rowspan="3">1반</td>
                <td>1번</td>
                <td>70점</td>
            </tr>
            <tr>
                <td>재현</td>
                <!-- <td>1반</td> -->
                <td>1번</td>
                <td>70점</td>
            </tr>
            <tr>
                <td>재현</td>
                <!-- <td>1반</td> -->
                <td>1번</td>
                <td>70점</td>
            </tr>
        </tbody>
    </table>
</body>

가독성을 위하여 body부분만 짤라 왔다. caption으로 제목을 설정하고 tfoot으로 가장 하단부의 내용을 정의했다. 하단부의 colspan = "3"으로 열기준 3칸 병합하였다.

이후 테이블의 헤드 부분은 thead 태그로 가독성을 위해 선언하였으며 th로 내용을 채웠다.

마찬가지로 가독성을 위해 thead 태그를 사용하였으며 이름열부터 차근차근 채워주었다.

피드백

이론만 듣는 것은 재미없다.. 라고 느꼈었는데 직접 해보니까 신기하고 생각보다 재밌었다. 강사님도 되게 좋으신분 같기도 하고 그렇다. 이제 거의 1달? 정도 수업을 들었는데 같이 수업듣는 수강생분들도 열심히 하시고 강사님이나 멘토분들도 잘 알려주셔서 만족하며 공부하고 있는 중이다. 백엔드 과정인지라 프론트 부분이 조금인것은 아쉽다.