Solved

Table sizing

Posted on 1998-11-23
9
135 Views
Last Modified: 2010-04-09
I want to know exactly how the netbrowser determines the width and height of cells in a table. I know it depends on the contents of a cell and i know too that WIDTH= and HEIGHT= in a <TD> tag are in most cases simply ignored. I want to use tables to position blocks of text and images on an exact location. A browsers own interpretation of WIDTH= and HEIGHT= messes up my layout really bad.
0
Comment
Question by:joostjag
9 Comments
 
LVL 4

Expert Comment

by:martinag
ID: 1839998
You can use CSS which will place the things *exactly* where you want them:

Inside <HEAD></HEAD>:
<STYLE>
<!--
#myDiv {
  position: absolute;
  top: 100;
  left: 10;
}
// -->
</STYLE>

Somewhere in document:
<DIV ID="myDiv">Content</DIV>

If you use position: relative, the content will be placed 100 pixels under the last component added (the position is relative). If you use absolute it'll be absolute ie from top left corner of page. I don't know which of them you want.

Martin
0
 
LVL 1

Expert Comment

by:rajgn
ID: 1839999
I'm sorry, I don't agree with your views on WIDTH/HEIGHT attributes of a table/cell. perhaps, contradictory attributes may caused you feel like that(in that case browser will not behave in intended way). One key here is setting these attributes in '%' and 'pixels'. If you use '%' it's always going to be relative. On the otherhand setting in pixels is absolute. Hence there's always a possibility of a mixup, which may give us such impressions.

Using tables inside tables, virtually you can position text/images anywhere on the page. But it's implementable when you've any authoring tool like Frontpage(otherwise it's too labourious process to do manually). I did this successfully very recently to find how good are tables to position on a page(unfortunately I can't give you the URL since it's on Intranet)
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1840000
A way of solving the problem is to define width in the <table> tag and then again in the <td> tags. This is follproof (assuming you don't contradict yourself).
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:joostjag
ID: 1840001
I must admit I was wrong about the WIDTH/HEIGHT attributes. When I explicitly specified these for most cells the browser showed the table the way I wanted. It seems like omitting these attributes in some cells also causes other non-related cells to change size. That's why it seemed my browser ignored the WIDTH/HEIGHT attributes.
I'm creating HTML files in a plain text editor. Maybe using Frontpage will fix this sizing problem automatically.
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1840002
Using FrontPage sounds like a really bad idea to me. How about Allaire Homesite?
0
 
LVL 1

Expert Comment

by:rajgn
ID: 1840004
Well, as some of you said, I too don't like Frontpage which always messes up with the code. BUT if you refer to my last comment, I suggested this ONLY to avoid laborious process of laying down tables inside tables inorder to achieve perfect alignment of text/graphics. And is not a generalized solution.

Since 'martike' said plain text editor will allow you much more control over your HTML than FrontPage, I wanted to show you an example. Just refer to 'www.wipro.com'. Initially you don't feel something great with that page. But you try to do the same thing(i.e aligning all the menu item gif's with the central main gif) USING only NOTEPAD as your editor. Then tell me how much time you spend on doing that(be honest!, if at all you're successful). Now try doing the same thing with any HTML authoring tool(not only FP). Now you'll find the difference and will understand what I was saying.

Finally as 'martike' himself said, it all depends on what it is you really want, and how(slowly) do you want it(if you don't mind wasting time in changing width/height attributes of each cell in notepad)
0
 
LVL 6

Expert Comment

by:PBall
ID: 1840005
Hehe, that's why I like laying out my screen in Photoshop first since I can get very precise about the layout setting.

After doing so, even using Notepad to code the layout will not be so difficult.

FrontPage and all those other 'I know what you want and uhm...your syntax is incorrect, so let me add some junk codes to make it correct and hey, where is the end tag for this paragraph, and look...no quote here, let's add quote' web editors...what can I say..they suck.

So far, I can live with Interdev, but even with it I code my table manually.
0
 
LVL 1

Accepted Solution

by:
toTo earned 70 total points
ID: 1840007
use invisible pictures with the "good" size in a cell
in each column or line you want to recize.
0
 
LVL 1

Expert Comment

by:rajgn
ID: 1840008
martike:

You're right. In most cases I found Front page annoying. Particularly, it'll not allow you embed your own code. Most of the times it replaces your code with it's own tags.
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

823 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question