테이블을 배경과 차별화하면 웹 페이지의 다른 모든 항목과 비교하여 테이블의 내용을 강조하는 데 도움이됩니다. 표 배경을 추가하려면 웹 페이지를 지원하는 CSS (Cascading Style Sheet)를 조정해야합니다.
시작하기
배경 이미지를 표에 추가하는 가장 좋은 방법은 CSS를 사용하는 것입니다.
배경
재산. CSS를 효과적으로 작성하고 예기치 않은 표시 오류를 피하기 위해 배경 이미지를 열고 높이와 너비를 적어 두십시오. 그런 다음 이미지를 호스팅 제공 업체에 업로드하십시오. 이미지의 URL을 테스트하십시오. 이미지가 표시되지 않는 가장 일반적인 이유 중 하나는 URL에 오타가 있기 때문입니다.이 단계를 완료 한 후에는 CSS 스타일 블록을 문서의 머리 부분에 넣으십시오.
table {background : url ( " 이미지 URL ") no-repeat;} 이미지 너비 및 높이와 일치하도록 표의 너비와 높이를 설정합니다. 표 내용이 이미지 높이 및 너비보다 큰 경우 배경 이미지는 한 번만 표시됩니다. 위의 지침은 페이지의 모든 테이블에 동일한 배경 이미지를 설정합니다. 특정 테이블에만 배경을 두려면, 수업
table.background {background : url ( " 이미지 URL ") no-repeat;} 큰 테이블이나 내용이 많은 테이블은 전체 테이블이 채워지도록 배경을 반복해야 할 수도 있습니다. 이미지가 y 축, x 축에서 반복되거나 둘 다에 바둑판 식으로 배열되도록 CSS의 값을 변경합니다. 배경 : url ( "URL to image") 반복;
기본적으로 반복 값이 바둑판 식으로 표시되지만 반복 값을로 설정할 수도 있습니다. 반복 - x
또는 반복 - y 표 셀에 설정된 배경색은 표의 배경 이미지보다 우선합니다. 따라서 표 배경 이미지와 함께 셀에 배경색을 사용할 때는주의하십시오. 테이블 배경은 기본 페이지와 테이블을 구분합니다. 그러나이 기술을 사용하기 전에 두 번 생각하십시오. 중립적 인 이미지 삽입은 산만하지 않을 수 있지만 귀엽고 (예 : 애완 동물 입양을 나타내는 테이블 뒤에 새끼 고양이 그림 삽입) 전문가가 아닌 것처럼 보일 수있는 복잡한 그림이 테이블 형식 데이터의 가독성에 영향을 줄 수 있습니다. 사용하는 이미지는 적법한 사용 허가를 받아야합니다. 웹상에서 사진을 찾을 수 있다고해서 그것이 자신의 용도에 맞게 적합하다는 것을 의미하지는 않습니다. 저작권을 존중하십시오!
셀 1 셀 2 셀 1 셀 2 …
하나의 테이블에 배경 넣기
클래스 = "배경" style = "width : 400px, height : 500px;> …
표 배경 이미지 반복하기
가로 또는 세로로 각각 배열합니다.
셀 배경 색은 표 배경 이미지를 차단합니다.
고려 사항
