HTML&CSS: 테이블(표) 만들기(팁)

홈페이지에 나와있는 표들도 페이지를 만들 때 코딩하게 되는데,

테이블을 만들때 순서는 이렇다.

 

1. 표의 행, 열을 센다. 
2. 전체 틀을 잡는다. (너무 많을 시에는 반정도 틀을 잡는다.)
3. 셀을 한줄씩 병합한다.
4. 내용을 입력한다.
5. 스타일 꾸미기 ( 설명은 display:none으로 가림 )

 

<table>
    <caption></caption> <!-- 설명입력 -->
    <colgroup>
    <col style="width: px;" /> <!-- 세로의 줄만큼 -->
    	..
    </colgroup>
    <thead></thead> <!-- 표 제목부분 -->
    <tbody></tbody> <!-- 표 내용 -->
</table>

 

 

thead와 tbody의 안에 입력 방식은 이렇다.

 

<thead>
<tr> <!-- 1 -->
    <th>이름</th>
    <th>나이</th>
</tr>
</thead>
<tbody>
<tr> <!-- 2 -->
    <td>김멍멍</td>
    <td>16</td>
</tr>
<tr> <!-- 3 -->
    <td>곰돌이</td>
    <td>13</td>
</tr>
</tbody>

 

한줄씩 생각하면 된다.

 

 

 

병합시에는, 예를들어 위아래로 두칸을 합칠경우 rowspan="2"와 같이 입력후 다음<tr>의 <td> 줄을 지운다.

가로로 두칸을 합칠경우 colspan="2"를 입력후 바로 밑의 <td>를 지운다.