如何将<ul>元素转换为DataTable？

Question

我想将此<ul>转换为数据表：

<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的value元素）中的名称和电子邮件值替换为正确的名称和电子邮件值。<ul>元素的布局非常好，因为文本在右边的好字体和左边的图像，我想在DataTable中复制它。