이미지 및 캡션 및 캡션 테이블이 구성되어 나타나지 않습니다.

Question

저는 웹 사이트에서 "온라인 상점"이라는 섹션을 만들고 있습니다. 나는 제품을 전시하는 방법에 대해 생각했고 "경계없는 표"가 내 마음에 온 것이었다. 나는 만들었지 만 캡션의 일부는 제품 이미지 아래에 숨겨져 있습니다. 거기에 국경없이 테이블을 수정하거나 시도 할 수있는 방법이 있습니까?

> <table> <tr> 
>  <td><figure> <img src="cartt.png" alt="The Pulpit Rock" width="130" height="130"> <figcaption>French Manicure<br/>150SR<p 
> style="color:green;">In Stock</p></figcaption> </figure> </td> 
>  <td><figure> <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130"> <figcaption>French Manicure<br/>150SR<p 
> style="color:green;">In Stock</p></figcaption> </figure></td> 
>  <td><figure> <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130"> <figcaption>French Manicure<br/>150SR<p 
> style="color:green;">In Stock</p></figcaption> </figure></td> </tr> 
> <tr> 
>  <td><figure> <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130"> <figcaption>French Manicure<br/>150SR<p 
> style="color:green;">In Stock</p></figcaption> </figure></td> 
>  <td><figure> <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130"> <figcaption>French Manicure<br/>150SR<p 
> style="color:green;">In Stock</p></figcaption> </figure></td> 
>  <td><figure> <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130"> <figcaption>French Manicure<br/>150SR<p 
> style="color:green;">In Stock</p></figcaption> </figure></td> </tr> 
> </table> 

Answer 1

지금까지 국경없는 테이블이 아닌 다른 뭔가를 사용하는 등, 나는 table vs. div debate의 'DIV'측에 떨어지는 경향이있다, 그래서 당신의 table 레이아웃 대신에 div의 고려 제안; 그러나, 당신이 테이블로 시작한 이래로, 아래의 코드 조각은 테이블도 사용합니다.

질문에 설명 된 문제 (이미지에 가려진 캡션)가 표시되지 않았습니다. 그러나 몇 가지 오타가 있었고 출력이 이상하게 보였던 잘못된/잘못된 문자가있었습니다 (태그 전체에 > 초임, 태그 외부에 style 속성 등). 처음 질문을 게시하지 않은 CSS가 있습니까? 어쨌든, 여기 코드 조각이 조금 깔끔하게 정리되어 있고, 내가 본 것처럼 보이기 때문에 내용을 표시하는 스 니펫이 있습니다.

img.productTumbnail { 
 
    height: 130px; 
 
    width: 130px; 
 
} 
 
span.inStock { 
 
    color: green; 
 
}

<table> 
 
    <tr> 
 

 
    <td> 
 
     <figure> 
 
     <img src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock"> 
 
     <figcaption>French Manicure 
 
      <br/>150SR 
 
      <span class="inStock">In Stock</span> 
 
     </figcaption> 
 
     </figure> 
 
    </td> 
 

 
    <td> 
 
     <figure> 
 
     <img src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock"> 
 
     <figcaption>French Manicure 
 
      <br/>150SR 
 
      <span class="inStock">In Stock</span> 
 
     </figcaption> 
 
     </figure> 
 
    </td> 
 

 
    <td> 
 
     <figure> 
 
     <img class="productThumbnail" src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock"> 
 
     <figcaption>French Manicure 
 
      <br/>150SR 
 
      <span class="inStock">In Stock</span> 
 
     </figcaption> 
 
     </figure> 
 
    </td> 
 
    </tr> 
 
    > 
 
    <tr> 
 

 
    <td> 
 
     <figure> 
 
     <img class="productThumbnail" src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock"> 
 
     <figcaption>French Manicure 
 
      <br/>150SR 
 
      <span class="inStock">In Stock</span> 
 
     </figcaption> 
 
     </figure> 
 
    </td> 
 

 
    <td> 
 
     <figure> 
 
     <img class="productThumbnail" src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock"> 
 
     <figcaption>French Manicure 
 
      <br/>150SR 
 
      <span class="inStock">In Stock</span> 
 
     </figcaption> 
 
     </figure> 
 
    </td> 
 

 
    <td> 
 
     <figure> 
 
     <img class="productThumbnail" src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock"> 
 
     <figcaption>French Manicure 
 
      <br/>150SR 
 
      <span class="inStock">In Stock</span> 
 
     </figcaption> 
 
     </figure> 
 
    </td> 
 
    </tr> 
 
</table>