HTML Standards compliance for GridView

Question

We use Gridviews in a number of pages. We use a 508 accessibility software suite to check our pages for accessibility and standards compliance.

No matter what we try, we always get this non-compliance for our Gridview:

"The border attribute on the table element is obsolete. Use CSS instead. "

(We also get this for rules, cellspacing, etc.)

We are not specifying an explicit border attribute. It appears to be coming from the table generated by the Gridview. We ARE using css to style the table.

We cannot "make" this go away. Surely someone else has run into this issue? Not to put to fine a point on it, why is Gridview generating HTML code with deprecated attributes?

Answer 1

the GridView is old code and not getting updates. It is coded to write out style information at the element level, not use css classes. Also its old html style commands.

Your best bet is to replace with a newer 3rd party control, or create your own.

you could also write an output filter that parsed the output html, and removed the style commands, or render the grid control to a string, and edit the output.

Answer 2

Hum, consider just adding a bootstrap class to the table.

So, the gv by default looks like this:

I have borderstyle = none.

So, this markup:

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID"  width="40%"  BorderStyle="None"
         OnRowDataBound="GridView1_RowDataBound" >
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
            <asp:BoundField DataField="LastName" HeaderText="LastName"  />

And we get this:

however, if we add the plain jane bootstrap class(s) to above

eg:

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID"  width="40%"  BorderStyle="None"
        CssClass="table"
         OnRowDataBound="GridView1_RowDataBound" >
        <Columns>

We now get this:

Now, the above might not pass your "checker", but then again, EVERY table on the web that uses hte basic bootstrap table class would also then fail, would it not? And if a simple bootstrap table don't pass that checker, then perhaps some "wiggle" room exists here in regards to your compliance.

And, I suppose you could drop in this style sheet right above the GV.

This:

    <style>
      table {
        border-collapse: collapse;
        border: none;
      }
      tr {
        border-top: 1px solid black;
      }
      tr:first-child {
        border: none !important;
      }
      th {
        border: none !important;
      }
      td {
        border: none !important;
      }
    </style>

And we now see this:

so, if a plain jane "standard" bootstrap "default" table does not suffice, then above would remove the outside border, the vertical lines.

I don't have a "compliance" checker, but I suspect this issue will in the future come along and I'll have to deal with this issue also.

However, do keep in mind that a gridview quite much just generates standard table, tr, th tags, and they can be quite much formatted how you want - much like any html.

Answer 3

Hi @Allison, Peter S. (MSFC-IS61)[EAST2]

I can use the properties that come with the gridview to complete the design.

<form runat="server">
   <asp:GridView ID="GridView33" runat="server" AllowPaging="True"
            AutoGenerateColumns="False" PageIndex="2" Width="95%" Summary="Sample Data"
                RowHeaderColumn="SampleNumber"
                >
     <Columns>
            <asp:BoundField DataField="Id" HeaderText="Number " />
            <asp:BoundField DataField="Description" HeaderText="description" />
     </Columns>
                <RowStyle />
                <HeaderStyle CssClass="GridHeader4" />
                <EditRowStyle BorderStyle="Solid" />
                <AlternatingRowStyle BackColor="#CCCCCC" />
</asp:GridView> 
    </form>

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<CartItem> shoppingCart = new List<CartItem>();
                shoppingCart.Add(new CartItem(1, "notebook Computer"));
                shoppingCart.Add(new CartItem(2, "HD Plasma Televsion"));
                shoppingCart.Add(new CartItem(3, "Lava Lamp"));
                GridView33.DataSource = shoppingCart;
                GridView33.DataBind();
            }
        }
        public class CartItem
        {
            private int _id;
            public string _description;

            public int Id
            {
                get { return _id; }
            }
            public string Description
            {
                get { return _description; }
            }
            public CartItem(int id, string description)
            {
                _id = id;
                _description = description;
            }
        }

I think your results are related to the SortSite 5.35 for 508 criteria.

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.