Text in Tables

MysticCatcher · Sep 2, 2003

I'm trying to put text in a table, one which has a background, but when I try, it always puts it outside my table. Here is my code....
[tt]<tr height="15">
<td width="299" height="15"><img border="0" src="spacer.bmp" width="299" height="15"><-- Here is where I want my text. At the very right end of this table data.</td>
<td width="270" height="15"><img border="0" src="spacer2.bmp" width="270" height="15"></td>[/tt]

dwarfthrower · Sep 2, 2003

For starters, I don't particularly like the use of 'spacer' gifs for positioning. You can use the padding-left CSS attribute if you want some space before the text.

Try:
[tt]
<tr height="15">
<td style="padding-left:299px;">Some text Here</td>
<td style="padding-left:270px;">Some Text Here</td>
</tr>
[/tt]

MysticCatcher · Sep 2, 2003

No, you dont understand. The spacer.bmp is just a small area to seperate the top of my page and the bottom. I Just want to position text in a table, preferably in the center.

dwarfthrower · Sep 2, 2003

>>The spacer.bmp is just a small area to seperate the top of my page and the bottom.

Then you have it in entirely the wrong place. Just put the text inside the <td></td> tags. If you want them centred you can either set that using the align attribute of the td - <td width="299" align="center"> or CSS.

MysticCatcher · Sep 2, 2003

You dont understand once again. I just want to put some text in. What you have told me is incorrect. Lets say I went with the <td width="43" height="34"><font.... <--- that does not work.

dwarfthrower · Sep 2, 2003

>> What you have told me is incorrect

What I have told you is perfectly correct and in keeping with the questions you have asked.

Copy the following code, open notepad, paste the code in and save the file as tables.html
[tt]
<html>
<head>
<title>Tables 101</title>
</head>
<body>
<table border="1">
<tr>
<td align="center" width="300">
<font face="Arial, Helvetica, sans-serif" color="#FF0000" size="+1">
This is cell 1
</font>
</td>
<td align="center" width="300">
<font face="Times New Roman, Times, serif" color="#0000FF" size="+2">
This is cell 2
</font>
</td>
</tr>
<tr>
<td align="center" width="300">
<font face="Courier New, Courier, mono" color="#FF00FF" size="+3">
This is cell 3
</font>
</td>
<td align="center" width="300">
<font face="Verdana, Arial, Helvetica, sans-serif" color="#00FF00" size="+4">
This is cell 4
</font>
</td>
</tr>
</table>
</body>
</html>
[/tt]

There are plenty of beginners HTML references available on the web. I'd suggest checking out

http://www.w3schools.com

or

http://www.webmonkey.com

Other than that

MysticCatcher · Sep 2, 2003

Hmmm..Thanks. If your interested, this is my site. It has nothing on it, but i just started today. I was trying to do the nav, on the left...

http://www.geocities.com/philiptandy/index.html

dwarfthrower · Sep 2, 2003

OK, now I more clearly see what you're doing.

Using images like that is not really the best way of doing things. Images are very bulky to download (spacer, nav and main alone were 693 kilobytes - my whole example below is only 815 bytes)

One of the fundamental principles of any programming is that the data should be as independent of the design as possible. HTML is slack, because it allows the mixing and matching of design elements and data elements.

CSS helps out by separating some of the design (how things should look) from the data (what those things are)

Have a play with the following code and you'll see what I mean:
[tt]
<html>
<head>
<title>Tables 102 - Using CSS</title>
<style type="text/css">
.mainTable {
width:569px;
border: 1px solid #000000;
height: 415px;
border-collapse: collapse;
}
.spacerCell {
width: 569px;
height: 15px;
border-bottom: 2px solid #000000;
background: #7CC4F8;
padding: 0px;
margin: 0px;
}
.navCell {
width: 150px;
height: 400px;
border-right: 1px solid #000000;
background: #B6E9FC;
}
.mainCell {
width: 419px;
height: 400px;
background: #EEEEF2;
}
</style>
</head>
<body>
<table class="mainTable" cellpadding="0" cellspacing="0">
<tr height="15">
<td class="spacerCell" colspan="2"></td>
</tr>
<tr>
<td class="navCell"></td>
<td class="mainCell"></td>
</tr>
</table>
</body>
</html>
[/tt]

MysticCatcher · Sep 3, 2003

I still dont have a clue how to put some text into tables!! Personaly, I liked my idea with the tables. But if anyone can help me I'd love it...Sorry Dwarf, but your not explaining it.

dwarfthrower · Sep 3, 2003

It's I who should be sorry if I'm not explaining things very well.

Firstly, I'd reitterate my position on getting some resources to help you learn HTML. A forum like this is useful for nutting out a particular issue you might be having, but it's not the best way to learn. Look for books or websites that have both tutorial (this will show you the techniques to use) and reference sections (this will enable you to look up tags and attributes that you may not have come across previously). In particular I'd recommend taking this tutorial from W3Schools

http://www.w3schools.com/html/default.asp

It has a section devoted to tables, several examples and a detailed reference section.

The other way to learn is by copying what you see around you. A huge percentage of web sites use tables in some way shape or form and all that code is available to you by using the "View Source" command on your browser. Find a table you like, view the source, copy the relevant code to one of your own web pages and play around with it.

I'm sorry I haven't been more helpful. If anyone else out there can give some further advice I'm sure it would be appreciated.

Wullie · Sep 3, 2003

MysticCatcher

It's not that dwarfthrower isn't explaining it well, he is working with what you have told him and has done a pretty good job at that.

Can you draw the text onto the image where you want it to appear?

Wullie

http://www.necomputers.org.uk

http://www.freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.whiland.co.uk

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell

tnsbuff · Sep 3, 2003

Hi,

First of all you shouldn't be using .bmp images; their file size is way too large and they're not cross-browser compatible. They need to be compressed to .gif or .jpg format, whichever is appropriate for the individual image.

To place text into a cell with a background image (not using css), the html would be:

<table cellspacing=0><tr><td background="your_background_image.gif" align=center>Your text goes here.</td></tr></table>

Note: If you need to force the cell to be the same height as your background image, you can place a transparent .gif in the cell with the minimum height that you require. For example if your background image was 50 px high:

<table cellspacing=0>
<tr>
<td background="your_background_image.gif" align=center valign=middle><img src="transparent_image.gif" width="1" height="50">Your text here.</td></tr></table>

The background image will fill the width of the cell. If it's not wide enough to fill the cell, it will tile to fill it. The align=center aligns the text in the center of the cell horizontally; valign=middle aligns the text in the middle of the cell vertically.

Hope that helps.

tnsbuff · Sep 3, 2003

Slight correction to my previous post. "Valign=middle" inside the <td> tag works to vertically align the text, except in the above case where I used a transparent gif to hold the cell height, you need to specify "align=middle" as part of the image tag; this controls how the text aligns with the image (even though it's transparent) on the same line:

<table cellspacing=0 width="570">
<tr><td background="your_background_image.gif" align="center"><img src="transparent_image.gif" height="50" width="1" align="middle"></td></tr></table>

Of course, if you don't need to force the height of your cell beyond the height of your text, then you don't need to use a transparent .gif to control the height.

Here is the corrected code using your very first example:

<tr height="15">
<td width="299" height="15" background="spacer.bmp" align="right">Here is where I want my text. At the very right end of this table data.</td>
<td width="270" height="15"><img border="0" src="spacer2.bmp" width="270" height="15"></td></tr>

Of course, there are other options using css, but you originally asked about the html.

tviman · Sep 4, 2003

How about telling us what text you want and wher you want it? Without that, I'm as confused as you ass to what you want. From what I've read above and the info ou've provided, the examples given are what you need.

There's always a better way. The fun is trying to find it!

MysticCatcher · Sep 4, 2003

I want links in the nav.bmp area, and I want to explain and show what that page has to ofer in the main.bmp area. Thanks to everyone that helped. And I dont really care wether it's CSS or HTML I do the tables with. I dont even know the difference really. The main.bmp is going to have alot of images and info on it while the nav.bmp is just going to have a few links.

dwarfthrower · Sep 4, 2003

Ok then... surely you've seen a site or two who's design is reasonably similar to what you hope to achieve. Try going to a couple of those sites and looking at their source code to see how they did it. That will give you some food for thought as to how to go about your implementation.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Text in Tables

MysticCatcher

Programmer

dwarfthrower

Programmer

MysticCatcher

Programmer

dwarfthrower

Programmer

MysticCatcher

Programmer

dwarfthrower

Programmer

MysticCatcher

Programmer

dwarfthrower

Programmer

MysticCatcher

Programmer

dwarfthrower

Programmer

Wullie

Programmer

tnsbuff

Technical User

tnsbuff

Technical User

tviman

Programmer

MysticCatcher

Programmer

dwarfthrower

Programmer

Similar threads

Part and Inventory Search

Sponsor