css테이블

home > css테이블

2강 : css테이블

各樣各色(각양각색) 여러 가지 모양과 빛깔

css테이블 지금 시작합니다!
CSS를 활용한다면, HTML 테이블의 모양은 CSS를 사용하여 크게 향상 될 수 있습니다.
이 border-collapse속성은 테이블 테두리를 단일 테두리로 축소할지 여부를 설정합니다.
테이블 주위에 테두리 만 표시하려면 border에 대한 속성만 지정하는게 좋습니다.
다양한 요소를 지정자로 사용할 수 있습니다.
무엇보다도 한 페이지내에 다양한 테이블 소스를 넣을 수 있고,
개별 컨트롤이 가능합니다.

table {
border: 1px solid black;
border-collapse: collapse;
}

소스해설입니다. 소스에 보시면 border는 쉽게 얘기해서 테이블 두께라고 생각하시면 됩니다.
두께면 그 다음에 당연히 숫자가 나와야겠죠? 얼마나 두꺼운지를 나타내야하기 때문입니다.
1px -> 이게 바로 두께를 얘기합니다. 가장 기본이 되는 두께이기도 합니다.
그 다음 인자로는 어떤것이 나와야할까요?
CSS TABLE에서 가장 중요한 요소일 수 있는 바로 "solid"입니다
테이블의 두께를 정했다면, 그 다음은 스타일을 정해야합니다.
이때 사용되는 것이 다양하게 있는데 예시로 solid를 알려드렸습니다.

/* This is
a two-line
comment */

table {
width: 50%;
}

th {
height: 70px;
}



테이블 속성관련입니다.
auto 해설 : 브라우저는 자동 테이블 레이아웃 알고리즘을 사용합니다.
열 너비는 셀에서 가장 넓은 끊을 수 없는 내용에 의해 설정됩니다.
fixed 해설 : 고정 테이블 레이아웃 알고리즘을 설정합니다.
표와 열 너비는 표의 너비로 설정되고 색상은 셀의 첫 번째 행 너비로 설정됩니다.
다른 행의 셀은 열 너비에 영향을 주지 않습니다.
첫 번째 행에 폭이 없는 경우 셀 내부의 내용에 관계없이 열 너비가 표에서 동일하게 분할됩니다.
initial 해설 : 이 속성을 기본값으로 설정합니다.
inherit 해설 : 상위 요소에서 이 속성을 상속합니다.


이 강좌에서는 테이블 스타일 반응형 테이블
내용을 다루고 있습니다. 더보기에서 확인해보세요. 궁금한 점이 있으면 참지 말고 댓글을 남겨주시면 제가 알고 있는 한도내에서 답변드리겠습니다.

+더보기





아직도 궁금하시죠? 다음 포스팅 보기