HTML Help

Positioning image and text within same cell w/o style sheet

sticks464 — Thu Nov 19, 2009 4:06 pm

Author: sticks464

Posted: Thu Nov 19, 2009 4:06 pm

You can't stick an image and text in the same cell without some type of styling to get what you want. By default elements will align top left unless otherwise styled. Since you don't want a stylesheet the alternative is inline styling.

Code:

<td colspan="2" style="height:225px; overflow:hidden;">
<p><img src="Group20Project/movies/images/corvette.jpg" alt="red corvette" width="" height="" style="float:left; margin:0 5px 5px 0;" />This is a red 1987 Corvette.</p>
</td>

You cannot use the self closing tag (/>) on table elements ie.

Code:

Used in xhtml documents only using an xhtml doctype for inline tags ie.

Code:

Tables - fixed layout - desperate lady needs help

PayneLess Designs — Sun Nov 15, 2009 1:28 pm

Author: PayneLess Designs

Posted: Sun Nov 15, 2009 1:28 pm

Hi Pammy:

That is the nature of table cells to expand according to amount of content. That's why tables usually should be used for tabular data as they were intended to be used.

If you couple your table with CSS, you can control the table cells much better by fixing sizes for each cell if need be.

Without your code to work with, it's hard to show you a good starting example. These might help:

CSS Tutorials:

http://www.w3schools.com/Css/default.asp
http://www.csstutorial.net/
http://www.echoecho.com/css.htm
http://www.html.net/tutorials/css/
http://www.w3.org/Style/Examples/011/firstcss

http://htmldog.com/guides/cssbeginner/
http://www.davesite.com/webstation/css/
http://www.htmlcodetutorial.com/character_famsupp_193.html

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Web-Based Tools for Optimizing, Formatting and Checking CSS: http://sixrevisions.com/css/css_code_optimization_formatting_validation/

Table w/in table and Image on top of image:

sticks464 — Sat Nov 14, 2009 3:46 pm

Author: sticks464

Posted: Sat Nov 14, 2009 3:46 pm

Give this a try. Width and height need to be set on image. You can't add text next to the image in the same <td>, it will have to be in the next <td>.

Code:

.corvette {
position:relative;
top:0px;
left:0px
}

<body>
<tr>
<td colspan="2">
<td>
<img src="Group20Project/movies/images/corvette.jpg" class="corvette" alt= "red corvette" width="" height="">
</td>
</tr>

If you want to add text in the same <td> as the image, set the image as a background for that <td>, add text in a <p> tag and enough left margin to escape the image.

Code:

.corvette {
background:url(Group20Project/movies/images/corvette.jpg) no-repeat top left;
}
.corvette p {
margin-left:110px;/*to clear image assuming image is 100px width*/
}
<body>
<tr>
<td colspan="2">
<td class="corvette">
<p>This is a red 1987 Corvette.</p>
</td>
</tr>

Code:

.corvette img{
float:left;
margin:0 10px 0 0;
}

<body>
<tr>
<td colspan="2">
<td>
<p class="corvette"><img src="Group20Project/movies/images/corvette.jpg" alt="red corvette" width="" height="">This is a red 1987 Corvette.</p>
</td>
</tr>

customize rules in a table

sticks464 — Thu Nov 12, 2009 3:17 pm

Author: sticks464

Posted: Thu Nov 12, 2009 3:17 pm

You'll need a little css help and giving the table an id.

This method works with the exceptions;
IE col border is light colored.
FF puts bottom border on last row.
Safari, Opera and Chrome does not have a bottom border on last row.

css

Code:

Code:

This works in all browsers

css

Code:

Code:

2 Special Questions

krisimp — Sun Nov 08, 2009 12:49 am

Author: krisimp

Posted: Sun Nov 08, 2009 12:49 am

Firefox 2

Table perfect in Firefox but in IE shows as 1 column????

genem — Sat Nov 07, 2009 7:50 am

Author: genem

Posted: Sat Nov 07, 2009 7:50 am

PAmntngrl wrote:

Chicago Show Vegas Show thank you, I was going cross eyed trying to find that!

This really helped me too.
Thanks!

unwanted space between left side and li

sticks464 — Thu Nov 05, 2009 8:09 pm

Author: sticks464

Posted: Thu Nov 05, 2009 8:09 pm

You can use the css resets. Modify as needed. It will remove all browser defaults, eliminate padding and/or margins and list styles from lists. Works for all browsers.

<col> not working fully in IE8

Gnomeface — Wed Nov 04, 2009 11:34 am

Author: Gnomeface

Posted: Wed Nov 04, 2009 11:34 am

OK, spreadsheet formulae modified and the whole table works just fine now - the generated HTML file has grown from 35K to 56K but that's not a problem.

Thanks once again.

Completely eliminating space between rows

leo99 — Tue Nov 03, 2009 7:06 pm

Author: leo99

Posted: Tue Nov 03, 2009 7:06 pm

Thanks much sticks464 and sbaetens! I will try both and let you know what came out.

Enlarging an entire table onclick of button

sticks464 — Tue Oct 27, 2009 3:43 am

Author: sticks464

Posted: Tue Oct 27, 2009 3:43 am

Anything that moves, rotates, twinkles etc. is considered dynamic content and requires either javascript, php or ajax to make the effect. Depends on what you want to use as to what you can find. Some scripts let the images rotate on a timed setting and some rotate upon page load or reload.

Here's a nice javascript one.
Instructions here.

Effects and text in a table border

PayneLess Designs — Sat Oct 24, 2009 5:33 pm

Author: PayneLess Designs

Posted: Sat Oct 24, 2009 5:33 pm

Are you saying the center text is fixed and you want it the same way along with the image with the fancy border and being able to see another image behind the first one? It's hard to figure out what you want from an image, but if that's the idea, then CSS opacity properties will given you the set up to have a see-through image and have the text fixed ontop of it.

HTML Code help needed - Table text /formatting stretching th

varocketry — Thu Oct 22, 2009 8:06 am

Author: varocketry

Posted: Thu Oct 22, 2009 8:06 am

Well, I'm open to all suggestions.

THanks Ron

Table in Blogger

cjmo75 — Wed Oct 21, 2009 2:53 pm

Author: cjmo75

Posted: Wed Oct 21, 2009 2:53 pm

There is a very easy work around for this using CSS style tags. All you have to do is place a code before your table in your post and then close it with a </div> tag. Here's an example:

Insert this directly above your table:

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">

Then insert your table code: EX:

<table cellspacing=5 cellpadding=0 border=0>
<tr>
<td> First banner code here </td>
<td> Second banner code here </td>
</tr>
</table>

After the last line of table code, close it off by inserting this tag:

</div>

If you use this work around, you'll have to manually leave as much space as you want between your last line of text and your table because this code will stop Blogger from manually inserting </br> tags for every line. I've used this in many of my blog posts to display Amazon links. For an example, click http://thirtieslost.blogspot.com/2009/10/my-5-favorite-sylvester-stallone-movies.html and look at the bottom of the post. Hope this helps.

How To Center A Table

Mori — Fri Oct 16, 2009 9:02 am

Author: Mori

Posted: Fri Oct 16, 2009 9:02 am

Thanks for the reply!
I tried your code, but it didn't center my table. Would you please give me the table complete code?

Thanks again!

html not displaying properly

sticks464 — Mon Oct 12, 2009 3:22 pm

Author: sticks464

Posted: Mon Oct 12, 2009 3:22 pm

Try adding a complete doctype

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and change the opening <script> tag in the head section to

Code:

HTML Help

Positioning image and text within same cell w/o style sheet

Tables - fixed layout - desperate lady needs help

Table w/in table and Image on top of image:

customize rules in a table

2 Special Questions

Table perfect in Firefox but in IE shows as 1 column????

unwanted space between left side and li

<col> not working fully in IE8

*Completely* eliminating space between rows

Enlarging an entire table onclick of button

Effects and text in a table border

HTML Code help needed - Table text /formatting stretching th

Table in Blogger

How To Center A Table

html not displaying properly

Completely eliminating space between rows