HTML&&CSS

HTML 태그(2) - table 관련 태그

꽃달린감나무 2022. 5. 17. 00:01
728x90
  • 표 : 데이터 표를 나타내는 태그
    • <table></table> : 표
    • <thead></thead> : 제목 행 그룹
    • <tbody></tbody> : 표 본문 행을 그룹
    • <tfoot></tfoot> : 바닥 행을 그룹 
    • <td></td> : 데이터 셀( 표에 있는 한 칸) 
    • <th></th> : 제목 행 셀
    • <tr></tr> : 행 ( table-row)
    • <caption></caption> : 표 제목 
  • 사용법
    • <table></table>태그는 표를 나타내는 태그로 자식 태그로 위에 있는 thead, tbody...caption 태그 등이 들어갈 수 있습니다. 
    • <caption>내용 </caption> 태그 표의 제목을 나타냅니다.
    • <tr></tr>태그는 표에서 하나의 행을 표현합니다. 안의 내용(자식태그)로 td와 th가 들어갑니다.
    • <td>내용</td> 태그는 하나의 셀을(표에서 한칸)을 나타냅니다.
    • <th>내용</th> 태그는 제목 행(가장위에 있는 줄 해당 태그 안에 있으면 굵은 글씨로 표현됩니다.)에서 하나의 셀을 나타냅니다.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>table</title>
	<style type="text/css"> <!--표의 테두리를 나타내는 CSS입니다. 추후 글에서 자세히 다루겠습니다!--> 
		th {border: 1px solid;}
		td {border: 1px solid;}
	</style>
</head>
<body>
	<table>
		<caption>Monthly Saving</caption> <!--표의 제목 -->
		<thead> <!--표의 제목 행(가장위에 있는 행을 그룹으로 만듭니다.)-->
			<tr>
				<th>Month</th> <!--표의 제목행 셀 -->
				<th>Savings</th>
			</tr>
		</thead>
		<tbody><!--표의 본문내용(표에 본문에 해당하는 행을 그룹으로 만듭니다.)-->
			<tr>
				<td>January</td> <!--표의 본문내용 셀 -->
				<td>$100</td>
			</tr>
			<tr>
				<td>February</td>
				<td>$200</td>
			</tr>
		</tbody>
		<tfoot><!--표의 바닥내용(표에 맨 밑에 있는 행을 그룹으로 만듭니다.)-->
			<tr>
				<td>Sum</td>
				<td>$300</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

 

 

 

  • 결과 내용
table
Monthly Saving
Month Savings
January $100
February $200
Sum $300

 

 

  • 표에 관련된 속성
<th colspan="4">head</th>
<td rowspan="2">B</td>
  •  colspan : 셀을 가로방향으로 병합
  •  rowspan : 셀을 세로방향으로 병합
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>table</title>
	<style type="text/css"> <!--표의 테두리를 나타내는 CSS입니다. 추후 글에서 다루겠습니다-->
		th {border: 1px solid;}
		td {border: 1px solid;}
	</style>
</head>
<body>
<table>
		<caption>Table</caption>
		<thead>
			<tr>
				<th colspan="4">head</th> <!--가로 병합-->
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>F</td>
				<td>o</td>
				<td>o</td>
				<td>t</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td rowspan="2">B</td><!--세로 병합-->
				<td>o</td>
				<td>d</td>
				<td rowspan="2">y</td>
			</tr>
			<tr>
				<td>o</td>
				<td>d</td>
				
			</tr>
		</tbody>
	</table>
    </body>
    </html>

 

 

 

  • 결과 값
table
Table
head
F o o t
B o d y
o d

 

  • 그 외 표에서 많이 사용하는 속성과 태그들!!
    • <colgroup> : 공통된 속성을 가지는 열들을 묶기 위한 태그
    • <col> : 표의 열을 나타내는 태그, 열에 속하는 칸에 공통된 의미를 부여할 때 사용
    •  
    • scope와 header 속성
      •  시각 장애인 사용자나 스크린 리더기는 왼쪽에서 오른쪽으로 셀의 내용만 듣고 판단하기 때문에 열과 행을 파악하고 내용 셀의 연관성을 유추하는 것이 쉽지 않습니다. 따라서 이러한 경우 th 태그에 scope 속성을 사용해 "열 제목" 인지 "행 제목"인지를 파악할 수 있게 해줍니다. scope속성의 경우 주로 병합되지 않는 단순 표 유형에 사용할 수 있습니다. 좀 더 복잡한 경우, th 태그에 ( <th id = "name"></td>)id으로 이름을 지어주고 해당 제목 셀과 연관성이 있는 내용 셀에 header 속성과 id 값을 동일하게(<td header = "name"></td>)하여 제목 셀과 내용 셀이 관계를 지정합니다. 이렇게 id와 header값이 동일하게되면 스크린 리더기는 제목, 내용 셀을 함께 읽어주기 떄문에 데이터의 의미 및 관계를 파악을 쉽게할 수 있습니다.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>table</title>
        <style type="text/css">
            th {border: 1px solid;}
            td {border: 1px solid;}
        </style>
    </head>
	<body>
  	  <table>
            <caption>colgroup,col</caption>
            <colgroup>
                <col span="2" style="background-color:red">
                <col style="background-color:yellow">
            </colgroup>
             <tr>
               <th>ISBN</th>
               <th>Title</th>
               <th>Price</th>
             </tr>
             <tr>
                <td>3476896</td>
                <td>My first HTML</td>
                <td>$53</td>
             </tr>
        </table>
    <!-- scope Attribute-->
        <table>
                <caption>colgroup,col</caption>
            <colgroup>
                <col span="2" style="background-color:red">
                <col style="background-color:yellow">
            </colgroup>
             <tr>
               <th>ISBN</th>
               <th>Title</th>
               <th>Price</th>
             </tr>
             <tr>
                <td>3476896</td>
                <td>My first HTML</td>
                <td>$53</td>
             </tr>
        </table>
    <!-- scope Attribute-->
        <br>
        <table>
            <caption>Scope</caption>
              <tr>
                <th></th>
                <th scope="col">Month</th>
                <th scope="col">Savings</th>
              </tr>
              <tr>
                <td>1</td>
                <td>January</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>2</td>
                <td>February</td>
                <td>$80</td>
              </tr>
        </table>
        <!-- id, header Attribute -->
        <br>
        <table>
            <caption>ID, Header</caption>
             <tr>
                  <th>&nbsp;</th>
                  <th id="imported" colspan="2">수입품목</td>
             </tr>
             <tr>
                  <th>&nbsp;</th>
                  <th id="cosmetic">화장품</td>
                  <th id="car">자동차</td>
             </tr>
             <tr>
                  <th id="america">미국</th>
                  <td headers="imported cosmetic america">7000</td>
                  <td headers="imported car america">30</td>
             </tr>
             <tr>
                  <th id="japan">일본</th>
                  <td headers="imported cosmetic japan">5000</td>
                  <td headers="imported car japan">80</td>
             </tr>
        </table>
    </body>
</html>

 

  • 결과 값
table
colgroup,col
ISBN Title Price
3476896 My first HTML $53
colgroup,col
ISBN Title Price
3476896 My first HTML $53

Scope
Month Savings
1 January $100
2 February $80

ID, Header
  수입품목
  화장품 자동차
미국 7000 30
일본 5000 80
728x90