티스토리 뷰

HTML

table

baegofda_ 2021. 8. 16. 18:39

* table

  • 엑셀과같은 표 형식을 만드는 태그
  • table, tr, th, td로 구성된다.
  • tr : 테이블 세로줄을 의미한다.
  • th : 타이틀을 명시할때 사용한다.
  • td : 테이블 한셀의 데이터를 명시한다.
  • rowspan과 colspan을 이용하여 셀병합을 한다.
  • scope attribute를 사용하여 row, col value를 사용하여 명확히 명시 할 수 있다.
  • <th scope="row"></th>,<th scope="col"></th>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>table</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>

    <body>
        <form action="" method="POST">
            <table>
                <tr>
                    <th></th>
                    <th>월</th>
                    <th>화</th>
                    <th>수</th>
                    <th>목</th>
                    <th>금</th>
                </tr>
                <tr>
                    <th>1교시</th>
                    <td rowspan="2">HTML</td>
                    <td rowspan="2">CSS</td>
                    <td>Web</td>
                    <td rowspan="3">MySQL</td>
                    <td rowspan="3">node.js</td>
                </tr>
                <tr>
                    <th>2교시</th>
                    <td rowspan="2">HTML</td>
                </tr>
                <tr>
                    <th>3교시</th>
                    <td>Web의 역사</td>
                    <td>Web의 역사</td>
                </tr>
                <tr>
                    <th colspan="6">점심시간</th>
                </tr>
                <tr>
                    <th>4교시</th>
                    <td>CSS</td>
                    <td rowspan="3">node.js</td>
                    <td rowspan="3">컴퓨터 공학이론</td>
                    <td rowspan="3">Javascript</td>
                    <td>Javascript</td>
                </tr>
                <tr>
                    <th>5교시</th>
                    <td rowspan="2">MySQL</td>

                    <td rowspan="2">컴퓨터 공학이론</td>
                </tr>
                <tr>
                    <th>6교시</th>
                </tr>
            </table>
        </form>
    </body>
</html>

저작자표시

'HTML' 카테고리의 다른 글

기타 etc.. (abbr, address, pre)  (0) 2021.08.16
미디어파일 video & audio & iframe  (0) 2021.08.16
Form - button  (0) 2021.08.16
Form - textarea  (0) 2021.08.16
Form - select & option  (0) 2021.08.16
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함