HTML-tables(행과열의 구성 또는 표)

---

※ 주의 !

이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 

문제가 있다면 말씀 부탁 드리겠습니다.

---

안녕하세요 Gon입니다.

 

이번글에서는 HTML에서 문서의 행과열을 구성하여 어떠한 자료들을 구조화 시킬수 있는 방법에 대하여 알아보도록 하겠습니다.

 

<table>|<tr>|<th>|<td> - 표를 만들기 위한 태그들

 

<table> - HTML에서 표의 영역을 정의해 주는 태그 입니다.

<tr> -row in a table 표의 행을 정의 해 줍니다.

<th> -header cell in a table 표의 행의 이름을 정의해 줍니다.

<td> -cell in a table 표의 행의 데이터를 정의해 줍니다.

 

가장 기본적인 예시는 다음과 같습니다.

 

< !-- 상단 제목 표 -->
<table>
	<tr>
    	<th>이름</th>
        <th>나이</th>
        <th>성별</th>
	</tr>
    <tr>
    	<td>Gon</td>
        <td>늙음</td>
        <td>남자</td>
	</tr>
    <tr>
    	<th>Gon2</th>
        <th>비밀</th>
        <th>비밀</th>
	</tr>
</table>

 

< !-- 좌측 제목 표 -->
<table>
	<tr>
    	<th>이름</th>
        <td>Gon</td>
	</tr>
    <tr>
    	<th>국적</th>
        <td>대한민국</td>
	</tr>
    <tr>
    	<th>꿈</th>
        <td>부자</td>
	</tr>
</table>

상단의 예시처럼 HTML에서 표를 구현 할수 있습니다.

 

또한 이 표들을 원하는 디자인으로 꾸밀수 있는 방법이 있습니다.

방법은 대표적으로 아래와 같은 것들이 있습니다.

 

• border 속성 : CSS 속성값 - 테두리를 추가할수 있습니다 

• border-collapse : CSS 속성값 -각 행과열의 테두리가 정렬될 수 있게 해줍니다.

• padding : CSS 속성값 - 각 셀의 공간을 지정해 줍니다.

• border-spacing : CSS 속성값 - 테두리의 여백을 지정해 줍니다.

• text-align : CSS 속성값 - 셀의 텍스트를 정렬할 기준을 설정해 줍니다.

• rowspan: 선택한 셀을 행으로 분할 합니다.

• colspan: 선택한 셀을 열로 분할 합니다.

• caption:  해당 테이블의 부제목 또는 설명을 삽입합니다.

 

이렇게 이번글에서는 간단하게 HTML에서 표를 만드는 방법과 그 표의 디자인을 꾸밀수 있는 방법에 대하여 알아보았습니다.

 이 디자인의 경우에는 CSS와 밀접하므로 CSS를 다룰 때 좀더 자세하게 다루도록 하겠습니다.

 

감사합니다.

 

Gon.