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

  • On-demand Event Event Date: December 18, 2014 The Internet of Things (IoT) incorporates physical devices into business processes using predictive analytics. While it relies heavily on existing Internet technologies, it differs by including physical devices, specialized protocols, physical analytics, and a unique partner network. To capture the real business value of IoT, the industry must move beyond customized projects to general patterns and platforms. Check out this webcast and join industry experts as …

  • Today's agile organizations pose operations teams with a tremendous challenge: to deploy new releases to production immediately after development and testing is completed. To ensure that applications are deployed successfully, an automatic and transparent process is required. We refer to this process as Zero Touch Deployment™. This white paper reviews two approaches to Zero Touch Deployment--a script-based solution and a release automation platform. The article discusses how each can solve the key …

Most Popular Programming Stories

More for Developers

RSS Feeds