today_is

[ html 기초 ] 테이블 본문

front

[ html 기초 ] 테이블

ye_rang 2023. 12. 5. 09:35

오늘의 목표 

 

다양한 데이터를 담은 테이블을 만들어보자

 

 vscode 내부 코드 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex01.html</title>
    <style>
        table {
            border-collapse: collapse;
            border: 2px solid black;
        }
        thead tr {
            background-color: black;
            color: white;
        }
        tbody tr {
            background-color: #f5f6f7;
            color: black;
        }
        table td,
        table th {
            padding: 5px 10px;
            border: 1px solid black;
        }

    </style>
</head>
<body>

    <h1>테이블 태그 (표 만들기)</h1>
    <hr>
    <table align="center" width="600">
        <thead>
            <tr>
                <th>태그</th>
                <th>설명</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>table</td>
                <td>표의 시작과 끝을 나타낸다</td>
            </tr>
            <tr>
                <td>tr</td>
                <td>table 내부에 한 줄을 생성 (table row)</td>
            </tr>
            <tr>
                <td>table</td>
                <td>표의 시작과 끝을 나타낸다</td>
            </tr>
            <tr>
                <td>td</td>
                <td>tr 내부에 한 칸을 생성 (table data, cell)</td>
            </tr>
            <tr>
                <td>th</td>
                <td>td 처럼 칸을 생성. 강조되면서 가운데 정렬 (table headline)</td>
            </tr> 
            <tr>
                <td>thead</td>
                <td>표를 상 중 하로 나누고 싶을 때 사용</td>
            </tr>
            <tr>
                <td>tbody</td>
                <td>표를 상 중 하로 나누고 싶을 때 내용을 나타내기 위해 사용</td>
            </tr>
            <tr>
                <td>tfoot</td>
                <td>표를 상 중 하로 나누고 싶을 때 하단을 나타내기 위해 사용</td>
            </tr>
            <tr>
                <td>td 내부에 글자 혹은 다른 태그를 사용하면 된다</td>
                <td>
                    <img src="../짱구/짱구.png" width="50"><br>
                    <table>
                        <tr>
                            <td>이름 : 짱구</td>
                            <td>나이 : 5</td>
                        </tr>
                        <tr>
                            <td>이름 : 지우</td>
                            <td>나이 : 15</td>
                        </tr>
                        <tr>
                            <td>이름 : 가영</td>
                            <td>나이 : 17</td>
                        </tr>
                    </table>
                </td>
            
        </tr>
        </tbody>
    </table>
</body>
</html>

 

 

 결과 

 

 

ex01.html

테이블 태그 (표 만들기)

태그 설명
table 표의 시작과 끝을 나타낸다
tr table 내부에 한 줄을 생성 (table row)
table 표의 시작과 끝을 나타낸다
td tr 내부에 한 칸을 생성 (table data, cell)
th td 처럼 칸을 생성. 강조되면서 가운데 정렬 (table headline)
thead 표를 상 중 하로 나누고 싶을 때 사용
tbody 표를 상 중 하로 나누고 싶을 때 내용을 나타내기 위해 사용
tfoot 표를 상 중 하로 나누고 싶을 때 하단을 나타내기 위해 사용
td 내부에 글자 혹은 다른 태그를 사용하면 된다
이름 : 짱구 나이 : 5
이름 : 지우 나이 : 15
이름 : 가영 나이 : 17

 

>> 이미지가 없기 때문에 사진이 뜨지 않는다.

 

 

 

 vscode 내부 코드 

테이블 태그 내부에도 스타일이 적용 가능하다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>표 만들기 연습</h1>
    <br>
    <h4>테이블 태그는 레이아웃을 사용할때 쓰면 안된다</h4>
    <h4>테이블 태그는 다수의 데이터를 정리하는 용도로 쓰기</h4> 
    
    <hr>

    <table border="1" cellpadding="10" cellspacing="0" align="center">
        <tr bgcolor="#eee">
            <th>기업명</th>
            <th>설립일</th>
            <th>시가총액(원)</th>
            <th>매출(원)</th>
            <th>업종</th>
        </tr>
        <tr>
            <td>네이버</td>
            <td>1996.06.02</td>
            <td>34.6조</td>
            <td>8.2조</td>
            <td>검색 포털</td>
        </tr>
        <tr>
            <td>카카오</td>
            <td>1995.02.16</td>
            <td>25조</td>
            <td>7.1조</td>
            <td>메신저</td>
        </tr>
        <tr>
            <td>라인</td>
            <td>2011.06.23</td>
            <td>27.1조</td>
            <td>15.6조</td>
            <td>메신저, 검색 포털</td>
        </tr>
        <tr>
            <td>쿠팡</td>
            <td>2010.07.01</td>
            <td>42조</td>
            <td>37.9조</td>
            <td>이커머스</td>
        </tr>
        <tr>
            <td>배달의 민족</td>
            <td>2011.03.10</td>
            <td>7.6조</td>
            <td>2.9조</td>
            <td>배달 플랫폼</td>
        </tr>
    </table>
</body>
</html>

 

 

 결과 

Document

표 만들기 연습


테이블 태그는 레이아웃을 사용할때 쓰면 안된다

테이블 태그는 다수의 데이터를 정리하는 용도로 쓰기

기업명 설립일 시가총액(원) 매출(원) 업종
네이버 1996.06.02 34.6조 8.2조 검색 포털
카카오 1995.02.16 25조 7.1조 메신저
라인 2011.06.23 27.1조 15.6조 메신저, 검색 포털
쿠팡 2010.07.01 42조 37.9조 이커머스
배달의 민족 2011.03.10 7.6조 2.9조 배달 플랫폼

 

 

 

 

 vscode 내부 코드 

테이블의 줄과 칸을 합치는 것도 가능하다 !

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ex04.html</title>
  </head>
  <body>
    <h1>ex04.html - 줄, 칸 합치기</h1>
    <hr />

    <table border="1" cellpadding="10" cellspacing="0">
        <tr>
            <th colspan="2">team and player</th>
            <th>kill</th>
            <th>death</th>
            <th>assist</th>
        </tr>
        <tr>
            <td rowspan="5">T1</td>
            <td>Faker</td>
        </tr>
        <tr>
            <td>Gumayusi</td>
        </tr>
        <tr>
            <td>Keria</td>
        </tr>
        <tr>
            <td>Zeus</td>
        </tr>
        <tr>
            <td>Oner</td>
        </tr>
        
        <tr>
            <td rowspan="5">JDG</td>
            <td>Faker</td>
        </tr>
        <tr>
            <td>Gumayusi</td>
        </tr>
        <tr>
            <td>Keria</td>
        </tr>
        <tr>
            <td>Zeus</td>
        </tr>
        <tr>
            <td>Oner</td>
        </tr>
    </table>
  </body>
</html>

 

 

 결과 

ex04.html

ex04.html - 줄, 칸 합치기

team and player kill death assist
T1 Faker
Gumayusi
Keria
Zeus
Oner
JDG Faker
Gumayusi
Keria
Zeus
Oner

 

 

study_review 

 

비슷한 형식의 많은 데이터를 다루기 위해서는 테이블을 활용하는 것이 깔끔하다고 느껴진다

 

<style> 태그 내부에서만 스타일을 적용할 수 있는 것은 아니다!

 

'front' 카테고리의 다른 글

[ javascript ] 변수 / 상수 / 정렬  (0) 2024.01.21
[ html ] 사이트 따라서 만들어보기  (0) 2023.12.11
[ html ] display 속성  (0) 2023.12.07
[ html ] Tag ( a, input )  (0) 2023.12.05
[ html 기초 ] img 태그  (0) 2023.12.04
'front' Related Articles more