표 꾸미기

표 정렬하는 방법

표 정렬하는 방법 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 표는 기본적으로 다음과 같이 정렬됩니다.

표의 크기 정하는 방법 표와 셀의 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다.

배경색을 만드는 속성 배경 색상은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 배경색을 적용할 수 있습니다.

표를 삽입할 때 기본적으로 <table> 태그의 border 속성을 이용해 <table border="1"> 처럼 사용하면 표에 테두리를 그릴 수 있습니다. 여기에 CSS의 border 속성을 이용해 테두리의 색…

<table> 태그와 <td> 태그에서 border 속성을 사용하면 두 줄로 표시되는데, 이때 border-collapse 속성을 이용하면 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘지, 두 테두리를 하나…

border-spacing 속성은 border-collapse:separate를 사용해 셀들을 분리했을 경우(테두리를 하나로 합치지 않았을 때) 인접한 셀 테두리 사이의 거리를 지정합니다.

표 제목은 <caption> 태그를 이용해 캡션으로 표시합니다. 기본적으로 캡션은 표의 위쪽에 표시되지만 caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있습니다.

border-collapse:separate를 사용해 셀들을 분리했을 경우, empty-cells 속성을 사용해 내용이 없는 빈 셀들의 표시 여부를 지정합니다.

표 크기 고정시키는 방법 표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 250px인 간단한 표입니다. 표 안의 내용이 길면 줄바꿈되면서 크기를 유지합니다. …

display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다.