image - make a table from ul elements without the top and the sides borders in CSS -

value 1 || value 2
^^^^^^^^^^^^^^^^^^^^^^
value 1 || value 2
^^^^^^^^^^^^^^^^^^^^^^
value 1 || value 2
^^^^^^^^^^^^^^^^^^^^^^

i have ul tag inside them there li tags text , image. want them table above. inside each block there image , text next each other. table without borders top & left & right ((the || , ^ line of table))

<ul>    <li>value 1</li>    <li>value 2</li>    <li>value 3</li>    <li>value 4</li>    <li>value 5</li>    <li>value 6</li> </ul> 

inside each li tags there be:

<li>    <img src="test.jpg"/>    <p>some text</p> </li> 

nesting set of uls each li.

working jsfiddle example

<ul class="top-level">     <li class="border-bottom">         <ul class="horizontal">             <li class="border-right">                 <p>some text</p>             </li>             <li>                 <p>some text</p>             </li>         </ul>     </li>     <li class="border-bottom">         <ul class="horizontal">             <li class="border-right">                 <p>some text</p>             </li>             <li>                 <p>some text</p>             </li>         </ul>     </li>     <li class="border-bottom">         <ul class="horizontal">             <li class="border-right">                 <p>some text</p>             </li>             <li>                 <p>some text</p>             </li>         </ul>     </li>  </ul> 

and use css:

.horizontal li {     list-style-type: none;     display: inline-block;     padding-right: 5px; }  .top-level {     list-style-type: none; }  .border-right {     border-right: 1px solid black; }  .border-bottom {     border-bottom: 1px solid black; } 

you can modify borders whatever styles want.