Inserting a row in a table

Familiar with web-design ? Trouble with images, tables ? Any other queries ?

Moderators: BobCP, agsone, Neil Parks, gregtutor, Lem3

Inserting a row in a table

Postby pete1412009 on Thu Jan 12, 2012 11:46 pm

Hi everybody,

I had originally created a website using Microsoft Frontpage. One one of my webpages there is a table which had been imported originally from Microsoft Excel. Since switching to a Mac, I now use Kompozer as my web editor. However, when I try and insert a new row into the aforementioned table when editing in Kompozer, the row that is inserted is much, much wider than those originally in the table - about 30 times wider!

Is there any way to insert a new row in my table, but keeping the new row the same size as the others?

Any help you can offer would be greatly appreciated.

Many thanks,
Peter
pete1412009
 
Posts: 6
Joined: Sat Aug 21, 2010 3:07 pm
Country: United Kingdom (uk)

Re: Inserting a row in a table

Postby gregtutor on Fri Jan 13, 2012 12:38 am

Sounds like you are managing to insert a whole new table, rather than a new row.

FrontPage is known to be extremely weird when it comes to generating code (It's why even Microsoft gave up on it! I shudder to think how it might handle an imported spreadsheet), so it would probably be best if you posted the URL of the problem page so we can have a look at exactly what is going on.

WARNING: Editing a FrontPage site is often fraught with difficulties. If you scan this forum you will find we frequently say "Start again" rather than recommending editing the original code. It doesn't always happen, but be prepared...
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3778
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Inserting a row in a table

Postby pete1412009 on Fri Jan 13, 2012 7:48 am

Ok thanks. As requested, the page in question can be found here:

http://petabr.freehostia.com/TNMMoveList.htm
pete1412009
 
Posts: 6
Joined: Sat Aug 21, 2010 3:07 pm
Country: United Kingdom (uk)

Re: Inserting a row in a table

Postby gregtutor on Fri Jan 13, 2012 11:44 am

I don't see any 30x wider rows. I think you've posted the link to the original page, not one with the inserted problem rows.

There certainly shouldn't be any 30x wider rows on that page as the whole page is constrained by the width defined for the table in which all the content is contained (1123px).
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3778
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Inserting a row in a table

Postby dr-john on Fri Jan 13, 2012 11:46 pm

If you were brave, you could switch to source code / html view, find the row where you wish to insert another one, then copy and paste the entire existing row (that's from the opening <tr style=....> to the closing </tr> including all the <td>s in between, then click after the closing <tr> and hit enter to create a space, then paste it. Then switch to design view and edit the duplicate to hold the new data.

This might sound intimidating at first, but it it crashes and burns, there is always Undo.
And once you've done it a few times it becomes very simple. I work in source code all the time and eventually you will be more confident and be able to do these sort of things when kompozer gets stuck.

You could do this in a simple text editor as well. NEVER in a word processor!!!
Last edited by dr-john on Fri Jan 13, 2012 11:47 pm, edited 1 time in total.
dr-john
 
Posts: 618
Joined: Wed May 13, 2009 1:37 pm
Location: Kent
Country: Scotland (sp)

Re: Inserting a row in a table

Postby pete1412009 on Thu Jan 19, 2012 9:58 pm

gregtutor wrote:I don't see any 30x wider rows. I think you've posted the link to the original page, not one with the inserted problem rows.

There certainly shouldn't be any 30x wider rows on that page as the whole page is constrained by the width defined for the table in which all the content is contained (1123px).


Apologies, please try the page again. I have selected the third row in the table, then from the "Table" menu in Kompozer selected "insert", then "row above". You can now see the result.
pete1412009
 
Posts: 6
Joined: Sat Aug 21, 2010 3:07 pm
Country: United Kingdom (uk)

Re: Inserting a row in a table

Postby gregtutor on Thu Jan 19, 2012 10:50 pm

Well that's easy!

It's wide because you have asked for the table cell in which the paragraph sits to be that wide...

Oops! Second thoughts: Well I thought it was that easy, but there's so many conflicting controls in there, it's surprising the page works at all.

With your cursor in either of the offending lines, look at the status line. Hover the pointer over the the <td> tag and you'll see that you ask that cell to be 951px wide.

However, scroll down until you come to the nested table with headings:

Move Name - Other names/Minor variants - Damage - Counters

Place your cursor in the cell "Move Name". Now hover the pointer over the tag <td class="xl24">. That contains instructions for it to be both 310 and 233pt wide. Do the same exercise with the "Other names/Minor variants" - more conflicts. And so it goes on.

You really need to take just about every width (and height) instruction out of your code and then there's a better chance that it will display consistently across all browsers.

However, you will still get long lines because, unless instructed otherwise any block will fill the width of the block in which it is contained. Also remember that generally any block inherits its styling from the containing block.

One other thing. I can't relate your description: "I have selected the third row in the table, then from the "Table" menu in Kompozer selected "insert", then "row above"" because the long lines are contained in paragraphs that are contained in a table cell that is in the only row of the table that almost entirely fills the whole page. The moral of the story is only to use tables when you have tabular data to display. If you need any special containers to which to hang various aspects of the page layout then use "generic containers" (<div> tags) and style them appropriately.

I'm sure any of the regulars here will be happy to help sort it all out and make the site much easier to manage.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3778
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Inserting a row in a table

Postby pete1412009 on Fri Jan 20, 2012 5:38 pm

gregtutor wrote:I'm sure any of the regulars here will be happy to help sort it all out and make the site much easier to manage.


That would be very much appreciated.
pete1412009
 
Posts: 6
Joined: Sat Aug 21, 2010 3:07 pm
Country: United Kingdom (uk)

Re: Inserting a row in a table

Postby gregtutor on Fri Jan 20, 2012 9:05 pm

Your best starting point is probably to work through the material on my site or one of the examples in the "KompoZer By Example" section on the forum.

Ask questions when you run into trouble. Once you have assimilated the principles you should find it relatively easy to adjust the code behind your site.

Perhaps the lesson you most need to learn is that generally "styling" is inherited from any element's parent element, so you need to think "top-down". From what I've seen of your code you try and tackle everything at the point you wish to change without understanding what impact that might have for later changes you make higher or lower in the hierarchy of the document.

If something is behaving unexpectedly, place the cursor at that point and then work through the tags on the status line from right to left to see what styling is affecting that item.

In general the order of precedence is:

HTML attributes.
Inline styles
Internal stylesheet
External stylesheet

If none of those have a rule affecting the issue then the styling will be inherited from the parent tag (the next left on the status line) and you have to work through the same order of precedence again.

In general, therefore, apply your styling at the highest possible level and then over-ride any rule at the most local level possible for the effect wanted.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3778
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Inserting a row in a table

Postby pete1412009 on Sun Jan 22, 2012 9:50 am

I'm worried that this is getting way too complicated for me. I used Frontpage to build the site initially because I did not want to worry about code. That's why I'm getting all of these problems now, along with importing the table originally from Excel.

Is there anything I can select in the "Table Properties" tab (attached) which could make my life easier?

Thanks for all your help.
You do not have the required permissions to view the files attached to this post.
pete1412009
 
Posts: 6
Joined: Sat Aug 21, 2010 3:07 pm
Country: United Kingdom (uk)

Re: Inserting a row in a table

Postby gregtutor on Mon Jan 23, 2012 1:28 pm

pete1412009 wrote:I'm worried that this is getting way too complicated for me. I used Frontpage to build the site initially because I did not want to worry about code. That's why I'm getting all of these problems now, along with importing the table originally from Excel.
Well, recognising where the problems originate from is a start. The next step is coming to realise that there cannot be a complete escape from understanding the principles behind web page code - although you don't need to learn the intricacies of the syntax of the code itself. KompoZer will protect you from that.
Is there anything I can select in the "Table Properties" tab (attached) which could make my life easier?
Unfortunately, it's not going to be as simple as that.

Remember, in my last message, I talked about how an element will inherit its appearance from it's parent. That will include each and every cell (<td> tag) inheriting some of its properties from the appropriate row (<tr> tag) and that will inherit stuff from its parents (the <tbody> and <table> tags), so making a change at the <table> level will not help if this is over-ridden with a more local instruction at the row or cell level.

As an example, I chose to look at the red text ONLY USED As A COUNTER HOLD in the final column of your main table. It seemed to me that there was some spare space in that column. Unless instructed otherwise the table will restrict the width of that column to be just wide enough to hold the text. I went in search of that instruction.

I clicked in the first cell at the top of that column then double-clicked to open the Table Properties dialogue, and then clicked the Advanced Edit button. Sure enough, on the Advanced Property Editor, I found under the HTML Attributes tab a width 258 which I removed. Under the Inline Style tab I found a conflicting 194pt width. I removed that. However, nothing changed.

That means that somewhere, perhaps just one of the cells in that column, there are instructions that force that cell to be of a width that keeps the whole column at that width. The only solution is to go through every cell in the column, find it and remove it. (It could also be that you have a table width set along with widths of cells somewhere within all the other columns, that leave the final column having to fill the space that is left.)

Now, perhaps, you see why I advised you to learn a little of some of the principles behind how a page is constructed. It need not be difficult, but it does require setting about things in the right way. Unfortunately, the very visual point, click and drag approach to creating web pages does lead people into trouble. It can work for a one page site where layout doesn't matter too much, but once you start dealing with tables, where layout does matter, then maintenance does become a nightmare - as you are discovering.

So, in the end, I think your best bet is to bite the bullet and begin to come to terms learning the underlying principles of page construction. It doesn't mean that you have to learn programming code (though, along the way, you won't be able to stop yourself picking some of it up) but it does mean you'll need to learn to think a bit more like a programmer.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3778
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Inserting a row in a table

Postby pete1412009 on Sun Apr 01, 2018 11:30 am

Hi,

This is unrelated to this topic, but still on the subject of tables.

Can I adjust the properties of a table so that each time I insert a new row, it retains the current font format of the table for the new row, e.g. each new row is created with font Arial in white colour?

Thanks,
Peter
pete1412009
 
Posts: 6
Joined: Sat Aug 21, 2010 3:07 pm
Country: United Kingdom (uk)

Re: Inserting a row in a table

Postby gregtutor on Sun Apr 01, 2018 3:54 pm

If you are using an external stylesheet and have provided rules for the way any row should appear then every other row should appear that way including any new ones you create.

The fact you have asked the question suggests you haver started by using a different technique, so it is probably best if you could post the URL of a page with a table you are working on. That's because there are so many ways of creating the styling for any object on the page that we need to see what you are trying to give sensible advice.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3778
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)


Return to General Q & A


Who is online

Users browsing this forum: No registered users and 0 guests