고래씌

[HTML] 5-1. 표관련태그 본문

Front-End/HTML

[HTML] 5-1. 표관련태그

고래씌 2023. 11. 1. 13:17

1. 표관련 태그

1) 표만들기(4행 3열)

- 표 : 문서에서 다량의 데이터를 정리해서 표현하고 할 때 사용. 행과 열로 이루어져 있음

- 표를 구성하는 태그들로는 <table> <thead> <tbody> <tfoot> <tr> <th> <td> ...

- table 내부들을 구성하는 모든 태그들의 최상위 태그는 <table></table> 태그임

 

▶ <table></table> : 표를 생성해주는 테이블

▶ <tr></tr> : 표의 한 행을 나타내는 태그

▶ <th></th> : 표의 제목 셀을 나타내는 태그

▶ <td></td> : 표의 일반 셀을 나타내는 태그

 

▶ (tr>td*3)*3 하면 전체를 3개를 복사를 할 수 있음

▶ 표의 행과 열에 행길이, 열길이를 늘리고 싶다면 width="" , height="" 을 사용하면 됨

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>표 관련 태그</title>
</head>
<body>

    <h1>표 만들기 (4행 3열)</h1>

    <!-- border 속성 : 표의 테두리 두께 -->
    <table border="1">

        <caption><b>웹 브라우저 종류</b></caption>
        <!-- caption태그 : 테이블의 제목 추가 
            기본위치는 테이블 상단 중앙
        -->

        <tr>
            <th width="130" height="30">브라우저명</th>  <!-- 열은 하나만 추가하면 됨(같은 행만 적용) -->
            <th width="80">제조사</th>
            <th width="200">홈페이지</th>
        </tr>

        <tr>
            <td>Internet Explore</td>
            <td>MS</td>
            <td>http://www.microsoft.com</td>
        </tr>
        <tr>
            <td>Chrome</td>
            <td>Google</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>Firefox</td>
            <td>Mozila</td>
            <td>http://www.mozilla.org</td>
        </tr>


    </table>
    
</body>
</html>

 

 

2) 표의 행과 열을 합치는 속성

- 셀(th,td) 태그와 속성을 이용해서 행, 또는 열을 합칠 수 있음

- 2개의 열(colums)을 합칠때 => colspan="2"

- 2개의 행(row)을 합칠때 => rowspan="2"

    <h3>이력서</h3>

    <table border="1">
        <tr>
            <td colspan="2" rowspan="2" width="130" height="130">사진</td>
            <td width="80">이름</td>
            <td width="200"></td>
        </tr>
        <tr>
            <td>연락처</td>
            <td></td>
        </tr>
        <tr>
            <td width="70" height="50">주소</td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td width="70" height="200">자기소개</td>
            <td colspan="3"></td>
        </tr>
    </table>

 

 

 

3) 테이블 구조 나누기

- <thead></thead> 와 <tbody></tbody> 사용

    <h2>테이블 내 구조 나누기</h2>
    <table border="1" style="border-collapse: collapse">
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>30</td>
                <td>서울</td>
            </tr>
            <tr>
                <td>이고래</td>
                <td>35</td>
                <td>서울</td>
            </tr>
            <tr>
                <td>얍고래</td>
                <td>39</td>
                <td>광주</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <th colspan="2">총 인원</th>
                <td>3명</td>
            </tr>
        </tfoot>
    </table>

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

'Front-End > HTML' 카테고리의 다른 글

[HTML] 5-3. 입력양식 관련 태그, 폼 관련 태그  (1) 2023.11.01
[HTML] 5-2. 멀티미디어 관련 태그  (1) 2023.11.01
[HTML] 4-1. 목록관련태그  (1) 2023.11.01
[HTML] 3. 글자관련태그  (0) 2023.11.01
[HTML] 1. HTML5 ~ 2. 헤더(HEAD)  (1) 2023.10.30
'Front-End/HTML' Related Articles more