Hi guys,

I am new to html coding. Currently I am developing a site but having trouble fixing some problems. Maybe what I all need is just a few words from an experienced HTML coder or someone having sound knowledge of HTML.

The site I am building is a corporate site, which demands the layout to be neat. But since I am not well acquainted with HTML, at first I made it too clumsy- with lots of tables and nested tables.

After some self-work, I decided to make it look better. Here I go to explain how I tried achieved this,

I took a main table of width 780 pixels. I expanded the table with a few more rows. In the first row I just changed the bgcolor. On the second row, I tried to put a form with a box and a search button.

In third row, I inserted 3 images. 2 images namely – ‘home’ and ‘contact us’ which I put on the right side of the row. The main logo goes on to the left side.

Here i got a few questions.

[1] To put all 3 images, do I have to split the 3rd row? In fact I did split the row earlier, into 3 columns, without being aware of the trouble they would raise later. When I first put each images into a separate column, they kept the required distance from each other. But as soon as I tried to insert some data into the next row, they all got dispersed. What I mean is they all got misplaced soon as I tried to insert some data into the next rows. Read on please for a better understanding of what I tried to do in the next rows.


On the 4th row, I put a table with 5 column and 3 rows.

Five column coz I want to leave the left most columns for a java scrip menu. The other 4 columns will contain 4 images as the heading image of their respective column body. The 1st row I used for text heading for each column, 2nd row for the images and 3rd row for each column bodies- simple text.

So far this layout was okay. But once I tried to expand the column body, it had an affect on the 3 images I inserted on the previous row. As I told earlier, they all got misplaced. How to solve this problem? Someone suggested that I should maintain a basic design rule and that is not to split different rows of the same table differently i.e 1st row having 2 columns and 2nd row having 4 columns.

[2] But my question is how do you people maintain different type of contents in different rows in the same table?

[3] The same problem persisted when I tried to use this page as template and make more pages out of this template. Here, I would like to seek another tip. Which region would you suggest me to keep as an editable region? The nested table in row number 4?

[4] For other pages, on the 4th row, what I all want is just a heading and a few hundred lines of text beneath it. Do you suggest me to remove the nested table for this simple page layout? How do I keep my menu then?

 

 

 

Reply

hi suicide,

(1) to put in all 3 images, you do not need to split the 3rd row. there are three ways i can think of to create space within them. first is to add in ";&nbsp"s between the images in the HTML code to create the space. second is to split the row into 2 or 3 columns. but like you said, they'll get affected by what you do in the rows above and below.

third way is my favourite way and i do it all the time - create a table in each of your rows where you require content to be in specific places. create rows and columns in that and put your content in. this answers your 2nd question as well.

(3) hmm not really sure what you're asking here. but so far the tables within tables hasn't given me a problem when i use them as a template and make more pages out of it.

(4) tables within tables - try that.

Reply

Suicide, if I understand your post correctly, you have the first two rows with one cell each, and the third with 3 cells. In order to make this work, you need to include ' colspan="3" ' in the <td> tag in your first two rows.

If your fourth row is also one cell that contains a nested table, you need the colspan in that <td> as well. Something like:


Regarding the spacing of images in your third row:
Try setting the widths of your three cells explicitly, like <td width="260">. If this isn't enough, try using the margin or padding properties of CSS to position the images within the cell. For example, say you want your image to appear at the right side of a cell, but 15 pixels from the right edge:


If I misunderstood your original post and the above doesn't help ... sorry! Perhaps you could give us the url of the broken page so we can see the source; that would make it easier to help.

Best of luck with your project, SinisterMinisterX

 

 

 

Reply