TableSorter 는 웹 애플리케이션에서 테이블을 정렬하고 필터링하는 데 사용되는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 테이블 셀에 이미지를 추가하는 방법을 알아보겠습니다.

1. 이미지를 표시할 테이블 생성

   HTML 테이블을 생성하고, 이미지를 포함할 셀에는 <img> 요소를 추가합니다.

   <table id="myTable" class="tablesorter">
     <thead>
       <tr>
         <th>제목</th>
         <th>설명</th>
         <th>이미지</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>항목 1</td>
         <td>설명 1</td>
         <td><img src="image1.jpg" alt="이미지 1"></td>
       </tr>
       <tr>
         <td>항목 2</td>
         <td>설명 2</td>
         <td><img src="image2.jpg" alt="이미지 2"></td>
       </tr>
       <!-- 나머지 테이블 로우 추가 -->
     </tbody>
   </table>
   

2. TableSorter 라이브러리 추가

   TableSorter 라이브러리와 관련 CSS 파일을 HTML에 추가합니다.

   <script src="jquery.tablesorter.min.js"></script>
   <link rel="stylesheet" href="theme.default.css">
   

3. TableSorter 초기화 및 테이블 활성화

   자바스크립트로 TableSorter를 초기화하고, 테이블을 활성화합니다.

   $('#myTable').tablesorter();
   

   위의 코드에서 #myTable은 테이블의 ID에 해당하는 부분입니다.

이제 테이블은 TableSorter에 의해 정렬 및 필터링될 수 있고, 이미지가 셀에 표시됩니다.

더 많은 기능과 옵션에 대한 자세한 내용은 TableSorter 공식 문서를 참조하세요.