이 글은 HTML에서 테이블 셀 내부에 이미지를 추가하는 절차를 설명합니다.
HTML에서 표 셀 안에 이미지를 추가하는 방법은 무엇입니까?
HTML ' ” 태그는 테이블 셀에 이미지를 삽입할 때 사용합니다.
통사론
구문에 따라 표 셀 안에 이미지를 삽입합니다.
< td >< 이미지 소스 = '' 모든 것 = '' 너비 = '' >< / td >
여기:
- “
” 요소는 이미지를 추가해야 하는 테이블 셀을 나타냅니다. - “
” 태그는 이미지를 지정하는 데 활용됩니다.
- “ 소스 ” 속성은 이미지의 경로를 설정합니다.
- “ 모든 것 ”는 이미지 로드에 실패한 경우 화면에 표시될 텍스트를 의미합니다.
- “ 너비 '는 이미지의 너비를 결정합니다.
예
HTML 파일에서 제공된 지침에 따라 테이블을 만듭니다.
- “ <테이블> ” 요소를 활용하여 테이블을 생성합니다.
- “
” 요소는 행을 지정합니다. - “ <일> ”는 제목을 조정합니다. 콜스팬 ” 속성은 셀이 얼마나 많은 열을 포함해야 하는지를 나타냅니다.
- “
” 데이터에 대한 테이블 셀을 생성합니다. “ ” 필수 속성이 있는 태그가 이 태그 내에 삽입되어 테이블 셀에 이미지를 포함합니다. < 테이블 >
< 트 >
< 일 콜스팬 = '삼' 스타일 = '글꼴 크기: 28px;' >과일 및 야채< / 일 >
< / 트 >
< 트 >
< 일 >이름< / 일 >
< 일 스타일 = '너비: 250픽셀;' >사진< / 일 >
< 일 >과일 / 야채< / 일 >
< / 트 >
< 트 >
< td >사과< / td >
< td >< 이미지 소스 = '/이미지/apples.jpg' 모든 것 = '사과' 너비 = '200' >< / td >
< td >과일< / td >
< / 트 >
< 트 >
< td >당근< / 일 >
< td >< 이미지 소스 = '/이미지/carrot.jpg' 모든 것 = '당근' 너비 = '200' >< / 일 >
< td >야채< / 일 >
< / 트 >
< 트 >
< td >오렌지< / 일 >
< td >< 이미지 소스 = '/이미지/orang.jpg' 모든 것 = '주황색' 너비 = '200' >< / 일 >
< td >과일< / 일 >
< / 트 >
< / 테이블 >포함된 이미지와 함께 HTML 테이블이 성공적으로 생성되었음을 확인할 수 있습니다.
CSS
이제 테이블의 레이아웃을 설정하는 데 사용되는 CSS 속성에 대해 설명합니다.
스타일 '테이블' 요소
먼저 ' <테이블> ” 태그 이름으로 요소를 선택하고 다음 속성을 적용합니다.
테이블 {
텍스트 정렬 : 센터 ;
너비 : 800픽셀 ;
국경 붕괴 : 무너지다 ;
여유 : 자동 ;
글꼴 크기 : 20픽셀 ;
}위 코드에 대한 설명은 다음과 같습니다.
- “ 텍스트 정렬 ” 텍스트 정렬을 설정합니다.
- “ 너비 '는 테이블의 너비를 결정합니다.
- “ 국경 붕괴 ” 속성은 테두리 축소 여부를 정의합니다.
- “ 여유 ” 테이블 주위에 공간을 추가합니다.
- “ 글꼴 크기 ”는 테이블의 텍스트 글꼴 크기를 정의합니다.
스타일 'th' 및 'td' 요소
일 , td {
국경 : 1px 단단한 자주색 ;
}여기서 “ 국경 ” 속성은 테두리 너비, 스타일 및 색상에 대한 값을 지정하여 요소 주위의 테두리를 조정합니다.
산출
이번 포스팅은 HTML에서 테이블 셀에 이미지 삽입에 대한 내용입니다.
결론
' 안에 이미지를 추가하려면 <테이블> ” 셀에서 “
” HTML 내의 태그 “
' 요소. ' ' 요소는 ' 소스 ” 속성을 사용하여 이미지 URL을 제공합니다. 보다 구체적으로 이미지 크기를 조정하려면 ' 키 ' 그리고 ' 너비 ” 속성은 '
' 태그 내에 있습니다. 이 블로그는 HTML 표 셀에 이미지를 추가하는 절차를 설명했습니다.
- “