키워드 : table 태그, ul 태그

table 태그와 ul 태그는 여러가지 정보를 규칙적으로 표현할 수 있으므로 필요에 따라서 다양하게 응용해서 사용할 수 있습니다. 특히 검색 기능이 있는 방명록, 게시판과 같은 사이트에서는 위 태그를 활용해서 검색 목록 등을 보기 좋게 사용자에게 표현할 수 있습니다.

<table> 태그로 테이블을 선언했습니다.

<tr> 태그는 하나의 행을 나타냅니다.

<th> 태그는 하나의 열을 나타내며 제목에 나타날 값을 입력합니다.

<td> 태그는 하나의 열을 나타내며 실제 값을 입력합니다.

이 밖에도 colspan과 rowspan 속성을 이용하면 행, 열 합치기가 가능합니다.

<table>
<thead>
  <tr>
    <th>이름</th>
    <!-- 열 합치기 -->
    <th colspan="2">나이</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>문성재</td>
    <td>20살이라면...</td>
    <td>20살이라면...</td>
  </tr>
</tbody>
</table>

위 처럼 colspan 속성을 제목을 나타내는 th 태그에 작성하면 제목 태그의 열(좌,우)이 합쳐져서 나타납니다.

<table>
<thead>
  <tr>
    <th>이름</th>
    <th>문성재</th>
  </tr>
</thead>
<tbody>
  <tr>
      <!-- 행 합치기 -->
    <td rowspan="2">나이</td>
    <td>20살이라면...</td>
  </tr>
  <tr>
    <td>20살이라면...</td>
  </tr>
</tbody>
</table>

위 처럼 rowspan 속성을 제목을 나타내는 th 태그에 작성하면 제목 태그의 행(위,아래)이 합쳐져서 나타납니다.

이처럼 내가 원하는 모양으로 자유자재로 테이블을 구성할 수 있습니다. 만약, 위 코드의 결과가 어떻게 나타나는지 궁금하다면 한 번 코드를 직접 작성해보세요! :)