Table Width or No Table Width: That is the Question

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

“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:

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.

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.

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

Example: 2

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’ “