컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Thursday, May 18, 2006

[HTML-CSS] 표/테이블 table 태그의 기초


각종 표를 만드는 테이블 <table> 태그의 사용법은 좀 복잡하기 때문에, 여기서는 우선 가장 기초적인 것을 설명합니다.

테이블 table 태그로 엑셀처럼 전문적인 도표를 그릴 수도 있지만, 간단한 사각형 하나를 그릴 때 쓰기도 합니다. 사각형은 div 태그로 구현하는 것이 간편하긴 한데 div 태그는 IE와 파이어폭스에서 크기 차이가 나는 경우가 많아서, table 태그로 사각형을 그리는 것이 무난하더군요.




가장 단순한 표는 이것입니다:

<table border="1">
  <tr>
    <td>td 는 표의 내용</td>
  </tr>
</table>



td 는 표의 내용



칸(cell)이 하나뿐인 가장 간단한 표입니다. (border="1" 속성을 주지 않으면 테두리가 보이지 않기에 표인지 아닌지 알 수 없게 됩니다.)

<tr> 태그는 <td> 태그가 횡으로 나란히 놓이는, 가로 공간을 정의합니다. 위의 경우에는 <tr> 태그가 하나밖에 없기 때문에 표가 1줄이라는 사실을 알 수 있습니다.
<td> 태그는 칸(cell)을 만듭니다. 사실상 <td> 태그가, 표의 알맹이라고 할 수 있습니다.
위의 태그들은 모두 <table> 안에 들어 있어야 합니다.






칸(셀)들을 2행으로




<table border="1">
  <tr>
    <td>td 는 표의 내용</td>
  </tr>
  <tr>
    <td>td 는 표의 내용</td>
  </tr>
</table>



td 는 표의 내용
td 는 표의 내용



<tr> 태그가 2개로 늘어났기에, 표도 이제 2줄이 되었습니다.






칸(셀)을 4개로




<table border="1">
  <tr>
    <td>td 는 표의 내용</td><td>td 는 표의 내용</td>
  </tr>
  <tr>
    <td>td 는 표의 내용</td><td>td 는 표의 내용</td>
  </tr>
</table>



td 는 표의 내용td 는 표의 내용
td 는 표의 내용td 는 표의 내용



<td> 바로 뒤에 <td> 태그를 또 추가하면 칸이 더 생깁니다.





틀린 경우




<table border="1">
  <tr>
    <td>td 는 표의 내용</td><td>td 는 표의 내용</td>
  </tr>
  <tr>
    <td>td 는 표의 내용</td>
  </tr>
</table>



td 는 표의 내용td 는 표의 내용
td 는 표의 내용



각 <tr> 들에 속한 <td> 태그의 개수는 동일해야 합니다. <td></td> 이렇게 비어 있는 태그라도 있어야 합니다.
또는 아래와 같은 방법으로 칸의 개수를 조정할 수 있습니다:






rowspan 속성으로, 아래쪽 칸과 하나로 합치기




<table border="1">
  <tr>
    <td rowspan="2">1행 1번째 내용</td><td>1행 2번째 내용</td>
  </tr>
  <tr>
    <td>2행 1번째 내용</td>
  </tr>
</table>



1행 1번째 내용1행 2번째 내용
2행 1번째 내용



rowspan 속성을 사용해, 밑에 있어야 할 칸과 하나로 합칠 수 있습니다.






colspan 속성으로, 옆 칸과 하나로 합치기




<table border="1">
  <tr>
    <td colspan="2">1행 1번째 내용</td>
  </tr>
  <tr>
    <td>2행 1번째 내용</td><td>2행 2번째 내용</td>
  </tr>
</table>



1행 1번째 내용
2행 1번째 내용2행 2번째 내용



colspan 속성을 사용해, 옆에 있어야 할 칸과 하나로 합칠 수 있습니다.

colspan 과 rowspan 속성은 2 이상의 값을 가져야 합니다. 또한 이 속성을 CSS로 조정할 수 없습니다. 이것은 표의 '스타일'이 아니라, 표의 '내용'의 일부이기 때문입니다. (colspan 과 rowspan 속성은 XHTML 규약에도 위배되지 않습니다.)








▶▶ 블로거(blogger.com)에서, 테이블(table) 태그 위쪽 여백의 문제 해결

▶▶ HTML-CSS] 수직선 태그, 세로 줄 긋기, 다단 편집; Vertical Line Tag

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top