I’m not able to align a html table properly.
I’m attaching a file with code and expected alignment pic.
Could you please take a look at it and suggest what to be done.
test.html (55.5 KB)
Can you explain more clearly what it is you want to change about the table alignment.
Looking at the image, compared to the html, the left column is much wider than the right one, is that what you are trying to do?
I have edited that image look in mspaint…that is my expected alignment.
look at the right cells in image and compare with html table…you’ll understand the difference
The size ratio between the two columns is going to vary depending on the size of the screen you view it on.
The right column has its width fixed, because you have in-line styles on the top 3 textareas fixing their width at 660px, so they will never be less than that size. This means that the left column re-sizes to take whatever space remains after the ~660px taken by the right column.
The narrower the screen, the smaller the left column gets.
Ok…No problem.
Can you please see the image . I want a look like that.
I need to change the table code such that it looks like the image I posted… in narrow screen or wide screen …in both screen…look needs to be similar to the image I posted.
Please use your paint program and draw a picture of how that table should look when it is 320px (about 3 inches or 7cm) wide (that could be mobile narrow screen).
1 Like
mobile compatibility(narrow screen) not required …this is for internal user application.
Please state the range of widths that you need to serve.
Please include a drawing of how that table should look at its narrowest width.
same look as I have posted in the image.
my internal users will use laptop with standard resolution (768x1024).
users will only use laptop and desktop PC
I asked you to state the range of widths that you need to serve. I did not ask for the screen resolutions of your users. The screen resolution does not tell me how small the table needs to become.
The table will be reduced in size considerably from the image shown. That means that the columns will change. The code in the right column contains a fixed width. The left column is fluid, therefore, the left side of the table will become narrower than the image you have posted. Your drawing should show what the table will look like at its narrowest.
I am asking you to post an image with the table showing how it should look at the narrowest width that your users will see. I do not intend to guess what you what the table to look like at some narrower width. You are the designer, you must tell me what the table should look like. If you cannot write the code, then draw it to scale.
I could not visualize this situation.
one thing is sure…I am willing and flexible to edit those widths in Target and Result table , tds so that it does not remain fluid if required.
What is the range of widths that your product needs to serve? From how wide to how narrow?
Did you write the code in the example posted?
Please see this screenshot:
this is the range of tds which you are asking …
I modified small version of the code to test…but this still did not align properly
What other changes I may require ?
test2.html (17.0 KB)
OK, I see those widths and they should be helpful, but I also need to know the minimum width in which the whole table needs to fit/adapt.
I still want to know the minimum width in which the table must fit.
I think I am making some progress, though.
3 Likes
which table ? the parent table has 100% width
Fluid means that the width of the container changes to adapt to the available width in the page or viewport. Fixed means that the container does not change width as the width of the available space or browser window changes… at narrow widths, it will overflow the edges of the viewport and trigger a horizontal scrollbar.
As SamA74 pointed out, Target and Result rows in the right portion of the table have fixed widths; therefore, they are fixed, not fluid, so your statement does not make sense. I hope you meant to say “so that it does not remain fixed”.
How narrow can they be allowed to become?
I am trying to determine how narrow the outer table must become, what browser window widths it needs to fit into, to serve your variety of users. In what range of window widths does the outer table (#14: the “whole” table) need to fit? From maybe a maximum of 1600px wide down to a minimum of how narrow? You have already said that mobile phone widths do not matter, so I know that the minimum width is wider than that of a mobile phone, but how much wider? What is the minimum width required of the outer table (the “whole” table) so it serves all of your users?
Did you write the code in the example posted?
Why is it an entirely table based layout with inline styles and deprecated attributes? Why have you not used a CSS stylesheet to replace the deprecated attributes and instead of repeated inline styles? Can this table layout use CSS or must it use table attributes and inline styles?
I am asking these questions so I can help. If you cannot answer them, just as you cannot visualize how the whole table should look at different widths, then I’m not sure how to help you.
How do you expect us to help you build something that you cannot visualize and describe to us?
2 Likes
The OP has created a new thread with a (hopefully) clarified question here:
Please continue the discussion there, and I will close this one to avoid further confusion.
1 Like