用无序列表替换表

Question

I have a requirement to remove the use of tables and replace the code with HTML lists ( <ul> and <li> ). The HTML code to be replaced is as below

<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>  

Tried multiple options using lists but could not achieve this display. The text on the right always went below the image using lists, I wanted the vertical text list (name, then age, then city) to be adjacent to the image ie the list should produce the same shape as produced by the above table.

Please let me know how this can be done via CSS with HTML lists.

Answer 1

There are so many tutorials for this. Keep googling or try in w3schools.com.

or may be check this: http://www.javascriptkit.com/script/script2/verticalmenu.shtml

Answer 2

You could try something like this

<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

For this you can use display:table property for this. Write like this:

CSS

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

.profile{
    display:table;
}

HTML

<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>

Check this http://jsfiddle.net/GCfSx/1/

Answer 4

Here is an example on jsFiddle , which contains your required solution...

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

You need to mark the parent <ul> display as table and the inner <li> display as table-cell