tags that start a new line

by **ihsin** on Mon Jan 14, 2008 9:03 am

hi there,

Why do some tags start a new line and some don't? I know I can try them out, but is there a rule/rationale behind the behavior? For example, <table> starts and ends its own line, e.g.:

Code: Select all: This is <table> <tr> <td> a hot </td> </tr> </table> pie.

would produce:

This is
a hot
pie.

Note that the table is on its own new line. On the other hand, for example, <img> would not start a new line and would simply continue with my text like a single letter, with no break in the text line, no matter how big the image is, as in

Code: Select all: This is <img src="A_HOT.jpg"> pie.

I get

This is [a huge image] pie.

In general, I'd like to have a table that can be "embedded" in my text, (i.e., without creating its own new line, but make the line as tall as needed, much like the <img> tag). Is this possible?

Thanks

David

by **webmaster** on Mon Jan 14, 2008 9:39 am

Welcome to DEVPPL.

Yes, it's possible, just make a table or DIVs and it will work, example:

Code: Select all: <table><tr><td>Text here</td><td><table><tr><td>ANOTHER TABLE HERE</td></tr></table></td></tr></table>

To fix the vertical alignment, you might want to change the first <tr> to <tr valign="top">

by **ihsin** on Mon Jan 14, 2008 10:37 am

Thanks for the quick reply.

I understand your suggestion, but it only works if my text (or your "Text here") is short and spans only 1 line. What I need is a solution that's in a <p> environment. Say I have a long paragraph and I'd like to have a table in the text without any line break. For example,

Code: Select all: This is a very long paragraph. This is a very long paragraph. This is a very long paragraph. This is a very long paragraph. This is a very long paragraph. This is a very long paragraph. <table> my 5-row table </table> This is a very long paragraph. This is a very long paragraph. This is a very long paragraph. This is a very long paragraph. This is a very long paragraph.

I'd like the paragraph to flow as normal, but the line where the table is eventually in will be tall as needed, much like embedding a <img> tag behavior, where the text before and after <img> flows just like a normal <p>.

Your suggestion will force me to manually break the paragraph, which is what I'd like to avoid in the first place.

Thanks again for the reply. Hope my problem is clearer now.

David

by **leonard** on Tue Jan 15, 2008 8:48 pm

Hi ihsin

Obviously in HTML, some TAGs just have special default behaviors, of which the implicit newline is one of them.

You can however override most of these default behaviors by using CSS.
If you want to declare all tables as inline, just add this to your HTML-page in the head-TAG:

Code: Select all: <head> <style type="text/css"> table {display: inline} </style> </head>

This may not exatly look as you want it to be, but it will get rid of the newline. Just play with CSS until you get it right.

This is my favorite CSS page:
http://www.w3schools.com/css/default.asp

cheers!
- leonard

by **ihsin** on Tue Jan 15, 2008 9:02 pm

Thanks a lot, Leonard. Problem solved.

by **ihsin** on Wed Jan 16, 2008 2:31 am

hi there,

I have a related problem now. After "display:inline", I got the table to be inlined. Then I'd like the table to be vertically aligned in the middle of my paragraph, so I looked up the CSS reference and decided to add "vertical-align:middle". On IE, this works perfectly. However on Firefox, the vertical-align doesn't work (i.e., the bottom of the table is aligned with the bottom of the text). Here's an example: Say "I have 1/2 pie.", but I'd like to have "1/2" show up as the horizontal bar form:

Code: Select all: I have <table style="display:inline;vertical-align:middle"> <tr> <td> 1 <hr /> 2 </td> </tr> </table> pie.

Any browser-dependent experience on this?

Thanks

David

ps. BTW, on the <img> tag, both IE and Firefox respond to "verticcal-align" very well (i.e., if I want my image to align in the middle of my text).

by **webmaster** on Wed Jan 16, 2008 8:20 am

If you just want that row to work, here's a workaround:

Code: Select all: <table> <tr> <td>I have</td> <td>1 <hr /> 2</td> <td>pie.</td> </tr> </table>

by **ihsin** on Wed Jan 16, 2008 8:30 am

No, that line was just an example. As I mentioned earlier, my paragraph is long, and manually breaking it (to fit into your technique) is very undesireable.

Thanks again for your suggestion though.

Any other insight? My style thing is working on IE already. It's just Firefox. Could this be a bug on Firefox (for not complying with CSS spec.?)

tags that start a new line

tags that start a new line

Who is online