UI / UX 웹 퍼블리셔 & 프론트엔드 [4] - <table> 태그

2일차 세번째 실습은 테이블을 만들기 위한 HTML 2.0 태그이다.

index4.html <table>

<table> 태그 : 그래프, 표, 통계, 게시판, 웹 아웃라인을 생성할 때 사용

 

<tr> : 테이블 태그에서 줄(행)을 생성할 때 사용

 

<td> : 테이블에서 칸(열)을 생성할 때 사용 

 

 

ex)

** 3 x 2 테이블일 경우 : [ <tr> 1쌍 + <td> 3쌍 ] x 2묶음

<tr>

   <td></td>

   <td></td>

   <td></td>

</tr>               x 2묶음

 

** 2 x 3 테이블일 경우 : [ <tr> 1쌍 + <td> 2쌍 ] x 3묶음

<tr>

   <td></td>

   <td></td>

</tr>                x 3묶음

 

 

** 너비와 높이를 주고 싶을 때

<table>, <td> : width와 height 적용이 가능하다.

<tr> : 오직 height만 적용 가능하다.

 

ex)

<tr width="300" height="300">

    <td>1</td>

    <td>2</td>

    <td>3</td>

</tr>

→ 가로의 길이가 적용되지 않는다.

 

<tr height="300">

    <td width="300">1</td>

    <td>2</td>

    <td>3</td>

</tr>

→ <table>에 적용할 경우, 가로 너비가 전부 200으로 설정,

    <td>에 적용할 경우, 해당 열의 너비만 200으로 설정된다.

 

index4.html <table>