테이블(table), <table> 태그, 테이블을 만드는 순서, 1행, 1열의 테이블(1*1 테이블), 1행에 2개의 칸(열)을 가진 테이블(1*2 테이블)

CODEDRAGON Development/Web, WWW

반응형


 

테이블(table)

·       HTML 문서에서 가장 많이 사용되는 태그입니다.

·       표 형식을 만드는 태그입니다.

·       <table>, <tr>, <td> 3가지는 가장 기본적인 태그입니다.

·       예전에는 웹사이트의 전체적인 레이아웃을 표 형식의 레이아웃으로 만드는데 사용하였으나 현재는 사용빈도가 많이 줄어들었습니다. (유지보수 비용와 테이블 태그의 한계)

 

 

<table> 태그

태그

설명

<table>

</table>

·       표의 시작과 끝을 나타내는 태그

<tr></tr>

·       table row의 약자

·       표의 한 을 만들어 주는 태그

·       단독으로 사용되기 때문에, table td에서 사용되는 속성들을 부여하실 수 없습니다

<td></td>

·       table data의 약자

·       표의 한 을 만들어 주는 태그( 행에 을 정의)

·       즉 행에서 ()을 나누는 기능

·       table에서 사용되는 속성들은 모두 td에서도 사용하실 수 있습니다

<th></th>

·       각 열의 제목을 나타냅니다.

·       모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.

 

 

 

 

테이블을 만드는 순서

단계

설명

1

테이블(table) 영역을 정의하고,

2

(tr)을 지정한 다음,

3

그 행을 나누어서 (td)을 만듭니다.

 

 

 

 

1, 1열의 테이블(1*1 테이블)

테이블의 경계선(border)을 지정해주어야 테이블의 모양을 볼 수 있습니다.

<table border="1">

        <tr>

                <td>1*1 </td>

        </tr>

</table>

 

 

 

1행에 2개의 칸()을 가진 테이블(1*2 테이블)

<table border="1">

        <tr>

                <td>1*1 </td>

                <td>1*2 </td>

        </tr>

</table>

 

 

 

(row)을 확장한 2 2열을 가진 테이블(2*2 테이블)

<table border="1">

        <tr>

                <td>1*1 </td>

                <td>1*2 </td>

        </tr>

        <tr>

                <td>2*1 </td>

                <td>2*2 </td>

        </tr>

</table>

 

 


반응형

'Development > Web, WWW' 카테고리의 다른 글

자바스크립트 기능  (0) 2019.07.18
색상 태그, 색상 표기법  (0) 2019.06.28
border 속성  (0) 2019.06.28
HTTP 특징  (0) 2019.06.21
라이브러리(Library)  (0) 2019.05.30