웹 문서의 표 만들기

728x90

안녕하세요. 이번 포스팅에서는 HTML 웹 문서에서 표를 만드는 방법을 포스팅 합니다.

표를 만드는 태그는 <table>, <caption> 과 행을 만드는 태그 <tr>, 셀을 만드는 <td>, <th> 태그, 표의 구조인 <thead>, <tbody>, <tfoot>이 있습니다.

예시를 보겠습니다.

<body> 태그 안에 <table> 태그를 생성하여 <tr>, <td> 태그를 이용하여 행과 열을 만들어 줍니다.

웹 문서에서 <table> 태그 작성 시 화면에는 표가 나오지 않고 텍스트만 출력이 됩니다.

표를 출력하기 위해서는 별도의 CSS 파일을 생성하여 다음과 같이 작성한 후 웹문서에

<link rel = "stylesheet" href="css파일 경로">를 추가해줍니다.

CSS 파일을 연결하여 생성된 결과입니다.

결과물을 보면 현재 작성된 표는 1개의 행에 3개의 열로 구성된 것을 볼 수 있습니다.

다음은 표의 구조입니다.

먼저 <thead> 부분은 다음과 같이 작성하였습니다.

그리고 <thead>와 <tbody>의 <td> 부분에 각각 rowspan과 colspan을 추가하였습니다.

여기서 rowspan과 colspan은 셀의 행과 열 부분을 합치는 속성이며 다음과 같이 입력합니다.

<td rowspan 또는 colspan="합칠 셀의 개수"></td>

<tfoot>에도 colspand을 적용해주었습니다.

CSS 파일에도 <thead>,<tbody>,<tfoot>태그에 스타일을 부여하고 결과를 확인해봅니다.

오른쪽의 결과항목 처럼 <tbody> 부분의 rowspan이 적용 되었고 <tfoot>의 부분의 colspan이 정상 적용 된것을 확인 할수 있습니다.

이상으로 간단하게 HTML 웹 문서에서 표 작성하는 방법에 대해 포스팅하였습니다.

728x90

To Be Developer