Formatting an Online Shopping Cart/PayPal System - Padding and Spacing
(Page 3 of 4 )
If you want to add some space around your rows' content you can implement the CellPadding property, which takes an integer value which simply specifies the amount of room to pad each cell with. This was used on the product listing to space things out, as otherwise the images seemed to run together with the border hidden. There's also the CellSpacing property, which will put space between each cell. The difference is that with padding the cell is grown and its background color and border will be stretched. With spacing this is not the case and you will see the page background (or table background if one is specified) between each cell. They say a picture is worth a thousand words, so here are two screenshots; the first is using CellPadding and the other is using CellSpacing:
CellPadding
CellSpacing
I altered the color of the alternate row so the difference between padding and spacing was clearer. With the shop design padding was the obvious choice as spacing looks pretty bad, but this really depends on how you implement everything. On another project spacing might be the appropriate choice.
Captions
If you want to display a caption inside the final rendered table you can easily do so via the Caption and CaptionAlign property:
Caption="Shopping Basket Table"
CaptionAlign="Left"
The caption can be used to give your viewers a quick reference to what the table shows and should be kept short. If you want to provide a deeper explanation for visually impaired users you can use the Summary property. Wait a minute, there is no summary property for the GridView! Okay you caught me, there isn't one, but that doesn't stop you putting one there. There's nothing stopping you from putting the following inside the GridView declaration:
summary="The shopping basket table is used to show the various items you have chosen from this shop"
It will still get rendered to the page like this:
<table class="shopgrid" cellspacing="0" cellpadding="10" summary="The shopping basket table is used to show the various items you have chosen from this shop" Cheese="Good" border="0" id="gvBasket" style="border-collapse:collapse;">
You can pass a lot of items through like this, which is great. You can see how the all important cheese attribute has been passed through with no problems. If you've never used the Caption or Summary attributes before you should check out what the W3C has to say on them here. As a side note, the caption's "align" property has been deprecated, so you might want to avoid using the GridView's CaptionAlign property.
Next: Product Paging >>
More C# Articles
More By Tann San
