[CSS] table 요소의 기본 구성

<TABLE>요소는 테이블 "표"를 만드는 HTML 태그입니다. 아래 테이블 "표"를 작성하는 테이블의 기본 구조입니다.

<table> 
  <tr>
   <td>셀(Cell) 1</td>
   <td>셀(Cell) 2</td>
  </tr> 
  <tr>
   <td>셀(Cell) 1</td>
   <td>셀(Cell) 2</td>
  </tr> 
</table> 

table 요소：<table> 〜 </table>

테이블을 만들려면 테이블 태그, <table> 〜 </table>로 나타냅니다. 표의 테두리를 표시하고, 표의 속성을 설정하여 테이블의 크기, 선과 색 등을 표현할 수 있습니다.

tr 요소：<tr> 〜 </tr>

가로 1줄을 표시하려면, <tr> 〜 </tr>태그를 사용합니다.

td 요소：<td> 〜 </td>

데이터 셀을 만들려면 <tr>요소 안에 <td> 〜 </td> 태그를 넣습니다. 옆으로 2 개의 셀을 나라히 정렬시킬 경우, table요소에 td요소 2개를 넣습니다.

<table border="1" width="300" height="100">
  <tr bgcolor="#ff33">
   <td>셀(Cell) 1</td>
   <td>셀(Cell) 2</td>
  </tr> 
  <tr>
   <td>셀(Cell) 1</td>
   <td>셀(Cell) 2</td>
  </tr> 
</table> 

<th> 요소

"table header cell"의 약자로, <td>과 같이, <th> 태그는 셀(Cell)을 의미하는 태그입니다.

그 차이는, </td> 태그는 데이터를 나타내는 태그를 표시하는 반면, <th> 태그는 "제목"을 나타내는 태그입니다. <th>〜</th>로 묶인 부분은 문자가 굵게 표시되고 중앙에 표시됩니다.

<table> 
  <tr>
   <th>셀(Cell) 1</th>
   <th>셀(Cell) 2</th>
  </tr> 
  <tr>
   <td>셀(Cell) 1</td>
   <td>셀(Cell) 2</td>
  </tr> 
</table> 

table 속성