html 코딩 기본 테이블편 2강

테이블은 데이터나열에 있어 정말 필요한 부분입니다.

두번째 강좌

첫번째 강좌에서는 아주 정말 기본적인 부분만 적어놓았습니다.

1강 보러가기

조금더 디테일하게 알아보도록 합시다.

테이블의제목

게시물제목	이름	날짜
안녕하세요!	작성자	2017.07.28
반갑습니다!	작성자	2017.07.28
어서오세요!	작성자	2017.07.28

html

<table>

  <caption>테이블의제목</caption>

  <thead>

  <tr>

    <th>게시물제목</th>

    <th>이름</th>

    <th>날짜</th>

  </tr>

  </thead>

  <tbody>

  <tr>

    <td>안녕하세요!</td>

    <td>작성자</td>

    <td>2017.07.28</td>

  </tr>

  <tr>

    <td>반갑습니다!</td>

    <td>작성자</td>

    <td>2017.07.28</td>

  </tr>

  <tr>

    <td>어서오세요!</td>

    <td>작성자</td>

    <td>2017.07.28</td>

  </tr>

  </tbody>

</table>

css

table {

    border-collapse: collapse;

    width: 100%;

}

td, th {

    border: 1px solid #dddddd;

    text-align: left;

    padding: 8px;

}

여기서 알아두셔야할것들은 이렇습니다.

html에서는

<caption>  -  해당테이블의 제목입니다. 보통의경우는 css에서 히든처리를 해놓습니다.

<thead> - 테이블 제목 <tr>을 감싸줍니다. html태그만 보았을때 이것이 테이블의 제목이다 라고 표현해주는거죠. 디자인상의 변화는 없습니다.

<tbody> - 테이블 내용 <tr>을 감싸줍니다. thead와 같이 제목외에 내용을 구분해주는 태그입니다.

thead,tbody 는 안써도 굳이 상관은 없습니다만. 사용하다가 보면 있는게 이래서 좋구나를 알 수가 있습니다.

css에서는

boder-collapse:collapse;

테이블의 기본 스페이스(빈공간)를 없애주는 css입니다.

보더컬립스를 넣지않고 그냥 html만 보면 테이블 보더가 두줄로 되는게 기본이죠. 

보더 컬립스를 쓰거나 아니면 th,td에 따로 보더를 줘도 됩니다.

예로들자면

th, td {border-right:1px solid #ccc; border-bottom:1px solid #ccc;}

위와같이 주면 모든 테이블의 오른쪽과 하단은 1px씩 보더가 생기게 되죠

왜 왼쪽과 상단은 없냐구요?

그러면 모든 보더가 2px씩 되거든요!

그래서 위와같이 주고 나중에 테이블에서 아래와 같이 마무리 합니다

table {border-top:1px solid #ccc; border-left:1px solid #ccc;}

이렇게 상단과 왼쪽을 보더를 주면 보더 컬립스와 같은 이치가 되는거죠

상황에 따라서 전자 후자 다 괜찮습니다.

테이블의 디자인이 여러형태 보더색이 틀리다던지. 이러면 후자가 더 좋습니다.

보더컬립스는 따로 설정할 수가 없으까요!

여기까지는 충분히 이해가 되셨나요?

그러면 위에 테이블을 보면 드는 생각이 있습니다.

각 내용들의 간격조정이죠.

테이블의제목

게시물제목	이름	날짜
안녕하세요!	작성자	2017.07.28
반갑습니다!	작성자	2017.07.28
어서오세요!	작성자	2017.07.28

<table>

  <caption>테이블의제목</caption>

  <colgroup>

  <col width="50%">

  <col width="25%">

  <col width="25%">

  </colgroup>

  <thead>

  <tr>

    <th>게시물제목</th>

    <th>이름</th>

    <th>날짜</th>

  </tr>

  </thead>

<colgroup> 을 사용하여 각 열들을 자유롭게 조정할 수 있습니다.

<col width="50%">

<col width="25%">

<col width="25%">

순서대로 게시물제목 50%, 이름 25%, 날짜 25% 퍼센트로 정확이 정렬이 됩니다. px단위로 하셔도 되요.

테이블을 짜다보면 좀 애매하게 계산이 안될 때가 있습니다. 그럴때는 * 로 해주시면 자동으로 잡아줍니다.

<col width="50%">

<col width="25%">

<col width="*">

이렇게 해놓으면 자동으로 25%로 설정한다는 말입니다. 순서 상관없이 쓰셔도 됩니다.

여기서 한가지 주의점은

<table>

<colgroup>

</colgroup>  <------ 여기에 위치해야한다는것입니다. 다른데로 코딩하시면 안됩니다.

<tr>

다음 3강에서는 테이블의 디자인에관해서 알아봅시다.