HTML table changes on existing webpage, (add a column of a particular width) Options

[usasma]

I designed the table in the webpage at this link: http://www.carrona.org/dvrref.html
I used Microsoft Excel and copy/pasted the table into the webpage in Kompozer (a free html editor).

I'm trying to add a column to the table (which I've done), but can't get it to be the proper width.
I'd like a column that's 214 pixels wide, but can only get one 114 pixels wide in Kompozer.
The name of the column will be Date/TimeStamp

I'd appreciate some suggestions on how to do this without redoing the entire table.
I'm not really keen on redoing all the Named Anchors which are crucial to this page.

This post has been edited by usasma: Dec 10 2010, 06:44 PM

[joyful]

Hi,
To add a new column to a table (as you know), add this to the row (<tr> tag) that you want it to get added to

CODE

<td> </td>

Now, to set the width of a column, add this:

CODE

<td width="214"> </td>

So your table will look something like this:

CODE

<table>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td width="214"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td width="214"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td width="214"> </td>
  </tr>
</table>

Hope this works!

[usasma]

Thanks for the reply. Here's the code from the start of the table (first 3 rows).
Where should I insert the code that you posted - and would I have to do it for each and every row individually?

CODE

<br>
<a name="Driver_filename_Source_Reference_Info_"></a>
<table style="border-collapse: collapse; width: 2000px;"
border="2" cellpadding="2" cellspacing="4">
  <col style="width: 143pt;" width="191"> <col
style="width: 532pt;" width="709"> <col
style="width: 239pt;" width="319"> <tbody>
    <tr style="height: 15pt;" height="20">
      <td class="xl65"
style="height: 15pt; width: 143pt; font-weight: bold; text-decoration: underline;"
height="20" width="191">Driver filename</td>
      <td
style="font-weight: bold; text-decoration: underline; width: 116px;">Date/TimeStamp</td>
      <td class="xl65"
style="font-weight: bold; text-decoration: underline; width: 456px;">Source</td>
      <td class="xl65"
style="font-weight: bold; text-decoration: underline; width: 1794px;">Reference
Info</td>
    </tr>
    <tr style="height: 15pt;" height="20">
      <td style="height: 15pt; text-align: center;"
height="20"><a name="0"></a><span
style="font-weight: bold; color: rgb(0, 153, 0);">-----</span><span
style="font-weight: bold; color: rgb(0, 153, 0);">0-----</span></td>
      <td style="width: 116px;"></td>
      <td style="width: 456px;"><br>
      </td>
      <td style="width: 1794px;" class="xl66"><a
href="http://www.gocyberlink.com/"><br>
      </a></td>
    </tr>
    <tr>
      <td><a name="000.fcl"></a>000.fcl</td>
      <td style="width: 116px;"></td>
      <td style="width: 456px;">CyberLink FCL Driver</td>
      <td style="width: 1794px;"><a
href="http://www.gocyberlink.com/">http://www.gocyberlink.com</a></td>
    </tr>
    <tr>

[usasma]

Also, I have changed all of the 116 px entries to 216 px
I have changed all of the 1794 px entries (the last column) to 1694 px
And I changed the 2000 px entries (total table width) to 2100 px
and still don't have any success

Also, if you look at the 13th line down in my example

CODE

style="font-weight: bold; text-decoration: underline; width: 116px;">Date/TimeStamp</td>

That is the column that I'm trying to add and cannot get it to show larger than 114 px in the editor.

I've posted this attempt at this link so you can see it: http://www.carrona.org/test.html

This post has been edited by usasma: Dec 11 2010, 01:43 PM

[usasma]

deleted

This post has been edited by usasma: Dec 11 2010, 01:44 PM

[Darin McGrew]

Our online validator reports a number of markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes

It looks like a lot of them are caused by using a Strict doctype for a document that is really Transitional. Unless you're actually going to write Strict markup, I recommend switching to a Transitional doctype that will still trigger standards mode:
http://hsivonen.iki.fi/doctype/

You've over-constrained the table layout. You specify a width of 2100px for the entire table (which guarantees horizontal scrolling in my browser windows). Then you specify widths for the columns that add up to more than 2366px (not counting the borders, padding, and spacing you've specified).

[joyful]

Hey,

Tell me if I am wrong, but would something like this work?

CODE

<table width="2000" cellspacing="0" cellpadding="0">
  <tr>
    <td width="191" height="20">Driver filename </td>
    <td width="214" height="20">Date/TimeStamp </td>
    <td width="456" height="20">Source </td>
    <td width="1794" height="20">Reference Info </td>
  </tr>
  <tr>
    <td width="191" height="20"> </td>
    <td width="214" height="20"> </td>
    <td width="456" height="20"> </td>
    <td width="1794" height="20"> </td>
  </tr>
  <tr>
    <td width="191" height="20"> </td>
    <td width="214" height="20"> </td>
    <td width="456" height="20"> </td>
    <td width="1794" height="20"> </td>
  </tr>
</table>

[usasma]

The table layout suggested by joyful seems to work for me.
But the table width is again less than the combined widths of the columns.

Any suggestions on how I should fix it? There are over 700 entries so I'd prefer a solution (if possible) that doesn't require me to retype every one of them (and, I have another list of 1000 or so that I do have to enter into the table after I get this fixed.

My goal is to add the Date/TimeStamp column and have it display the info in that cell on one line. Here's an example of the Date/TimeStamp:

Tue Oct 26 22:29:53 2010 (4CC78EA1)

This post has been edited by usasma: Dec 12 2010, 06:01 AM

[Darin McGrew]

Can you just delete the table width, and let it be whatever width is dictated by the width of the columns?

[usasma]

OK, as I learn more, I find that I have further requirements.
I'd like the first 2 columns to remain at 200 px, while the next 2 columns can change in size depending on the size of the browser window.

?Possible?

[usasma]

It'll be easier for the user to read it if the first and second columns are locked in size - but I'll have to live with it if they can't.

I may just merge the info from the first and second columns - as that's how I get it from the debugger.

This post has been edited by usasma: Dec 12 2010, 03:53 PM

[pandy]

Make the table 100% wide.

HTML

<table border="2" width="100%">
<tr>
<td width="200">First column</td>
<td width="200">Second column</td>
<td>Third column</td>
<td>Fourth column</td>
</tr>
</table>