<table> with <hr>

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

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>
	        <td background="images/logo.png"><img src="images/image.jpg" /></td>
<table align="right" height="142" border=0 cellpadding=0 cellspacing=0>
	        <td background="images/logo.png"><img src="images/image.jpg" /></td>

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.

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.

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

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:

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

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.

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:

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;
.styled .hr2{
  border-top:2px solid blue;
.styled .hr5{
  border-top:5px solid green;

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