html 코딩 기본 테이블편 3강

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

세번째 강좌

두번째 강좌에서는 테이블의 구조적인 면이었습니다.

2강 테이블의 구조 보러가기

디자인적 구조로 디테일하게 알아보겠습니다.

테이블의제목

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

th, td 내부의 패딩, 간격조정방법

css

th, td {

    padding: 20px;

}

위와같이 테이블 내에 패딩을 쉽게 줄 수 있습니다.

제목이나 내용의 위치 정렬 3가지 LEFT, CENTER, RIGHT

css

th {

    text-align: center;

}

td {

    text-align: left;

}

td {

    text-align: center;

}

td {

    text-align: right;

}

테이블의제목

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

th는 가운데 정렬, td 게시물제목은 왼쪽정렬 이름은 가운데정렬 날짜는 오른쪽 정렬입니다.

위 css 소스는 예제일뿐이고 똑같이 쓰시려면 td:nth-child 를 사용하셔야합니다.

nth-child 는 따로 포스팅예정입니다. 궁금하신점은 따로 댓글남겨주세요!

테이블의 셀 합침 colspan, rowspan

테이블의 사용중 자주 사용하기도 골치아픈것중에 하나이기도 합니다.

두개혹은 여러개의 셀을 합치는것이죠 엑셀셀합치기와 같은 기능이라고 보면됩니다.

테이블의셀합침

이름	전화번호
니모	010	1234-5678

html

  <thead>

  <tr>

    <th>이름</th>

    <th colspan="2">전화번호</th>

  </tr>

  </thead>

  <tbody>

  <tr>

    <td>니모</td>

    <td>010</td>

    <td>1234-5678</td>

  </tr>

  </tbody>

<th colspan="2"> 숫자가 합치는 갯수를 의미합니다. 숫자에 따라 td도 맞춰야하니 갯수는 항상 잘 염두하셔야합니다. 안그럼 테이블이 엉키고 깨지는 현상을 보실수 있습니다.

테이블의셀합침

이름	니모
전화번호	010
	1234-5678

html

  <tr>

    <th>이름</th>

    <td>니모</td>

  </tr>

  <tr>

    <th rowspan="2">전화번호</th>

    <td>010</td>

  </tr>

  <tr>

    <td>1234-5678</td>

  </tr>

<th rowspan="2"> 세로합침은 가로보다 쪼금 복잡합니다.  보통은 왼쪽에 th 가 있을경우 많이 사용합니다.

상단에 th 가 있을경우는 대부분 리스트의 경우에 쓰이고 왼쪽에 th가 있는경우는 작성페이지 에 많이 사용합니다. 물론 정답은 없습니다. 사용자의 몫이기 때문입니다.

백그라운드컬러

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

테이블의 배경 컬러 디자인 background-color

그냥 선만 있을경우 어디가 제목이고 어디가 내용인지 구분안될때가 있죠.

시간에 쫒겨사는 현대인들은 여유있게 하나하나 구별하면서 기다려주지 않습니다.

백그라운드 컬러는 사용자의 UI를 위해서 구분해 주는것이 좋습니다.

html

table tr:nth-child(even) {

    background-color: #feffd6;

}

table tr:nth-child(odd) {

   background-color:#e2ffd6;

}

table th {

    background-color: #f8585b;

    color:#fff;

}

보통 th만 배경을 주고 td들은 안쓰는 경우가 대부분입니다. 

tr:nth-child(even), tr:nth-child(odd)

tr은 행을 그대로 첫번째부터 반복적으로  css를 줍니다.

even은 짝수, odd는 홀수로 css를 입히게 됩니다.

이정도만 알고계셔도 테이블의 관한 모든것을 알게되는것입니다.

다음 4강에서는 포토샵으로 디자인된 게시판 리스트를 직접 html 코딩해보도록 하겠습니다.