HTML : 테이블 (표) 만들기 <table, tr, th, td 등>

ㅇ_ㅇ_ㅂ·2023년 10월 21일

html

HTML

목록 보기

8/13

테이블(표)은 웹 페이지에서 흔하게 볼 수 있는, 2차원 격자 형태로 구성된 데이터

다음 그림처럼 행, 열, 행과 열이 만나는 셀로 구성

🟣 table 태그

표를 생성하는 태그
표 관련 태그는 모두 <table> 태그 안에서 사용

🟣 tr 태그

표에서 행을 생성할 때 사용
<tr> 태그 하나는 행 하나를 생성
행을 여러개 만들고 싶으면 <tr> 태그를 여러 번 사용

🟣 th 와 td 태그

표에서 열을 생성할 때 사용
<th> 태그는 표에서 제목을 나타내는 열을 생성할 때
<td> 태그는 표에서 (데이터를 나타내는) 열을 생성할 때

<!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> 
   <table>
        <tr> 
            <td> 열1 </td>
            <td> 열2 </td>
        </tr>
        <tr> 
            <td> 열3 </td>
        </tr>        
   </table>
</body>
</html>

🔽 <tr> 태그와 <td> 태그 사용시 출력 🔽

🟣 표 만들기

다음 그림처럼 표를 만들려면 <table> 태그 안에 <tr> 태그와 <th> , <td> 태그를 다음과 같이 작성하면 된다

<!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> 
   <table> <!-- 테이블 시작 -->
        <tr> <!-- 행1 -->
            <th>번호</th> <!-- 문서의 제목 -->
            <th>메뉴</th>
            <th>수량</th>
            <th>가격</th>
        </tr>
        <tr> <!-- 행2 -->
            <td>1</td> 
            <td>떡볶이</td> <!-- 열1 -->
            <td>10</td>
            <td>16,000원</td>
        </tr>
        <tr> <!-- 행3 -->
            <td>2</td> 
            <td>짬뽕</td> <!-- 열2 -->
            <td>20</td>
            <td>7,000원</td>
        </tr>
        <tr> <!-- 행4 -->
            <td>3</td>
            <td>육회</td> <!-- 열3 -->
            <td>30</td>
            <td>20,000원</td>
        </tr>
        <tr> <!-- 행5 -->
            <td>4</td>
            <td>마라탕</td> <!-- 열4 -->
            <td>40</td>
            <td>15,000원</td>
        </tr>    
   </table> <!-- 테이블 종료 -->
</body>
</html>

🔽 표 만들기 출력 🔽

- 그림에 있는 표에는 테두리가 있지만 HTML에서 표는 기본으로 테두리가 없게 설정되어 있어서 테두리를 보이게 하려면 CSS를 적용해야한다

🟣 rowspan 과 colspan 속성

<rowspan> 행과 행을 병합
<colspan 열과 열을 병합
병합을 할때 rowspan과 colspan의 속성값으로 병합하고 싶은 셀의 개수를 적는다

다음 그림처럼 행과 열을 병합하고 싶으면 다음 코드처럼 작성하면 된다

<!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> 
   <table>
        <tr>
            <th>번호</th>
            <th>메뉴</th>
            <th>수량</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>1</td>
            <td>떡볶이</td>
            <td>10</td>
            <td>16,000원</td>
        </tr>
        <tr>
            <td>2</td>
            <td>짬뽕</td>
            <td>20</td>
            <td rowspan="2">7,000원</td> <!-- 행 병합하기 -->
            <!-- 4행 4열은 3행 4열과 병합해서 생성 안함 -->
        </tr>
        <tr>
            <td >3</td>
            <td>육회</td>
            <td>30</td>            
        </tr>
        <tr>
            <td>총 금액</td>
            <td colspan="3">23,000원</td> <!-- 열 병합하기 -->
            <!-- 5행 2열부터 열 3개를 병햅해서 나머지 열은 생성 안함 -->
        </tr>    
   </table>
</body>
</html>

🔽 테이블 병합 출력 🔽

🟣 caption 태그

표 제목을 지정하는 태그
<table> 태그 안에 첫 번째로 작성해야 하는 태그

<!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> 
   <table>
    <caption> 제목 정하기 </caption> <!-- 제목을 지정하는 태그 -->
        <tr>
            <th>번호</th>
            <th>메뉴</th>
            <th>수량</th>
            <th>가격</th>
        </tr>
   </table>
</body>
</html>

🔽 제목 지정하는 태그 출력 🔽

🟣 col 과 colgroup 태그

열을 그룹화할 때 사용하는 태그
<col> 태그는 하나의 열을 그룹화
<colgroup> 태그는 span 속성과 함께 사용해서 2개 이상의 열을 그룹화
두 태그의 개수와 사용한 열 개수가 일치해야한다

만약 테이블을 만들때 <caption> 를 사용한다면 <caption> 태그 다음에 사용하고 <tr> 태그보다는 먼저 사용

<!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> 
   <table>
    <caption> 최애 메뉴 !!!! </caption>
    	<!-- 총 4열 -->
        <col style = "width: 90px;"> <!-- 1열 너비 -->
        <colgroup span = "2" style= "width: 150px;"></colgroup> <!-- 2열과 3열 너비 -->
        <col style = "width: 200px;"> <!-- 4열 너비 -->
          <tr>
              <th>번호</th>
              <th>메뉴</th>
              <th>수량</th>
              <th>가격</th>
          </tr>
          <tr>
              <td>1</td>
              <td>떡볶이</td>
              <td>10</td>
              <td>16,000원</td>
          </tr>
          <tr>
              <td>2</td>
              <td>짬뽕</td>
              <td>20</td>
              <td rowspan="2">7,000원</td> 
          </tr>
          <tr>
              <td >3</td>
              <td>육회</td>
              <td>30</td>            
          </tr>
          <tr>
              <td>총 금액</td>
              <td colspan="3">23,000원</td> 
          </tr>    
   </table>
</body>
</html>