HTML 테이블

테이블 태그

<table> : 테이블 컨테이너이며 테이블의 시작과 끝에 삽입
<caption> : 표 제목
<thead> : 테이블의 헤딩 셀 그룹
<tbody> : 테이블의 데이터가 들어가는 셀 그룹
<tfoot> : 테이블의 바닥 셀 그룹
<tr> : 행 그룹. td와 th를 포함
<th> : 제목 셀
<td> : 데이터 셀

기본형태 예제

<table>
  <caption대학교</caption>
  <thead>
    <tr>
      <th>학교</th>
      <th>창립년도</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>서울대학교</td>
      <td>1946</td>
    </tr>
    <tr>
      <td>연세대학교</td>
      <td>1885</td>
    </tr>
  </tbody>
</table>

 

행, 열 합치기(rowspan, colspan)

<table>
  <caption>대학교</caption>
  <thead>
    <tr>
      <th>번호</th>
      <th>학교</th>
      <th>창립년도</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!--아래로 두칸 합침-->
      <td rowspan="2">1</td>
      <td>서울대학교 관악캠퍼스</td>
      <td>1946</td>
    </tr>
    <tr>
      <td>서울대학교 연건캠퍼스</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>2</td>
      <!--옆으로 두칸 합침-->
      <td colspan="2">연세대학교 1885</td>      
    </tr>
  </tbody>
</table>

Single line border(1픽셀 테두리 테이블)

table {
  width: 100%;
  border: 1px solid #444444;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #444444;
}