asp.net中用Gridview如何以列表形式显示数据，急！！（在网上都查完了，还是找不到）

如何用Gridview做出如下图的效果，
 
编辑模式图 浏览模式图
Browsebook.aspx源码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BrowserBook.aspx.cs" Inherits="DesktopModules_Book_BrowserBook" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>浏览书籍</title>
    <LINK href="../../Css/ASPNET2NoLinkCss.css" type="text/css" rel="stylesheet">
</head>
<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
    <form id="form1" runat="server">
<table width="100%" height="100%" border="0" bgcolor="#9999ff" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<asp:GridView ID="gvBook" BorderWidth="1" BorderColor="#5A7DD1" Runat="server" CssClass="Normal"
AutoGenerateColumns="False" ShowHeader="False" Width="100%" DataKeyNames="BookID,Desn,Name" OnRowCommand="gvBook_RowCommand" OnRowCreated="gvBook_RowCreated">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table cellpadding="2" cellspacing="0" width="100%" border="0" class="Normal">
<tr>
<td>
<a href='ViewBook.aspx?BookID=<%# Eval( "BookID") %>' target="_blank"><asp:Image ID="BookPicture" Runat="server" Width="90" ImageUrl='<%# "../.." + Eval( "Pictures[0].Url") %>' Height="120"></asp:Image></a>
</td>
<td width="100%" align="left">
<table cellpadding="0" width="100%" cellspacing="0" border="0" class="GbText">
<tr><td width="50%"><table cellpadding="2" width="100%" cellspacing="2" border="0">
<tr>
<td>
<font class="GbText">书籍名称：<font color="Red"><a href='ViewBook.aspx?BookID=<%# Eval( "BookID") %>' target="_blank"><%# Eval( "Name") %></a></font></font>
</td>
</tr>
<tr>
<td>
<font class="GbText">书籍价格：<font class="Normal"><asp:Label ID="Price" CssClass="GbText" runat="server" Text='<%# Eval("Price")%>'></asp:Label></font>
</td>
</tr>
<tr>
<td>
<font class="GbText">书籍作者：<font color="Blue"><%# Eval("Author")%></font></font>
</td>
</tr>
<tr>
<td>
<font class="GbText">出版社：<font class="Normal"><%# Eval("Publish")%></font></font>
</td>
</tr>
<tr>
<td>
<font class="GbText">出版日期：<font class="Normal"><%# Eval("PublishDate","{0:d}")%></font></font>
</td>
</tr>
</table>
</td>
<td width="50%">
<table cellpadding="2" width="100%" cellspacing="2" border="0" class="Normal">
<tr>
<td>
<font class="GbText">书籍ISBN：<font color="Red"><%# Eval("ISBN")%></font></font>
</td>
</tr>
<tr>
<td>
<font class="GbText">属性(一)：<font class="Normal"><%# Eval("Attribute1")%></font></font>
</td>
</tr>
<tr>
<td>
<font class="GbText">属性(二)：<font color="Blue"><%# Eval("Attribute2")%></font></font>
</td>
</tr>
<tr>
<td>
<font class="GbText">属性(三)：<font class="Normal"><%# Eval("Attribute3")%></font></font>
</td>
</tr>
<tr>
<td>
<font class="GbText">属性(四)：<font class="Normal"><%# Eval("Attribute4")%></font></font>
</td>
</tr>
</table>
</td>
</td></tr>
<tr><td colspan="2"><hr size="1" /></td></tr>
<tr><td colspan="2"><a href='viewBookAttribute.aspx?BookID=<%# Eval("BookID")%>&AttributeFlag=0' target="_blank">书籍前言</a>
<a href='viewBookAttribute.aspx?BookID=<%# Eval("BookID")%>&AttributeFlag=1' target="_blank">书籍目录</a>
<a href='viewBookAttribute.aspx?BookID=<%# Eval("BookID")%>&AttributeFlag=2' target="_blank">书籍内容提要</a>
<a href='ViewBookComment.aspx?BookID=<%# Eval("BookID")%>' target="_blank">查看书籍评论</a>
<asp:Button ID="BuyBook" Runat="server" CommandName="add" CssClass="ButtonCss" Text="加入购物车" Width="80"></asp:Button></td></tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>    
</td>
</tr>
</table>
    </form>
</body>
</html>