라벨이 테이블스타일인 게시물 표시

CSS 테이블, 표 스타일 셀 여백 및 테두리 한줄로 표현하는 방법

이미지
테이블 제목 위치 지정 caption-side 속성 HTML 태그로 표를 작성할 때 table 태그를 사용하며, table 태그 하위에 caption 태그로 표 제목을 지정할 수 있습니다. 이때 표 제목의 위치는 기본값으로 위에 표시됩니다만 표 제목을 아래에 위치시키고 싶을 경우 caption-side 속성을 사용하면 됩니다. caption-side 속성 기본형 caption-side : top | bottom 표 테두리 스타일 border 속성 표 테두리의 스타일 변경이 필요할 때는 border 속성을 사용하면 됩니다. border 속성은 표 이외에도 다양한 곳에 사용됩니다.  기본적으로 HTML의 table 태그로 그려진 표의 테두리는 외부 테두리와 내부 테두리로 표현이 됩니다. 외부 테두리는 table 태그에 스타일 지정해 주면 되고, 내부 테두리는 td, th 태그에 지정해 주면 됩니다. border 속성 기본형 border : <테두리 굵기> <테두리 모양> <테두리 색> border 테두리 속성값 리스트 속성값 설명 none 테두리 표시 안함.(단 주변에 의해서 그려질 수 있음.) hidden 테두리 표시 안함.(강한 우선순위로 표시되지 않음.) dotted 테두리가 점선으로 표현 dashed dotted 보다 길게 표현되는 점선 solid 테두리가 직선으로 표현 double 테두리가 두 선으로 표현 groove 테두리가 파인 듯한 모양으로 표현 ride 테두리가 튀어나온 듯한 모양. inset 테두리가 파인 듯한 모양으로 표현. boder-collapse의 값에 따라 차이가 있음. outset 테두리가 튀어나온 듯한 표현. boder-collapse의 값에 따라 차이가 있음. border 속성 사용 예제     < style >         table     {         border : 2px solid gray ;         caption-side : bottom ;         }