Basic HTML – table setup

Topic

New Reply

I have a simple table at http://www.geocities.com/adysin.geo/sinclair-lineage.html that I cannot get to cooperate.

I am trying to set up a horizontal line from which extend down vertical lines to the offspring of the couple at the top. There is a blank line between the horizontal and vertical lines. Also, I cannot get the horizontal line to be long enough to cover all eleven offspring.

I appreciate any help offered! Thank you!

Reply | Quote

Replies

First, you have a cellpadding of 10, meaning that the contents of each cell should be separated from its (invisible) borders by 10 pixels (or whatever unit cellpadding uses by default). You also are not overriding the default cellspacing (space between cells). So you can tighten up your table immediately by changing the first line to this:

The remaining space is the natural space in the font itself. Most characters don’t go all the way to the end of the “box” in which characters are drawn, because there needs to be room for “descenders” and so forth. Using typed characters, I think there always will be some space. To work around that you can so some complicated things with cell borders or line drawing languages, but the simplest approach probably is to use a graphics package to create tiny line GIFs so that you can replace the typed characters with lines that use the full vertical space you want. A bit trickier to efficiently draw that horizontal line with no white space above or below it… that might be better done as a bottom border on that cell (CSS can do that).

I have attached an example where I’ve started to use the power of CSS. For example, rather that remove all cellpadding, you can remove it just in the vertical direction (top and bottom) while keeping it in the horizontal direction (right and left). Also, all text in the table is centered, so that the lines for individual names are more attractively placed.

Hope this helps.

Reply | Quote

Do I have my work cut out for me!! Thank you!

Reply | Quote

Hi there

I am aware that this is quite an old post now but I have just noticed it and thought I would give my worth. I slightly disagree with Jeff (sorry Jeff )on this one as with the implementation of XHTML, I totally disagree in the use of padding images.

For this type of work it is best to use CSS as you have more control over the outcome and you will find it easier to change the format much more easily.

I have attached a zip file which contains a folder with a basic HTML page and an attached CSS file which shows how to create a horizontal line for the bottom of a cell and how to create a vertical line. I made a basic family tree but you can easily manipulate this for your version…hope it helps and I am not too late.

Reply | Quote

It’s never too late for help! 🙂 I could not, however, open the attachment. :-(((

Reply | Quote

It is a zip file. Right hand mouse click, and save to your desktop and extract from there!

Here is a screen shot of what I have… If your HTML is not too hot, I am happy to recreate your Geocities page for you…the offer is there

Reply | Quote

Thank you for your help. I do appreciate it.

Reply | Quote

For the record, I did not suggesting using padding images, also known as spacer GIFs, and agree that it is an obsolete practice.

Reply | Quote

That is noted sir . Maybe I used the wrong terminology in this context, my apologies.

Reply | Quote