Problem with a table layout

[certificates]

I have a problem with a two tables. The problem is that although they are both styled table-2 the widths of the columns in each table are different.
Is it possible for them to be the same ? I have read my book, and scoured the web, put cannot crack this bit.

Also, you will see in the HTML that there is a <hr color="black"> The checker says that this is no longer acceptable, but apparantly hr cannot be coloured or so I read. If this is resolvable, that would be great. I did try styling it as hr {color: #000000} but it didn't work. All I want is a black line !

The web page is at: http://www.c5d.co.uk/description1911ed1.php

I'd like to resolve this because I have twenty of these pages !

Thanks as always

Antony


This is the relevant CSS

table {margin:auto;font-size: 15px;font-style:italic; font-weight:bold;}
td{font-weight:bold; font-style:italic;}
#table-3, {border-collapse:collapse; border:0px solid black;border-style:hidden;}
#table-3 tr,th,td {border-collapse:collapse; border:0px solid black;border-style:hidden;border-bottom-color:#708090;text-align:center;}
#table-2 td,th,td {border: 1px solid black;}
#table-4, {border-collapse:collapse; border:0px solid black;border-style:hidden;}
#table-4,tr,th,td {border-collapse:collapse; border:0px solid black;border-style:hidden;border-bottom-color:#708090;text-align:left;}

This is the HTML

<hr color="black">
<p class="local">Boundary of Enumeration District</p>
<p class="local">On the north and northwest by the civil parish of Bardsley, on the south by the civil parish of Ashton Under Lyne, on the east by the civil parishes of Hurst and Hartshead and on the west by that portion of the civil parish of Waterloo which is in the Knott Lanes sub district.</p>
<hr color="black">
<p class="censusofenglandandwales1911">Contents of Enumeration District</p>
<br>
<p class="local">If the Enumeration District extends into more than one Civil Parish, Ecclesiastical Parish, Parliamentary Division etc., state the name in Column 1, and show the Contents separately in Column 2 opposite the respective names in Column 1; after each division of the Enumeration District draw a line across the page.
</p><table id="table-2" >
<tr><!-- Row 1 -->
<td>COLUMN 1</td><!-- Col 1 -->
<td>COLUMN 2</td><!-- Col 2 -->
<td>COLUMN 2</td><!-- Col 3 -->
<td>COLUMN 2</td></tr>
<tr><td>Ecclesiastical Parish</td><!-- Col 1 -->
<td>Lordsfield (3 Cottages)</td><!-- Col 2 -->
<td>Langham Street</td><!-- Col 3 -->
<td>Wilshaw Road up to Wilshaw Farm </td><!-- Col 3 -->
</tr>
<tr><!-- Row 3 -->
<td>Ashton Under Lyne Christ Church Part of</td><!-- Col 1 -->
<td>Elgin Street N^os 53 to 61 odds</td><!-- Col 2 -->
<td>Clive Street</td><!-- Col 3 -->
<td>Gordon Street</td><!-- Col 3 --></tr>
<tr><!-- Row 3 -->
<td>Ashton Under Lyne Christ Church Part of</td><!-- Col 1 -->
<td>Elgin Street N^os 53 to 61 odds</td><!-- Col 2 -->
<td>Clive Street</td><!-- Col 3 -->
<td>Gordon Street</td><!-- Col 3 --></tr>
<tr><!-- Row 5 -->
<td> </td><!-- Col 1 -->
<td>Taunton Road Crowhill House Milton Villas and <P class="two">94</p> 90 to 146 even Thornfield Fern Lea Hazel Dene Oaklands Gardener's Arms and N^os 95 to 135 odd</td><!-- Col 2 -->
<tD>Cavendish Street</td><!-- Col 3 -->
<td>Store Street</td><!-- Col 4 -->
</tr>
<tr><!-- Row 6 -->
<td> </td><!-- Col 1 -->
<td> </td><!-- Col 2 -->
<td>Walton Street</td><!-- Col 3 -->
<td> </td><!-- Col 4 -->
</tr>
</table>
<hr color="black">

<table id="table-2" >
<tr><td>Ecclesiastical Parish: Bardsley Holy Trinity (Part of)</td><!-- Row 1 -->
<td>Oldham Road N^os 255 to 305 Odd and 312 to 384 even and Glendor including Strafford House off the road</td><!-- Col 2 -->
<td>Limehurst Farm and Cottage</td><!-- Col 3 -->
<td>Oaken Clough and 2 Cottages off</td><!-- Col 4 -->
</tr>
<tr><!-- Row 2 -->
<td></td><!-- Col 1 -->
<td>Limehurst Road</td><!-- Col 2 -->
<td>Buckley Street and 4 Cottages off</td><!-- Col 3 -->
<td></td></tr>
</table>

[ralph.m]

The columns find their own widths based on their content. If you want to force a width, you need to set them via CSS. You could give each column a class and set a width.

Regarding the <hr>, you should be able to style it black, but still, it's better to use CSS for this rather than an HTML element. This would do it:

#table-2 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #000;}
#table-2 + #table-2 {margin:0; padding: 0; border: none;}

However, you have broken the most basic rule for IDs. You can only use them once per page. So change id="table-2" to class="table-2", and then change the above code to

.table-2 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #000;}
.table-2 + .table-2 {margin:0; padding: 0; border: none;}

You can do all that more efficiently with CSS3, but it's not as reliable. It might be better to give a special class to the first table for this styling, rather than having to set the rule and then remove it.

[certificates]

The HR works in the table but there are two more HRs that have now turned white ?

Also the adjustment to the table has removed the internal borders within the table.

What I want it to look like is

http://www.c5d.co.uk/description1911ed1.htm The actual page is http://www.c5d.co.uk/description1911ed1.php

I shall try working on this tonight after work

Thanks

Antony

[ralph.m]

Hm, not sure where those cell borders went. You could do something like this:

.table-2 td {border: 1px solid #000;}

Use borders instead of <hr> throughout your document—o do the same wherever you want a horizontal line. You could put a bottom border on a <p>, par example.

[certificates]

.table-2 td,th,td {border: 1px solid black;}
.table-2 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #000;}

Works to a certain extent. It gives me a bottom margin on the second table which I don't want though. Easy to resolve though by renaming the table and removing the border bottom elements I guess.

I guess I shall have to set each column width as 15 50 15 20 % or similar. Will try tonight

Thanks

Antony

[ralph.m]

I was suggesting the above code in addition to the previous code, which wiped out the border bottom on the second table.

.table-2 td,th,td {border: 1px solid black;}y

Not that this code will apply to a td in .table-2 and to every th and td on the page. You prolly meant

.table-2 th, .table-2 td {border: 1px solid black;}

[certificates]

What I have actually used is this and it works a treat

.table-2 td,th,td {border: 1px solid black;}
.table-2 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #000;}
#Row1 {width:15%; }
#Row2 {width: 50%;}
#Row3 {width: 15% }
#Row4 {width: 20% }
.table-5 td,th,td {border: 1px solid black;}
#Row5 {width:15%; }
#Row6 {width: 50%;}
#Row7 {width: 15% }
#Row8 {width: 20% }

Just need to sort out the two HRs now. How to get them black

Thanks

[ronpat]

Antony, be aware that ALL <th> and <td> elements in ALL tables are being given this black border. NOT just the ones in .table-2 and .table-5 .

.table-2 td,th,td {border: 1px solid black;}

If targeting matters, please see Ralph's post #6 for the syntax that targets only those two tables.

If targeting does not matter, then you can simplify your code by deleting everything before and including the first comma, leaving only th,td {border: 1px solid black;}, and deleting the .table-5 line entirely.

[ronpat]

Antony, your example shows that you have "id"d <td> elements as "Row-number"... <td id="Row1"> for example.

Be aware that this might be confusing because <td> elements are columns, not rows.

A more informative naming convention would be <td class="Col1"> , etc.

Note that I used "class" instead of "id".
ID's are unique. Classes can be repeated. There would be no need to create *5, *6, *7, and *8 if you used classes. You could just repeat the classes in the second table, <td class="Col1"> etc, in both tables as needed.


Finally, please DELETE the stray <p> tag from the start of line 105. It has been following you for many pages.

[ronpat]

(1) Oops, I forgot to subtract the line count in the php include. Without the php include, the line number should be 29 or 30.
The following is the line with the stray <p> tag. The leading <p> tag needs to be deleted.

<p><p class="one">There is another way. <A href="http://www.c5d.co.uk">Certificates in 5 Days (C5D)</a> Why not give me a try ?</p>

(2) New on this page, on line 59, there is no closing </td> tag at the end of column2, after the word "of". Needs to be added.

(3) One more missing tag and we're done. This one's been around for awhile, too. At this time, there is no close tag for <div id="wrapper">. This will fix it.
Add a </div> tag immediately above|before the </body> tag.

Cheers

[ronpat]

Antony, if you simply want to replace an <hr> tag, try replacing it with this...

The CSS:

.hr0 div {
    width:96%;
    height:0;
    border:1px solid #000;
    margin:7px auto;
}

The HTML:

<div class="hr0"><div></div></div>

[certificates]

Thanks for the input. I don't want to replace the HR, but make it black which is what it looked like in FF, but nor in Chroem or IE. I have found this example by searching and whilst the original author had a red line, it was easy enough to turn it black by changing the colour.


hr {
border: 0; width: 100%;color: #000; background-color: #000; height: 2px;

I have amended the HTML. The HTML checker I used did not pick up the missing TD, nor the extra <p>. The missing div appears on all of the current set up and is being replace as I change them all.

This stylesheet is only for this 1911 census, so the TD classes/ids are fine.

Thanks all for the help.

I'm sure I'll be back !

Antony

[ronpat]

Smashing!

[Paul O'B]

Thanks for the input. I don't want to replace the HR, but make it black

Some browsers use background-color to color the hr and some use color so you need to set both strangely enough. In IE7 and under it is impossible to collapse the default margins in the hr and the gap will always be bigger.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
hr {
	border:none;
	padding:0;
	margin:0;
	font-size:0;
	overflow:hidden;
	height:1px;
	background:red;
	color:red;
}
</style>
</head>

<body>
<hr>
<hr>
<hr>
</body>
</html>