Table

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
    </tr>
    <tr>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

table 태그의 기본 구성이다.

thead 태그는 table의 헤드영역, tbody 태그는 table의 바디영역이다.

tr은 row (가로) td는 column (세로)를 나타낸다. (th로 기본으로 굵게 되어있어서 헤드영역에 쓰이는 태그도 존재)

 

colspan 태그와 rowspan 태그로 셀병합도 가능한대, colspan은 세로의 줄을 합치며, rowspan은 가로의 줄을 합친다.

colspan의 예제

 

rowspan의 예제

 

<table bgcolor="green" bordercolor="red">

위처럼 table 태그에 bgcolor를 주면 테이블의 색, bordercolor을 주면 경계선의 색이 된다.

border-collapse: separate | collapse | initial | inherit

테이블의 경계선들이 불편하면 border-collapse를 css에 달아주면 된다.

separate는 위와 같이 구분하며, 간격의 크기는 border-spacing을 이용한다.

collapse는 겹치게 하여 한줄로 나타낸다.

initial은 기본값이며, inherit은 부모의 속성을 상속받는다.

 

vertical-align : middle;

테이블 셀 내에서 요소들을 상하정렬 할 땐 위처럼 vertical-align 을 준다. top, middle, bottom속성이 있다.