Как преобразовать элемент <ul>в DataTable?

Question

Я хочу преобразовать это <ul> в DataTable:

<ul>
                    <li><a href="#"> <p:graphicImage
                                name="images/child_M.png" library="ultima-layout" width="72" />
                            <span class="name">Joshua Williams</span> <span class="email">joshua@pf-ultima.com</span>
                    </a></li>
                    <li><a href="#"> <p:graphicImage
                                name="images/child_M.png" library="ultima-layout" width="72" />
                            <span class="name">Emily Clark</span> <span class="email">emily@pf-ultima.com</span>
                    </a></li>
                    <li><a href="#"> <p:graphicImage
                                name="images/child_F.png" library="ultima-layout" width="72" />
                            <span class="name">Susan Johnson</span> <span class="email">susan@pf-ultima.com</span>
                    </a></li>
                    <li><a href="#"> <p:graphicImage
                                name="images/child_F.png" library="ultima-layout" width="72" />
                            <span class="name">Kelly Stark</span> <span class="email">kelly@pf-ultima.com</span>
                    </a></li>
                </ul>

Где я хочу заменить значения имени и адреса электронной почты правильными значениями, которые поступают из списка (из элемента значенияDatatable) .Этот макет элемента <ul> очень хорош, так как текст справа, хороший шрифт и изображение слева, и я хочу скопировать его в DataTable.