w3스쿨즈 HTML(6) - 테이블[table]

HTML을 하다보면 가장 많이 사용되는 태그가 바로 테이블이다.

테이블은 표를 만들어주는 HTML 태그인데, 지금은 잘 사용하지는 않지만 과거에 웹사이트의 레이아웃을 배치할 때도 많이 사용되었던 태그이다.

 

테이블 속성 

<table>

테이블을 만드는 태그

<th>

테이블의 헤더

<tr>

테이블의 행

<td>

테이블의 열

 

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

 

테이블 디자인 속성

border	테이블의 테두리
bordercolor	테이블의 테두리 색상
width	테이블 가로 크기
height	테이블 세로 크기
align	정렬
bgcolor	배경색
colspan	가로 합병(열 합병)
rowspan	세로 합병(행 합병)

• border 속성은 테이블의 테두리를 설정해주는 속성 (border="2")
• bordercolor는 테두리의 색상을 지정하는 속성 (bordercolor="blue")
• width와 height는 테이블의 크기를 결정하는 속성 (width=10px width=20%)
• align은 테이블안에있는 값들을 정렬
• bgcolor속성으로 원하는 태그의 배경색을 지정
• colspan, rowspan은 셀을 합병(행/열)시키는 기능