TABLE R & C Missing Cells

Missing Cells in the TABLE

Row 1 duck Cell 3 duck Cell 5
Row 2 duck Cell 4
Row 3
spacer 2

TABLE Missing Cells (example 4)

Forgetfulness is one of my biggest problems.  Sometimes I forget to format an empty cell which will make my table display look odd.  The following example will show how this happens and what to do to fix the problem

In this example, there are two cases of missing cells in the first two rows of the table.  The first case in Row 1 of the table is a cell missing in column 2 or cell 2.  Here, the table modifies itself and moves cells 3 & 4 to the left, leaving the spot for cell 4 empty.  The second missing cell is cell 1 or Row 2, which is the wider cell for containing your file name for that row.  Again, the table modifies itself and shifts the three defined cells (2, 3 and 4) to the left.  That places cell 2 in the place of cell 1 and cell 2 acquires the length that cell 1 position requires.

Another problem unique to only a few browsers is to create the cell, but leave it empty, i.e., <td></td>.  Some browsers (there are over 30 commonly used browsers around the world) interpret this as an empty cell, but will not shift other cells to compensate.  What they do is eliminate the outline for the cell.  Only those browsers show this example as empty cells.  My two browsers, IE and Chrome show the outlines for the empty cells.
NOTE: I like to add an empty space character "&nbsp;" between the <td> and the </td>.  This will cause all browsers to show the empty cell and outline, but no data is displayed because of the space character.

Example 3 Missing Cells in your table

<table border="7" style="border-color:#900" cellpadding="5">
  <tr class="trtext1">
    <td width="60%">File Name</td>
    <td width="10%">File Size</td>
    <td width="10%">Date Submitted</td>
    <td width="20%">Submitter</td>
</tr>
  <tr bgcolor="#FFFF99">
    <td><a class="bl14b" href="index.html">File for research purposes</a></td>
Missing cell 2 >
    <td>Jan 2014</td>
    <td>Bryant Walker</td>
</tr>
  <tr bgcolor="#FFFF99">
Missing cell 1 >
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
</tr>
  <tr bgcolor="#FFFF99">
    <td><a class="bl14b" href="index.html">Row 3 - Cell 1</a></td>
    <td></td>
    <td>Cell 3</td>
    <td></td>
</tr>
</table>
File Name File Size Date Submitted Submitter
File for research purposes Jan 2014 Bryant Walker
Cell 2 Cell 3 Cell 4
Row 3 - Cell 1 Cell 3

To fix the above problems, add the missing cells with data if applicable or add an empty cell with the empty space character "&nbsp;" in the cell as data.


Previous Page Next Page