<table> with <hr>

Get Started
1

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)
<!-- and again the same text, table with an image etc. –>
</END OF THIS GENERAL TABLE>

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

<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.

2

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.

3

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>:

<hr style="clear:both">
4

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 :smiley:

5

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

6

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.

7

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. :slight_smile: 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. :stuck_out_tongue:

8

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. :slight_smile:

<!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 <hr> 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><hr> default / <hr size=1 red> / <hr size=2 noshadow blue></h2>
<hr><p></p>
<hr size="1" color="red"><p></p>
<hr size="2" noshade color="blue"></div>

<div class="styled"><h2><hr> 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>