テーブルを順序なしリストに置き換える

Question

テーブルの使用を削除し、HTMLリスト（<ul>および<li>）に置き換える必要があります。置き換えられるHTMLコードは次のとおりです

<table> 
    <tr> 
     <td> 
      <img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /> 
     </td> 
     <td> 
      <table> 
       <tr><td>John Smith</td></tr> 
       <tr><td>24 years</td></tr> 
       <tr><td>Chicago</td></tr> 
      </table> 
     </td> 
    </tr> 
</table> 

リストを使用して複数のオプションを試しましたが、この表示を達成できませんでした。右側のテキストは常にリストを使用して画像の下に表示され、縦のテキストリスト（名前、年齢、都市）を画像に隣接させたい、つまりリストは上の表で作成されたものと同じ形状を生成する必要があります。

これはHTMLリストを使用してCSSを介してどのように行うことができるか教えてください。

Answer 1

これについては多くのチュートリアルがあります。グーグルやw3schools.comで試してみてください。

またはこれを確認することができる。このため、テーブルプロパティ： はhttp://www.javascriptkit.com/script/script2/verticalmenu.shtml

Answer 2

あなたは、ディスプレイを使用することができます。このために、この

<style> 
.profile li{ 
    float: right; 
    clear: right; 
} 
.profile .image{ 
    float: left; 
    clear: none; 
} 
</style> 
<ul class="profile"> 
    <li class="image"><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li> 
    <li>John Smith</li> 
    <li>24 years</li> 
    <li>Chicago</li> 
</ul> 

Answer 3

ような何かを試みることができます。このように書く：

CSS

<ul class="profile"> 
    <li><img width="40" height="40" src="../images/johnsmith2.jpg" alt="johnsmith2" /></li> 
    <li> 
     <ul> 
      <li>John Smith</li> 
      <li>24 years</li> 
      <li>Chicago</li> 
     </ul> 
    </li> 
</ul> 

チェックここでは、このhttp://jsfiddle.net/GCfSx/1/

Answer 4

.profile > li{ 
    display:table-cell; 
} 

.profile{ 
    display:table; 
} 

HTMLは、あなたの必要なソリューションが含まれていjsFiddle上の例で、あります...

http://jsfiddle.net/ZHbxr/16/

あなただけのサイドノートparent <ul> display as tableとinner <li> display as table-cell