HTML테이블태그코딩<table>~</table>

웹상에서 가장 많이 만날수 있는 내용이 아마도 표(table)라 할 수 있습니다. 표는 다양한 수치를 일정한 양식에 띠라 시작적으로 보기좋게 정리한 것으르로 웹에서 반드시 필요한 내용이라 할 수 있습니다. 이러한 표는 html의<table>~</table>태그가 작성하는 테이블 내부에 행을 나타내는 tr과 셀을나타내는 th, td태그 등이 사용되고 있습니다. 오늘은 간단한 테브블 태그 코딩에 대하여 설명하고자 합니다.

 

1. HTML 테이블태그(<table>~</table>)코딩방법

 

이 태그는 body안에서 작성해야 하며, 여기서는 테이블 경계선을 나타내기 위해 border 속성을 “1”로 정의하였습니다.

 

01) 테이블을 만들기 위해 <table>~</table>태그를 사용합니다. 테이블 경계선은 1번선으로 지정합니다

 

02) 테이블내에 4개의행을 만들기위해 <tr>~</tr>태그를 4개 만듭니다.<tr>~</tr>태그는 table row 약자로 테이블 내부의 행을 표시합니다

 

 

03) 만든 행중 제일위에 있는 행은 제목줄로 번호,성명,사진,성별,전호번호,거주지로 굵은글씨를 쓰기위해<th>~</th>태그를 사용하였습니다. 2줄과 3줄은 홍길동과 성춘향의 자료를 <<td>~</td>태그를사용하여 입력하였으며, 4줄은 셀을 합치는 colspan 속성을 사용하여 4개의 셀을 합쳤습니다.

 

<th>~</th>태그는 table header의약자로 테이블 행 내부의 제목 셀의 내용을 표시하는 태그로 기본값은 중앙정렬(text-aligh:center), 두껍게(font-weight:bold)로 되어 있기 때문에 일반 데이터와 구분이 용이해집니다

 

<td>~></td>태그는 table data의 약자로 테이블내의 일반셀태그로 왼쪽정렬(text-align:left)이 기본값으로 되어 있으며, 단순 데이터로 형태가 바뀌지 않습니다

 

04) HTML 작성이 완료되었으면 단축키인 Ctrl+S 눌러 저장합니다,

 

2. 크롬 웹브라우저에서 보이는 테이블 태그

 

HTML에서 작성한대로 웹상에 보이게하기 위하여 Ctrl+F1키를 눌러 해당HTML을 불러옵니다.여 기서는구글의 크롬브라우저을 연결하였습니다.