[HTML] 표 만들기, 표 구조와 구성요소

리버 River 2024. 3. 25. 21:25

2024. 3. 25. 21:25

1. 표 만들기

🌻 표는 웹 페이지에서 자료를 정리할 때 자주 사용하는 요소

실제는 게시판이나 회원 가입 페이지의 레이아웃을 만드는데 주로 사용

1) 표 구성요소

🍯 표table는 행row과 열column 그리고 셀cell 로 이루어진다.

table 구조

- table > tr > td

table 관련태그

- table : table 전체를 감싸는 태그

- caption : 표에 제목을 붙일 때 <table> 태그 바로 다음에 사용. 표의 위쪽 중앙에 표시

- tr("table row") : 테이블의 행을 의미하는 태그. 자손으로 th나 td가 반드시 있어야 한다.
- td("table data") : 테이블의 일반 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다.
base style - 왼쪽정렬 (text-align:left)
- th("table header") : 테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다.
base style - 중앙정렬(text-align:center), 두껍게(font-weight:bold)

    <style>
        table {
            border: 2px solid red;
        }
        td,th {
            border: 2px solid black;
            width: 200px;
        }
    </style>
</head>
<body>
    <caption>표의 제목1</caption>
    <table>
        <!-- 행의 시작 -->
        <tr>
            <!-- 열의 시작 -->
            <th>제목1</th>
            <th>제목2</th>
        </tr>
        <!-- 행의 시작 -->
        <tr>
            <!-- 열의 시작 -->
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <!-- 행의 시작 -->
        <tr>
            <!-- 열의 시작 -->
            <td>내용3</td>
            <td>내용4</td>
        </tr>

</table>

colspan, rowspan

- 표를 만든 후 표의 행이나 열을 합치는 속성으로 셀을 만드는 <td>,<th> 태그에서 사용

🥕 colspan="합쳐지는 열의 개수" : 가로의 병합
🥕 rowspan="합쳐지는 행의 개수" : 세로의 병합

<head>
    <style>
        td, th {
            border: 2px solid black;
        }
    </style>
</head>
<body>
<!--colspan-->
<table>
    <caption>colspan</caption>
    <tr>
        <th colspan="2">코리아교육그룹</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

</body>

col, colgroup

- '특정 열'에 배경색을 넣거나 너비를 바꿀 때 사용. 반드시 <caption> 태그 다음에 써야 함

- <col> 태그는 열을 1개만 지정, <colgroup> 태그는 <col>태그를 2개 이상 묶어서 사용

- <colgroup> 태그 안에 표 전체 열 개수 만큼 <col> 태그를 작성해야 함

<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
  <col style="background-color:#eee;">
  <col>
  <col style="width:150px">
  <col style="width:150px">
</colgroup>

2) 표 구조

🍯 표의 구조는 head, body, foot 으로 구분

thead : 표의 제목 부분
tbody : 표의 본문 부분
tfoot : 표의 요약 부분

<head>
    <style>
        td, th {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <table>
        <caption>공지사항</caption>
        <!--표의 제목 부분-->
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>날짜</th>
        </tr>
        </thead>

        <!--표의 본문 부분-->
        <tbody>
        <tr>
            <td>001</td>
            <td>코리아교육그룹 2020 대한민국 교육브랜드 대상</td>
            <td>2020-07-01</td>
        </tr>
        <tr>
            <td>002</td>
            <td>청년학당 WE-GO</td>
            <td>2020-06-29</td>
        </tr>
        </tbody>

        <!-- 표의 요약 부분 -->
        <tfoot>
        <tr>
            <td>250</td>
            <td>10개의 게시물</td>
            <td>2020-07</td>
        </tr>
        </tfoot>
    </table>
</body>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'HTML&CSS > HTML' 카테고리의 다른 글

[HTML] input 태그 주요 속성, 폼에서 사용하는 여러가지 태그 (1)	2024.03.23
[HTML] 입력 양식 작성하기 \| 폼form 삽입하기, input태그와 type 속성 (2)	2024.03.23
[HTML] 웹 문서 초기화 스타일, 시맨틱 코드 (0)	2024.03.22
[HTML] 이미지 태그, 하이퍼링크 삽입 (0)	2024.03.19
[HTML] 정의 및 기본구조, 텍스트 입력 태그, 순서 목록 태그 (2)	2024.03.18

ID_ allriver