HTML의 테이블 셀 내부에 이미지 추가

이 기사에서는 HTML에서 테이블 셀 내부에 이미지를 추가하는 방법을 소개합니다.

img 태그를 사용하여 HTML의 td 요소 내부에 이미지 추가

테이블 데이터인 td 요소 내부의 img 태그를 사용하여 테이블 셀 내부에 이미지를 추가할 수 있습니다. td 태그는 테이블의 각 셀을 정의합니다.

<td></td> 안의 모든 데이터는 테이블 셀의 내용입니다. img 태그에서 이미지 소스를 지정할 수 있습니다.

<td>
 <img src="image.jpg">
</td>

그러면 테이블 셀 안에 image.jpg라는 이름의 이미지가 표시됩니다.

예를 들어 table 태그를 사용하여 테이블을 생성합니다. 테이블의 테두리가 표시될 수 있도록 border 속성에서 3의 테두리를 지정합니다.

다음으로 tr 태그를 사용하여 세 개의 테이블 행을 만듭니다. 첫 번째 tr은 테이블 헤더 th용이고 나머지 td는 테이블 데이터용입니다.

첫 번째 tr 테이블 행에서 th 태그를 사용하여 Name, Address 및 Image 제목을 지정합니다. 그런 다음 두 번째 및 세 번째 행에서 td 안에 이름, 주소 및 이미지를 지정합니다.

예를 들어 Jack Austin과 France를 두 번째 tr에 대한 테이블 데이터로 씁니다.

그런 다음 td 안에 위와 같이 img 태그를 생성하고 그림을 삽입합니다. 마찬가지로 두 번째 행의 데이터를 채웁니다.

height 및 width 속성을 사용하여 img 태그 내부에 이미지의 높이와 너비를 지정합니다.

아래 예는 테이블 셀 내부에 이미지를 추가하기 위한 위 명령의 구현을 보여줍니다. 테이블에 3개의 행이 있습니다.

첫 번째 행에는 각 열의 머리글이 포함되고 나머지 행에는 데이터가 포함됩니다.

img 태그를 사용하여 테이블의 세 번째 열에 이미지를 추가했습니다. 우리는 img 태그가 이미지를 삽입할 때마다 쓸 수 있다는 것을 배웠습니다.

이미지가 HTML 파일과 동일한 폴더/디렉토리에 있다고 가정합니다. img 태그의 src에 올바른 이미지 경로를 지정해야 합니다. 그렇지 않으면 이미지가 표시되지 않습니다.

예제 코드:

<table border="3" align="center">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Image</th>
  </tr>
  <tr>
    <td>Jack Austin</td>
    <td>France</td>
    <td><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>United States</td>
    <td height=100 width=100><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
</table>