Table Width or No Table Width: That is the Question

"To be, or not to be: that is the question:"
-William Shakespeare

Width is a very important element in application design. If not used wisely, it can break entire web page designs. A few days back I was working on fixing few bugs in an application. The QA team reported that they were not able to see a table —which was created using GridView of .Net. The table was not displaying data properly. Here is an example of it:

Hi, my wife tried to use a credit card online by inserting it into the floppy port of our pc. I have tried to fish it out but looks like it will have to come apart to retrieve the card. Is that a easy task to do?
What would be your immediate reaction to spilling a beverage on your laptop?

Here is HTML code for this

<table cellspacing="0" cellpadding="5" border="1">
  <tr>
    <td>
      Hi, my wife tried to use a credit card online by
inserting it into the floppy port of our pc. I
have tried to fish it out but looks like it will
have to come apart to retrieve the card. Is that
a easy task to do? </td> <td width="40%"> <select style="width: 100%"> <option>I would call GeekSquad for help.</option> <option>I would search on web for answers.</option> <option>I would google for an action.</option> </select> </td> </tr> <tr> <td> What would be your immediate reaction to spilling a beverage on your laptop? </td> <td> <select style="width: 100%"> <option>I would turn it off immediately.</option> <option>I would cream for help.</option> <option>I would google for an action.</option> </select> </td> </tr> </table>

This table looks good enough, right? It has 60-40 split, all of the text displays properly.

That's what we thought initially too. When QA team reported that they were not able to see this page properly I was surprised, I requested screenshots and they send me this.

How to Buy Inexpensive Quality Computers and Electronics?
How to Choose a Computer?

Instead of using long question text they has short questions and long responses like in above example. As they reported text in dropdown, After reviewing code I found that code for creating dropdown <select style="width"100%"> was root of problem I changed it to <select> and ... see the result.

How to Buy Inexpensive Quality Computers and Electronics?
How to Choose a Computer?

As you can see here by removing the style="width:100%", the dropdown expanded to accommodate the text and the user can see the entire text in the dropdown.

Here is another example. In this example I needed to display some text. The text can be a few words, short statements or many words and long statements as this was free form text entered by user. For the user interface (UI) specification, if it is short text it should be centered, if there is more then one line then all lines should be left aligned and come into center of screen, as line becomes wide it shold automatically change it's position to be in center till line can not fit in same row at that time it should fall into next row. Here are few examples of this.

Example: 1
To create this table you should follow these steps.
  1. open ms-word
  2. select insert -> table
  3. select number of rows and columns you need.
  4. use that table


Example: 2
To create this table you should follow these steps.
1) open ms-word. 2 ) select insert -> table. 3) select number of rows and columns you need. 4) use that table

As you can see here in both of above examples text gets adjusted automatically according to width.
Here is code for it.

<table width="100%">
  <tr>
    <td align="center">
      <table>
        <tr>
          <td align="left">
            To create this table you should follow these steps.
            <br />
            1) open ms-word. 2 ) select insert -> table. 
            3) select number of rows and columns you need, even after 
            creating table if you can change this selection if you need. 
            4) use that table
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The trick here is not to define width for the inner table. By not defining width for inner table it will expand to accommodate the longest text and will automatically come to next row if text is more then one row and align="center" on outer <td> will keep inner table in the center all of the time.

"Using width can be very tricky and can produce unexpected results some time, specially if input is controlled by the user. In this kind of situations use minimum width and maximum width as text input to avoid any 'surprises' "


Comments

  • ativan lorazepam is for

    Posted by Pypebibre on 11/30/2012 03:29am

    Purchase Cheap Ativan Online Medication half life of ativan and xanax - ativan po to iv conversion

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Adaptation and evolution are fundamental requirements of survival -- not only in nature, but also in business. Our world has changed dramatically in a short amount of time. Many businesses are fueling and capitalizing on this change, while others are desperately clinging to a bygone era. Who is left standing in the years and decades ahead should come as no surprise. This edition of Unleashing IT highlights the companies that are embracing new circumstances, new methods, and new opportunities. By downloading …

  • IT decision support impacts all aspects of technology management, from governance and strategy to budgets and resource planning. IT decision support effectiveness often falls prey to data-driven challenges that make it difficult to understand the data in context. These challenges: overwhelming data volumes, heterogeneous data types, and growing data complexity. This Forrester Consulting Paper reports the three key findings from their study conducted, on behalf of BDNA, to test the hypothesis that data …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds