HTML Eclipse에서 웹 프로젝트 만들기 - table, img

 

 

<table>

: 표를 만드는 태그

 

서브 태그
<caption>표의 이름</caption>
<th> </th> - 분류
<td> </td> - 칸추가
<tr> </tr> - 줄추가

 

    
<TABLE></TABLE> : 표

속성 : 
BORDER : 표의 테두리 두께
BORDERCOLOR : 표의 테두리 색상
BACKGROUND : 표 전체의 배경 색상
CELLSPACING : 셀과 셀 사이의 간격
CELLPADDING : 셀과 셀 내용 사이의 간격
WIDTH : 표 전체의 가로 넓이 
HEIGHT : 표 전체의 세로 넓이
ALIGN : 표 전체의 왼쪽/가운데/오른쪽 정렬


<CAPTION></CAPTION> : 주소록 

속성 : 
ALIGN : TOP, BOTTOM

    
<TR></TR> : 행(ROW) 추가

속성 : 
ALIGN : LEFT, CENTER, RIGHT
VALIGN : TOP, MIDDLE, BOTTOM


<TH></TH> : 행/열의 제목 (table header) 

속성 : 
ALIGN : LEFT, CENTER, RIGHT
VALIGN : TOP, MIDDLE, BOTTOM
BORDERCOLOR: 셀 테두리 색상
BACKGROUND: 셀 바탕
ROWSPAN : 세로로 합치고자 하는 행의 수
COLSPAN : 가로로 합치고자 하는 열의 수
WIDTH : 열의 가로 길이
HEIGHT : 열의 세로 길이


<TD></TD> : 열 추가

속성 : 
ALIGN : LEFT, CENTER, RIGHT
VALIGN : TOP, MIDDLE, BOTTOM
BORDERCOLOR: 셀 테두리 색상
BACKGROUND: 셀 바탕
ROWSPAN : 세로로 합치고자 하는 행의 수
COLSPAN : 가로로 합치고자 하는 열의 수
WIDTH : 셀의 가로 길이
HEIGHT : 셀의 세로 길이

 

 

ex.
<div align="center">
    <table border="1" cellspacing="0" cellpadding="10" width="300" height="300">
    
     <tr valign="top">
     <th valign="bottom">0,0</th>
     <th colspan="2">0,1</th>
     </tr>
     <tr>
     <td rowspan="2">1,0</td>
     <td>1,1</td>
     <td>1,2</td>
     </tr>
     <tr>
     <td>2,1</td>
     <td>2,2</td>
     </tr>
     <caption align="bottom">표 이름</caption>

    </table>
</div>

 

 

 

<figure>, <figcaption> 

: 표 제목

 

 

<figcaption> 위치에 따라 표의 위나 아래에 제목 표시

 

 

ex.
<figure>
<figcaption>
<p>
국내에서 자주 사용하는 <b>모던 브라우저</b>
</p>
</figcaption>
<table border="1">
<tr>
<th>1행 1열(제목)</th>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<th>2행 1열(제목)</th>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
</figure>

 

 

 

<thead>, <tbody>, <tfoot>

: 표 구조 정의

 

 

표의 구조를 제목 부분과 실제 본문 그리고 요약 부분이 있는 부분으로 나눈다

 

<thead>, <tbody>, <tfoot> 태그 사용
시각 장애인도 화면 판독기를 통해 표의 구조를 쉽게 이해할 수 있다

* 표의 본문이 길 경우 자바스크립트를 이용하면 제목과 바닥 부분을 고정하고 본문만 스크롤되도록 할 수 있다

 

 

ex.
<table border="1">
<caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>
<thead>
<tr>
<th>구분</th>         
<th>학교수</th>         
<th>학급수</th>         
<th>학생수</th>         
<th>교원수</th>       
</tr>
</thead>
<tbody>
<tr>
<th>유치원</th>         
<td>117</td>         
<td>252</td>         
<td>5,547</td>         
<td>474</td>       
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>         
<td>300</td>         
<td>3,437</td>         
<td>86,954</td>         
<td>6,111</td>       
</tr>
</tfoot>
</table>

 

 

 

<col>, <colgroup> 

: 열끼리 묶어 스타일 지정

 

<col> 태그

: 한 열에 있는 모든 셀에 같은 스타일을 적 용하려고 할 때 사용. 닫는 태그 없음
<col> 태그에 span 속성을 사용해 여러 열을 묶을 수 있음

 

<colgroup> 태그

: colgroup태그로 여러 열을 묶을 수도 있는데,

<colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 사용
닫는 태그 있음

<col> 태그와 <colgroup> 태그는 <caption> 태그 뒤에, <tr>, <td> 태그 전 에 사용
<colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 함

 

ex.
<table border="1" style="width: 300px; height: 100px;">
<caption>colgroup 연습</caption>
<colgroup>
<col>
<col span="2" style="background-color: blue;">
<col style="background-color: yellow">
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

 

 

 

---

 

 

<img>

: 웹 문서에 이미지를 삽입할 때 사용

 

 

<img> 태그의 속성 

 

src 속성
: 이미지 파일 경로
웹 문서 파일의 위치를 기준으로 이미지 경로 지정 

<!-- 상대경로 -->
<img src="images/CapeReinga.jpg">
<!-- 절대경로 -->
<img src="/HTML/images/CapeReinga.jpg" alt="Cape Reinga">
<img src="/HTML/images/CapeReinga.jpg" width="250" height="100" align="left" border="2">
<img src="/HTML/images/CapeReinga.jpg" alt="Cape Reinga">

 

웹 사이트에 있는 이미지도 주소를 알아내어 src 속성에 사용할 수 있다.
<img src="https://image1.jpg -->

 

alt 속성
: 이미지를 설명하는 대체 텍스트

</img alt="" src="">

 

ex.
<img src="#" alt="대체텍스트">

 

width, height 속성 
: 이미지 크기 조정하기
이 속성을 사용하지 않으면 원래 이미지 크기대로 표시
이 속성을 이용해 화면에 표시하는 이미지 크기 조정 (이미지 파일의 용량은 그대로)

 

<figure>, <figcaption>

: 이미지에 설명글 붙이기

 

 

<figure> 태그

: 설명글을 붙일 대상 지정
기본형 - <figure> 요소 </figure>
웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용
설명 글을 표시할 때 <figure>로 먼저 묶어야 함

 

<figcaption> 태그

: 이미지를 설명하는 대체 텍스트

 

기본형

<figcaption> 설명글 </figcaption>
대체 텍스트를 화면 낭독기가 읽어 준다
이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시

 

<hr>
<figure>
<img src="images/CapeReinga.jpg">
<figcaption>Cape Reinga</figcaption>
</figure>