Create a Detail Page - Step II
9. Click inside the table and then Insert > Table and use the following settings in the Insert Table window.
10. Click inside the top cell of the table you just inserted and set the Bg to #FFFFFF in the Property Inspector.
11. Repeat Step 11 for the other three cells in the table.
12. Click inside the top cell and type Product Name: and put a space after it.
13. Click inside the second row and type Description: and put a space after it.
14. Click inside the third row and type Price: $ in it.
15. Click inside the bottom row and type Return to List in it. Then set the Horz to Center for this cell
16. Now you need to get the CSS that was used on the table in the listBy.asp page. The easiest way to do this is to open the listBy.asp page, go into Code View and copy and paste the following just above the </head> tag of the detailPage.asp.
<style type="text/css">
<!--
.tblHeader {
font: bold 18px "Courier New", Courier, mono;
color: #336666;
}
.tblData {
font: 14px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
.tblData a {
font: 14px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
-->
</style>
17. Click inside the top cell of the table and then right-click on the <td> in the bottom of the Design View window and select Set Class > tblData.
18. Repeat Step 18 for the other three table cells.
19. In the Bindings Panel, click on the (+) sign to the left of Recordset(rsProduct) to expand it.
20. In the Bindings Panel, click on ProductName and drag it to the top cell, to the right of Product Name:. Click between Product Name: and the data you just inserted and make sure there is a space there.
21. In the Bindings Panel, click on ProductDescription and drag it to the second cell, to the right of Description:. Click between Description: and the data you just inserted and make sure there is a space there.
22. In the Bindings Panel, click on UnitPrice and drag it to the third cell, to the right of the ($) dollar sign.
23. In the Bindings Panel, click on the down arrow to the right of UnitPrice and select Number > 2 Decimal Places.
24. Highlight Product Name: and then right-click on it and select CSS Styles > tblHeader.
25. Highlight Description: and then right-click on it and select CSS Styles > tblHeader.
26. Highlight Price: and then right-click on it and select CSS Styles > tblHeader.
Click here to continue the tutorial.