원더풀 프로젝트_HTML 3(테이블 만들기/테이블 변형)

#표 만들기, <table>

표 만드는데 사용되는 태그들
- <table> : 표 전체를 담는 컨테이너
- <caption> : 표 제목 *<table>에 반드시 첫 번째로 삽입.
- <thead> : 헤딩 셀 그룹
- <tfoot> : 바닥 셀 그룹
- <tbody> : 데이터 셀 그룹
- <tr> : 행, 여러 <td>,<th> 포함
- <th> : 열 제목(헤딩) 셀
- <td> : 데이터 셀

ex1)

<table>
	<caption>표제목</caption>
	<thead>....</thead>
	<tbody>....</tbody>
	<tfoot>....</tfoot>
</table>

ex2)

<tr>
	<td></td>
	<td></td>
	<td></td>
</tr>

=> 한 줄에 칸이 세 개 있다.

#기본 테이블 만들기(tr-td)

ex1)

<html>
    <head>
        <title>표 연습</title>
    </head>
    <body>
        <table border="1" width="300">
            <caption>table</caption>
            <thead>
                <tr align="center">
                    <td>1</td>
                    <td>2</td>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>3</td>
                    <td>4</td>
                </tr>
            </tbody>
            <tfoot>
                <tr align="center">
                    <td>5</td>
                    <td>6</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

*결과

ex2)

border가 없으면 표는 테두리가 없는 채로 나온다. ="숫자" 로 조절 가능.
실선을 만들고 싶으면 soild, 점선은 dotted,이중선은 double. 스타일로 넣어줘야한다.(순서대로 코드->결과)

<html>
    <head>
        <style>
            table, tr,td {border : 2px double gray; width: 300;} 
        </style>
    </head>
    <body>
        <table>
            <caption>table</caption>
            <thead>
                <tr align="center">
                    <td>1</td>
                    <td>2</td>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>3</td>
                    <td>4</td>
                </tr>
            </tbody>
            <tfoot>
                <tr align="center">
                    <td>5</td>
                    <td>6</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

width는 표 가로 길이. 마찬가지로 ="숫자" 로 조절 가능하다.
align은 위치 조절. <table>에 적용하면 표 전체 위치가, <tr>에 적용하면 해당 데이터 값에만 위치가 조절된다.

ex3)

<html>
 <head>
   <title>table 만들기</title>
 </head>
 <body>
 <h3>테이블 만들기</h3><hr>
 <table border=1 width=300>
   <caption>성적처리</caption>
   <tr>
    <th>과목</th>
    <th>국어</th>
    <th>수학</th>
   </tr>
   <tr align="center">
     <td>장동건</td>
     <td>90</td>
     <td>100</td>
   </tr>
   <tr align="center">
    <td>원빈</td>
    <td>60</td>
    <td>54</td>
   </tr>
   <tr align="center">
    <th>합계</th>
    <th>150</th>
    <th>154</th>
   </tr>
 </table>
 </body>
</html>

*결과

#테이블 변형(colspan, rowspan) - 행,열 합치기

colspan - 가로로 합치기(colspan="2" : 가로로 두 칸 합쳐라)
rowspan - 세로로 합치기(colspan="3" : 세로로 세 칸 합쳐라)

ex1)

<html>
 <head>
   <title>table 만들기</title>
 </head>
 <body>
 <h3>테이블 만들기</h3><hr>
 <table border=1 width=300>
   <caption>성적처리</caption>
   <tr>
    <th colspan=3>과목</th>
   </tr>
   <tr align="center">
     <td rowspan=3>이름</td>
     <td>90</td>
     <td>100</td>
   </tr>
   <tr align="center">
    <td>60</td>
    <td>54</td>
   </tr>
   <tr align="center">
    <th>150</th>
    <th>154</th>
   </tr>
 </table>
 </body>
</html>

*결과

'원.더.풀 프로젝트 > HTML,CSS' 카테고리의 다른 글

원더풀 프로젝트_CSS1 (0)	2020.03.21
원더풀 프로젝트_HTML 5 (0)	2020.03.14
원더풀 프로젝트_HTML 4 (0)	2020.02.24
원더풀 프로젝트_HTML 2 (0)	2020.02.12
원더풀 프로젝트_HTML 1 (0)	2020.02.03