<table> with <hr>

**keissfootball** · Jan 16, 2009 07:51

Hi! I was wondering, if it's possible to somehow separate different tables with the <hr> tag, bacause it seems that I'm not skilled enough to do it. My idea is like this:
<GENERAL TABLE>
Text text text text text <table with an image aligned on the right side>
<hr> (this is the part which doesn't obay my plans)

</END OF THIS GENERAL TABLE>

If we look at the code of the table, it should be something like this:

HTML Code:

<table align="right" height="142" border=0 cellpadding=0 cellspacing=0>
	<tr>
	        <td background="images/logo.png"><img src="images/image.jpg" /></td>
	</tr>
</table>
<hr>
<table align="right" height="142" border=0 cellpadding=0 cellspacing=0>
	<tr>
	        <td background="images/logo.png"><img src="images/image.jpg" /></td>
	</tr>
</table>

Unfortunatelly the HR doesn't justify my expectations - it doesn't start a table on a new line, instead it ends this HR at the start of the table. Sorry for my English, hope you understood, if not - feel free to ask questions.

**molona** · Jan 16, 2009 08:33

First, <hr> is just a horizontal line, and you probably want a space... that would be <br>

Second, for the kind of layout you are talking, I don't see the need of a table at all. You have different methods with less code, such as using a div and put the image inside it and float it to the right.

**AutisticCuckoo** · Jan 16, 2009 08:33

It's the align attributes you use in your tables that cause this problem. They are funcionally equivalent with the float CSS property, which means you need to clear the <hr>:

Code HTML4Strict:

<hr style="clear:both">

**molona** · Jan 16, 2009 09:24

Originally Posted by AutisticCuckoo

It's the align attributes you use in your tables that cause this problem. They are funcionally equivalent with the float CSS property, which means you need to clear the <hr>:

Code HTML4Strict:

<hr style="clear:both">

My apologies. I think you are right. For some reason I assumed keisfootball really didn't want the horizontal line, only to have the tables separated. In that sense, I thought that adding a bit of white space was enough and then a br element made more sense (although I'd probably use CSS to do it)

But reading the question again, and his code, probably he does want that horizontal line.

I read it too quickly

**keissfootball** · Jan 16, 2009 10:49

Thanks for the quick response - this was the thing I was searching for - million thanks!

**felgall** · Jan 16, 2009 13:07

You'd get a more consistent appearance between browsers if you set a border to create the line rather than using <hr> since <hr> has a different default appearance in different browsers and can't be styled to look the same in all.

**AutisticCuckoo** · Jan 16, 2009 14:29

On the other hand, that may not matter if all she/he is after is a horizontal separator. Not everyone worries that their pages look identical in different browsers.

And few 'normal' users, I suspect, open the same site in multiple browsers and send hate mail to the authors if there's a few pixels' discrepancy between them.

**Erik J** · Jan 16, 2009 15:58

Originally Posted by felgall

... since <hr> has a different default appearance in different browsers and can't be styled to look the same in all.

The ruler itself can be styled to look the same in all, but the horizontal spacing can't.

In the two major browsers it can though.

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Ruleset For More Consistent &lt;hr&gt; Style</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
 
div{ margin:20px; border:1px solid #ccc; background:#ffe}
h1,h2{ margin:0; border-bottom:1px solid #ccc; text-align:center; font:16px/1.2 arial; color:#333}
p{ margin:0; border-bottom:1px solid #ccc; font-size:0}
 
.styled hr{
  border:0;                   /* for FF; border reset */
  border-top:10px solid gold; /* set hr thickness for good browsers, set style and color for all */
  height:10px;                /* set hr thickness for IE */
  background:transparent;     /* for Opera and Safari; remove default hr color */
  font-size:14px;             /* for FF to mimic the fix "margins" on hr in IE */
}
.styled .hr1{
  border-top:1px solid red;
  height:1px;
}
.styled .hr2{
  border-top:2px solid blue;
  height:2px;
}
.styled .hr5{
  border-top:5px solid green;
  height:5px;
}
</style></head><body>
 
<h1>Horizontal ruler size and spacing styled for Firefox and Internet Explorer</h1>
 
<div><h2>&lt;hr&gt; default / &lt;hr size=1 red&gt; / &lt;hr size=2 noshadow blue&gt;</h2>
<hr><p></p>
<hr size="1" color="red"><p></p>
<hr size="2" noshade color="blue"></div>
 
<div class="styled"><h2>&lt;hr&gt; consistently styled for FF & IE (in other space differ) 1px / 2px / 5px</h2>
<hr class="hr1"><p></p>
<hr class="hr2"><p></p>
<hr class="hr5"></div>
 
</body></html>

User Tag List

Thread: <table> with <hr>

Thread Tools

Display

<table> with <hr>

Bookmarks

Bookmarks

Posting Permissions