표 꾸미기
표의 배경색 정하는 방법
배경색을 만드는 속성 배경 색상은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 배경색을 적용할 수 있습니다.
표 테두리 만드는 방법 - border
표를 삽입할 때 기본적으로 <table> 태그의 border 속성을 이용해 <table border="1"> 처럼 사용하면 표에 테두리를 그릴 수 있습니다. 여기에 CSS의 border 속성을 이용해 테두리의 색…
표 테두리와 셀 테두리 사이의 간격 없애기 - border-collapse
<table> 태그와 <td> 태그에서 border 속성을 사용하면 두 줄로 표시되는데, 이때 border-collapse 속성을 이용하면 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘지, 두 테두리를 하나…
표 테두리와 셀 테두리 사이 간격의 크기 지정 - border-spacing
border-spacing 속성은 border-collapse:separate를 사용해 셀들을 분리했을 경우(테두리를 하나로 합치지 않았을 때) 인접한 셀 테두리 사이의 거리를 지정합니다.
표 제목의 위치를 정하는 방법 - caption-side
표 제목은 <caption> 태그를 이용해 캡션으로 표시합니다. 기본적으로 캡션은 표의 위쪽에 표시되지만 caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있습니다.