Is there a beter way to style a nested table?

HTML & CSS
1

web page: www.c5d.co.uk/1871.php

The CSS is in the web page as opposed to the stylesheet because I couldn’t get it to work otherwise.

What I should really like is all 8 columns to be the same width, and to stretch all the way across the existing table, leaving no space on the right or the left.

It may mean using smaller font size, but the <br>s are to remain as placed.

The CSS/HTML is below. Is there a better way ? My concern is that if someone is looking on a different sized screen than me, would it still look OK.

<table class=“table1861”>
<tr><td colspan=“13”>
<table class=“tableheader1861”>
<tr> <td colspan=“8”><p class=“censusalignment”>The Undermentioned Houses are situate within the Boundaries of the</p></td>
</tr> <tr>
<td>*Civil Parish [<p class=“strike”>or Township</p>] of</td>
<td><div style=“width:165px;”><p class=“censusalignment”><span class=“strike”>City or<br>Municipal Borough of</span></p></div></td>
<td><div style=“width:155px;”><p class=“censusalignment”><span class=“strike”>Municipal Ward of</span></p></div></td>
<td><div style=“width:175px;”><p class=“strike”><span class=“censusalignment”>Parliamentary Borough of</span></p></div></td>
<td><div style=“width:110px”><p class=“censusalignment”><span class=“strike”>Town of</span></p></div></td>
<td><div style=“width:156px;”><p class=“censusalignment”>Village <span class=“strike”>or Hamlet&, of</span></p></div></td>
<td><div style=“width:188px;”><p class=“censusalignment”><span class=“strike”>Local Board of[Improvement<br>Commissioners District] of</span></p></div></td>
<td><div style=“width:161px;”><p class=“censusalignment”><span class=“strike”>Ecclesiastical District of</span></p></div></td>
</tr>
<tr>
<td><p class=“censusalignment”>Kimeridge</p></td>
<td><p class=“censusalignment”></p></td>
<td><p class=“censusalignment”></p></td>
<td><p class=“censusalignment”></p></td>
<td><p class=“censusalignment”></p></td>
<td><p class=“censusalignment”></p></td>
<td><p class=“censusalignment”>Kimeridge</p></td>
<td><p class=“censusalignment”></p></td>
</tr>

</table>
</td></tr> …eventually </table>

2

Is that inner table really a single piece of tabular data associated with the tabular data of the rest of the table?

If not (and its 99.99999% certain that it isn’t) then you shouldn’t be using a nested table in the first place.

Rewrite the HTML so that it semantically identifies the content and then it will be possible to apply CSS that lays the page out properly without the huge number of complications that nested tables introduce.

3

Thanks for the comment

I believe tabular format is the best way forward for what I am trying to do.

This is a transcription of eight census pages each with two tables with different number of columns.

An example of the page is attached.

If you could suggest a better way forward, the I’d be obliged, but styling the table does seem easiest

Antony

4

So it should be TWO tables - not nested tables.

You can always set the widths of the two tables to be the same using CSS.

5

Thanks for your message. I have done what you suggested but now have two problems; one major, one minor.

The minor table will not seem to give the cell height of 1.25em as I desire. What is wrrong with this CSS ?

.tableheader1861 td {border:1px solid black;}
.tableheader1861 td {height:1.25em; white-space:nowrap;font-size:0.80em; }
.tableheader1861 .censusalignment {text-align:center;margin:0 -7px 0 0;}
.tableheader1861 {display:table; width:140.5%;table-layout:fixed;}
.tableheader1861 td {width:12.5%;}

The second problem is that the bigger table now has varying widths due to being seperated into 8 different tables. How do I resolve that

Thanks for any input

6

What doctype is your page using? The wrong doctype can result in cell heights being ignored.

If it is supposed to be a single table then make it a single table.

7

Antony,

If your intent is to put the header table above each “section table”, then you can try something like this.

Add
<div class="tablewrapper">
above the first table (near top of page) and close it after the last table (near bottom of page).

Add the following CSS:


.tablewrapper {
    display:table;
}
.tableheader1861,
.table1861 {
    width:100%;
}

This will stretch the width of all of the tables so they are the same as the widest table in the bunch.

PS: When you post code, PLEASE put
[noparse]


all of your code here

[/noparse]
tags around it.

8

The doc type is HTML as below

<!DOCTYPE html>
<html lang=“en”><head>

I don’t understand your second comment.

By splitting the large table of 8 pages into seperate tables, to insert the smaller one it obviously breaks up the first table.

I’m sorry if I’m not clear, perhaps it would be clearer if you had a quick view of the page. www.c5d.co.uk/1871.php

Thanks

Antony

9

This is exactly what is required, it works a treat.

Now I just need to get the cells heights to work properly in the tableheader1861 bit.

I shall have a try this evening

Thanks as ever.

10

Hi certificates,
On my 1280*1024px screen there is an empty “column” of about 150px on the left side of the table. If the table is beginning just at the left of the screen, the visitors have less to scroll horizontally to see the table.

This can be done by:

  • Setting the #container wrapper for this page without a width. *)
  • Setting the header parts centered with the 950px width.
  • You can give the advertisements container with the class=“clearfloats” an ID to get 'm:
    <div id=“advertscontainer” class=“clearfloats”> <!-- adverts container –>
#container {
     width: auto;
}
#header,
#navcontainer,
#advertscontainer {
     width: 950px;
     margin: 0px auto;
}

*) The class=“container” has a width of 950px, but the id=“container” in the same <div> is not used. An ID is more specific than a class, so the {width:auto;} of the ID will overrule the {width:950px;} of the class. In this way, the class=“container” can stay unchanged for the other pages. But over there the ID must be removed, if the ID is there too!

Alternative is to rename the id=“container” on this page in for example id=“tablepage”, and give that the {width: auto;}.
Then on other pages with the id=“container” nothing has to be changed.

11

Thanks for this.

There are currently over 150 pages of transcriptions of various censuses on these pages, and my aim to get them all working.

I am aware of the space on the left, but more importantly to me at present is to get the census tabular format resolved.

When I have done I shall attend to the left hand space. I have noted it in my file and will use it once I have resolved this censuses.

I shall let you know when I have done this of course.

Thanks very much for your input. It’s welcome.

Antony

12

I have got the cell height to work by putting it into a div and classing the div.

I don’t know if that is the best way, but it seems to work

This page is now virtually finished.

The only problem for a pedant like me is on the first line: The houses situate in: The text is aligned at the top of the cell and not the middle.

And in IE, the line is garbage. The bracket Page 1 should be aligned right and the remainder centered as it is in Chrome.

How can this be ajusted ?

13

Let’s close this off now.

I’ll start a new thread